Change fancy links to use non-pseudo elements

Pseudo elements cannot be hidden from screen readers,
using spans allows aria-hidden to be set
This commit is contained in:
Shadowfacts 2019-01-04 21:44:55 -05:00
parent ce219d972f
commit 167e60d852
Signed by: shadowfacts
GPG Key ID: 94A5AB95422746E5
10 changed files with 53 additions and 51 deletions

View File

@ -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};

View File

@ -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"
});

View File

@ -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,
});

View File

@ -32,4 +32,13 @@ 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>`;
}

View File

@ -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">
<%= post.metadata.title %>
</a>
<%- fancyLink(post.metadata.title, post.metadata.permalink, `itemprop="url mainEntityOfPage"`) %>
</h2>
<%- include("includes/article-meta.html.ejs", { metadata: post.metadata }) %>
<div class="article-content" itemprop="description">

View File

@ -149,36 +149,32 @@ 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 {
content: "{";
left: 0.5em;
}
&::after {
content: "}";
right: 0.5em;
&:first-child {
left: 0.5em;
}
&:last-child {
right: 0.5em;
}
}
&:hover {
color: var(--accent-color);
&::before, &::after {
> span {
color: var(--accent-color);
}
&::before {
left: -0.75em;
}
&::after {
right: -0.75em;
&:first-child {
left: -0.75em;
}
&:last-child {
right: -0.75em;
}
}
}
}

View File

@ -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">
<%= post.metadata.title %>
</a>
<%- fancyLink(post.metadata.title, post.metadata.permalink, `itemprop="url mainEntityOfPage"`) %>
</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>

View File

@ -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><a href="https://rtfm.shadowfacts.net" class="fancy-link">RTFM</a></li>
<li><a href="https://type.shadowfacts.net" class="fancy-link">Type</a></li>
<li><a href="/tutorials/" class="fancy-link">Tutorials</a></li>
<li><%- fancyLink("Meme Machine", "https://mememachine.shadowfacts.net") %></li>
<li><%- fancyLink("RTFM", "https://rtfm.shadowfacts.net") %></li>
<li><%- fancyLink("Type", "https://type.shadowfacts.net") %></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><a href="/feed.xml" class="fancy-link">RSS</a></li>
<li><a href="https://github.com/shadowfacts" class="fancy-link">GitHub</a></li>
<li><a href="https://twitter.com/ShadowfactsDev" class="fancy-link">Twitter</a></li>
<li><a href="https://social.shadowfacts.net/users/shadowfacts" class="fancy-link">Mastodon</a></li>
<li><%- fancyLink("Email", "mailto:me@shadowfacts.net") %></li>
<li><%- fancyLink("RSS", "/feed.xml") %></li>
<li><%- fancyLink("GitHub", "https://github.com/shadowfacts") %></li>
<li><%- fancyLink("Twitter", "https://twitter.com/ShadowfactsDev") %></li>
<li><%- fancyLink("Mastodon", "https://social.shadowfacts.net/users/shadowfacts") %></li>
</ul>
</nav>
</div>

View File

@ -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">
<%= tutorial.metadata.title %>
</a>
<%- fancyLink(tutorial.metadata.title, tutorial.metadata.permalink) %>
</h2>
<%- include("includes/article-meta.html.ejs", { metadata: tutorial.metadata }) %>
</article>

View File

@ -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">
<%= series.index.metadata.title %>
</a>
<%- fancyLink(series.index.metadata.title, series.index.metadata.permalink) %>
</h2>
<p class="article-meta">
last updated on