🐛 Add headings, label lists, remove aria-labels for a11y (#109)

Co-authored-by: Tatiana Mac <github@tatianamac.com>
This commit is contained in:
Sarah Higley 2020-05-01 19:12:17 -07:00 committed by GitHub
parent beb2f5db69
commit 48ebe70b99
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 10 additions and 7 deletions

View File

@ -27,10 +27,10 @@ module.exports = function(config) {
if (existingDefinition) { if (existingDefinition) {
return `<a href="${definitionPermalink( return `<a href="${definitionPermalink(
existingDefinition.data.slug existingDefinition.data.slug
)}" aria-label="${subTermData.full_title}">${subTermData.text}</a>`; )}">${subTermData.text}</a>`;
} }
return `<span aria-label="${subTermData.full_title}">${subTermData.text}</span>`; return `<span>${subTermData.text}</span>`;
}); });
// just a debug filter to lazily inspect the content of anything in a template // just a debug filter to lazily inspect the content of anything in a template

View File

@ -7,7 +7,7 @@
<span class="flag__red">{{ definition.data.flag.text }}</span> <span class="flag__red">{{ definition.data.flag.text }}</span>
{% endif %} {% endif %}
{%- if definition.data.sub_terms -%} {%- if definition.data.sub_terms -%}
<ul class="sub-terms"> <ul class="sub-terms" role="list" aria-label="{{definition.data.title}}">
{% for term in definition.data.sub_terms %} {% for term in definition.data.sub_terms %}
<li <li
class="subterm" class="subterm"

View File

@ -1,10 +1,11 @@
<section> <section>
<nav class="" aria-label="Definitions"> <h2 id="terms-heading" class="visually-hidden">Terms</h2>
<nav class="" aria-labelledby="terms-heading">
<ol class="multi-column u-no-padding-left list"> <ol class="multi-column u-no-padding-left list">
{% for section in collections.tableOfContent %} {% for section in collections.tableOfContent %}
<li> <li>
<span class="sub-headline">{{ section.title }}</span> <h3 class="sub-headline" id="list{{loop.index}}">{{ section.title }}</h3>
<ol class="toc__list"> <ol class="toc__list" role="list" aria-labelledby="list{{loop.index}}">
{% for definition in section.definitions %} {% for definition in section.definitions %}
{% include 'components/table-of-content-item.njk' %} {% include 'components/table-of-content-item.njk' %}
{% endfor %} {% endfor %}

View File

@ -14,7 +14,7 @@ layout: layouts/index.njk
</p> </p>
</div> </div>
<div class="box"> <div class="box">
<p class="subtitle">Ways to help</p> <h2 class="subtitle">Ways to help</h2>
<ol class="help"> <ol class="help">
<li>Submit words and definitions or contribute to our code base through <a href="https://github.com/tatianamac/selfdefined/pulls" rel="noreferral">pull requests</a> or <a href="https://github.com/tatianamac/selfdefined/issues" rel="noreferral">issues</a>. Start with our <a href="https://github.com/tatianamac/selfdefined/blob/master/CONTRIBUTING.md" rel="noreferral">contributing guidelines</a> and <a href="/documentation/">documentation</a>.</li> <li>Submit words and definitions or contribute to our code base through <a href="https://github.com/tatianamac/selfdefined/pulls" rel="noreferral">pull requests</a> or <a href="https://github.com/tatianamac/selfdefined/issues" rel="noreferral">issues</a>. Start with our <a href="https://github.com/tatianamac/selfdefined/blob/master/CONTRIBUTING.md" rel="noreferral">contributing guidelines</a> and <a href="/documentation/">documentation</a>.</li>
<li>Sponsor this work through <a href="https://opencollective.com/selfdefined">Open Collective</a> or <a href="https://github.com/sponsors/tatianamac">GitHub Sponsors</a>.</li> <li>Sponsor this work through <a href="https://opencollective.com/selfdefined">Open Collective</a> or <a href="https://github.com/sponsors/tatianamac">GitHub Sponsors</a>.</li>

View File

@ -62,9 +62,11 @@ p {
.subtitle { .subtitle {
font-family: $ext-sans; font-family: $ext-sans;
font-size: 1.25rem;
font-weight: $regular; font-weight: $regular;
grid-column: span 2; grid-column: span 2;
letter-spacing: 0.1; letter-spacing: 0.1;
margin: .75rem 0;
} }
.small { .small {