Change fancy links to use non-pseudo elements

Pseudo elements cannot be hidden from screen readers,
using spans allows aria-hidden to be set

lib/generate/paginated.ts

@@ -30,7 +30,8 @@ export default async function generatePaginted(posts: Page[], basePath: string,
 				prevLink: pageNum == 1 ? "" : pageNum == 2 ? basePath : path.join(basePath, (pageNum - 1).toString()),
 				nextLink: pageNum == chunks.length ? "" : path.join(basePath, (pageNum + 1).toString())
 			},
-			formatDate
+			formatDate,
+			fancyLink: util.fancyLink
 		};
 		if (extraData) data = {...data, ...extraData};
 

lib/generate/tutorials.ts

@@ -73,7 +73,8 @@ async function generateTutorialsAndIndex(group: string, title: string): Promise<
 	page.text = ejs.render(page.text, {
 		tutorials,
 		metadata: page.metadata,
-		formatDate
+		formatDate,
+		fancyLink: util.fancyLink
 	}, {
 		filename: "site/tutorial-series.html.ejs"
 	});
@@ -95,7 +96,8 @@ async function generateIndex(allSeries: TutorialSeries[]) {
 
 	page.text = ejs.render(page.text, {
 		allSeries,
-		formatDate
+		formatDate,
+		fancyLink: util.fancyLink
 	}, {
 		filename: "site/tutorials.html.ejs"
 	});

lib/layout.ts

@@ -3,6 +3,7 @@ import ejs from "ejs";
 import formatDate from "date-fns/format";
 import * as metadata from "./metadata";
 import { Metadata } from "./metadata";
+import * as util from "./util";
 
 export default async function layout(text: string, pageMetadata: Metadata, layoutPath: string): Promise<string> {
 	const layoutFile = path.join("site/layouts", layoutPath);
@@ -10,7 +11,8 @@ export default async function layout(text: string, pageMetadata: Metadata, layou
 	text = ejs.render(layoutPage.text, {
 		content: text,
 		metadata: pageMetadata,
-		formatDate
+		formatDate,
+		fancyLink: util.fancyLink
 	}, {
 		filename: layoutFile,
 	});

lib/util.ts

@@ -33,3 +33,12 @@ export function chunk<T>(array: T[], size: number): Chunk<T>[] {
 
 	return chunks;
 }
+
+export function fancyLink(text: string, href: string, meta?: string): string {
+	return `
+<a href="${href}" class="fancy-link" ${meta || ""}>
+	<span aria-hidden="true">{</span>
+	${text}
+	<span aria-hidden="true">}</span>
+</a>`;
+}

site/category.html.ejs

@@ -11,9 +11,7 @@ metadata.layout = "default.html.ejs"
 	<% for (const post of posts) { %>
 		<article itemscope itemtype="https://schema.org/BlogPosting">
 			<h2 class="article-title" itemprop="headline">
-				<a href="<%= post.metadata.permalink %>" class="fancy-link" itemprop="url mainEntityOfPage">
+				<%- fancyLink(post.metadata.title, post.metadata.permalink, `itemprop="url mainEntityOfPage"`) %>
-					<%= post.metadata.title %>
-				</a>
 			</h2>
 			<%- include("includes/article-meta.html.ejs", { metadata: post.metadata }) %>
 			<div class="article-content" itemprop="description">

site/css/main.scss

@@ -149,40 +149,36 @@ a {
 		text-decoration: none;
 		transition: 0.3s ease all;
 
-		&::before, &::after {
+		> span {
 			position: absolute;
 			transition: 0.3s ease all;
 			font-family: $monospace;
 			color: transparent;
-		}
 
-		&::before {
+			&:first-child {
-			content: "{";
 				left: 0.5em;
 			}
-
+			&:last-child {
-		&::after {
-			content: "}";
 				right: 0.5em;
 			}
+		}
 
 		&:hover {
 			color: var(--accent-color);
 
-			&::before, &::after {
+			> span {
 				color: var(--accent-color);
-			}
 
-			&::before {
+				&:first-child {
 					left: -0.75em;
 				}
-
+				&:last-child {
-			&::after {
 					right: -0.75em;
 				}
 			}
 		}
 	}
+}
 
 pre {
 	overflow: scroll;

site/index.html.ejs

@@ -7,9 +7,7 @@ metadata.layout = "default.html.ejs"
 	<% for (const post of posts) { %>
 		<article itemscope itemtype="https://schema.org/BlogPosting">
 			<h2 class="article-title" itemprop="headline">
-				<a href="<%= post.metadata.permalink %>" class="fancy-link" itemprop="url mainEntityOfPage">
+				<%- fancyLink(post.metadata.title, post.metadata.permalink, `itemprop="url mainEntityOfPage"`) %>
-					<%= post.metadata.title %>
-				</a>
 			</h2>
 			<%- include("includes/article-meta.html.ejs", { metadata: post.metadata }) %>
 			<div class="article-content" itemprop="description">
@@ -22,25 +20,25 @@ metadata.layout = "default.html.ejs"
 	<% } %>
 </div>
 
-<div class="pagination">
+<div class="pagination" role="navigation">
 	<p>
 		<span class="pagination-link">
 			<% if (pagination.prevLink) { %>
 				<a href="<%= pagination.prevLink %>">
-					<span class="arrow arrow-left"></span> <span>Previous</span>
+					<span class="arrow arrow-left" aria-hidden="true"></span> <span>Previous</span>
 				</a>
 			<% } else { %>
-				<span class="arrow arrow-left"></span> <span>Previous</span>
+				<span class="arrow arrow-left" aria-hidden="true"></span> <span>Previous</span>
 			<% } %>
 		</span>
 		Page <%= pagination.current %> of <%= pagination.total %>
 		<span class="pagination-link">
 			<% if (pagination.nextLink) { %>
 				<a href="<%= pagination.nextLink %>">
-					<span>Next</span> <span class="arrow arrow-right"></span>
+					<span>Next</span> <span class="arrow arrow-right" aria-hidden="true"></span>
 				</a>
 			<% } else { %>
-				<span>Next</span> <span class="arrow arrow-right"></span>
+				<span>Next</span> <span class="arrow arrow-right" aria-hidden="true"></span>
 			<% } %>
 		</span>
 	</p>

site/layouts/default.html.ejs

@@ -46,20 +46,20 @@
 <body itemscope itemtype="https://schema.org/Blog">
 	<header class="site-header">
 		<div class="container">
-			<h1 class="site-title"><a href="/" class="fancy-link">Shadowfacts</a></h1>
+			<h1 class="site-title"><%- fancyLink("Shadowfacts", "/") %></h1>
 			<p class="site-description">The outper part of a shadow is called the penumbra.</p>
-			<nav class="site-nav">
+			<nav class="site-nav" role="navigation">
 				<ul>
-					<li><a href="https://mememachine.shadowfacts.net" class="fancy-link">Meme Machine</a></li>
+					<li><%- fancyLink("Meme Machine", "https://mememachine.shadowfacts.net") %></li>
-					<li><a href="https://rtfm.shadowfacts.net" class="fancy-link">RTFM</a></li>
+					<li><%- fancyLink("RTFM", "https://rtfm.shadowfacts.net") %></li>
-					<li><a href="https://type.shadowfacts.net" class="fancy-link">Type</a></li>
+					<li><%- fancyLink("Type", "https://type.shadowfacts.net") %></li>
-					<li><a href="/tutorials/" class="fancy-link">Tutorials</a></li>
+					<li><%- fancyLink("Tutorials", "/tutorials/") %></li>
 				</ul>
 			</nav>
 		</div>
 	</header>
 
-	<div class="container">
+	<div class="container" role="main">
 		<%- content %>
 	</div>
 
@@ -74,11 +74,11 @@
 			</div>
 			<nav class="social-links">
 				<ul>
-					<li><a href="mailto:me@shadowfacts.net" class="fancy-link">Email</a></li>
+					<li><%- fancyLink("Email", "mailto:me@shadowfacts.net") %></li>
-					<li><a href="/feed.xml" class="fancy-link">RSS</a></li>
+					<li><%- fancyLink("RSS", "/feed.xml") %></li>
-					<li><a href="https://github.com/shadowfacts" class="fancy-link">GitHub</a></li>
+					<li><%- fancyLink("GitHub", "https://github.com/shadowfacts") %></li>
-					<li><a href="https://twitter.com/ShadowfactsDev" class="fancy-link">Twitter</a></li>
+					<li><%- fancyLink("Twitter", "https://twitter.com/ShadowfactsDev") %></li>
-					<li><a href="https://social.shadowfacts.net/users/shadowfacts" class="fancy-link">Mastodon</a></li>
+					<li><%- fancyLink("Mastodon", "https://social.shadowfacts.net/users/shadowfacts") %></li>
 				</ul>
 			</nav>
 		</div>

site/tutorial-series.html.ejs

@@ -11,9 +11,7 @@ metadata.layout = "default.html.ejs";
 	<% for (const tutorial of tutorials) { %>
 		<article>
 			<h2 class="article-title">
-				<a href="<%= tutorial.metadata.permalink %>" class="fancy-link">
+				<%- fancyLink(tutorial.metadata.title, tutorial.metadata.permalink) %>
-					<%= tutorial.metadata.title %>
-				</a>
 			</h2>
 			<%- include("includes/article-meta.html.ejs", { metadata: tutorial.metadata }) %>
 		</article>

site/tutorials.html.ejs

@@ -6,9 +6,7 @@ metadata.layout = "default.html.ejs"
 	<% for (const series of allSeries) { %>
 		<article>
 			<h2 class="article-title">
-				<a href="<%= series.index.metadata.permalink %>" class="fancy-link">
+				<%- fancyLink(series.index.metadata.title, series.index.metadata.permalink) %>
-					<%= series.index.metadata.title %>
-				</a>
 			</h2>
 			<p class="article-meta">
 				last updated on