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:
parent
ce219d972f
commit
167e60d852
GPG Key ID:
94A5AB95422746E5
|
|
@ -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};
|
||||
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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>`;
|
||||
}
|
||||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in New Issue