Skip to content

Commit

Permalink
Fix lingering accessibility issues found by Mabl (#1048)
Browse files Browse the repository at this point in the history 
* docs(breadcrumbs): set role on demo h1s

* docs(editor): add alt text to demo image

* docs(menus): wrap fieldset in div[role="menu"]

See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset#technical_summary "Permitted ARIA roles" section

* docs(breadcrumbs): set role on demo h1s to presentation

* docs(badges): ensure all overflow divs are scrollable

* docs(navigation): ensure tabs are direct descendants of tablists

* docs(popovers): ensure unique ids

* docs(page-titles): set presentation role on examples

* docs(popovers): set presentation role on examples

* docs(prose): ensure all md images have alt attr

* docs(prose): add presentation role to md examples

* docs(tables): remove invalid scope attr

* fix(expandable): don't add aria-expanded to radio elements

See also: w3c/aria#1404

* fix(navigation): use aria-pressed on button elements

* Revert "fix(navigation): use aria-pressed on button elements"

This reverts commit f4f460b.

* docs(navigation): add role="tab" to tablist button

* docs(notice): use section for elements w/ role="status"

* Revert "docs(notice): use section for elements w/ role="status""

This reverts commit ef938a5.
  • Loading branch information
@dancormier
dancormier authored Aug 15, 2022
1 parent 0900175 commit 0663d27
Show file tree
Hide file tree
Showing 11 changed files with 125 additions and 121 deletions.
2 changes: 1 addition & 1 deletion docs/_includes/markdown-prose.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ It’s probably important that images look okay here by default as well:

<img
src="https://images.unsplash.com/photo-1556740758-90de374c12ad?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80"
alt=""
alt="two people performing a transaction at a counter on either side of a point of sale system in a trendy salon"
/>

Now I’m going to show you an example of an unordered list to make sure that looks good, too:
Expand Down
18 changes: 9 additions & 9 deletions docs/_includes/markdown-sandbox.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,7 @@ System.out.println("Code Block!");
- Image links - surround an image with a link.
[![An image of a unicorn](https://i.stack.imgur.com/7I1jg.jpg)](http://example.com)
- A bunch of images in a row
<img src="https://i.stack.imgur.com/7I1jg.jpg" width="100"><img src="https://i.stack.imgur.com/7I1jg.jpg" width="100"><img src="https://i.stack.imgur.com/7I1jg.jpg" width="100">
<img src="https://i.stack.imgur.com/7I1jg.jpg" width="100" alt="a unicorn"><img src="https://i.stack.imgur.com/7I1jg.jpg" width="100" alt="a unicorn"><img src="https://i.stack.imgur.com/7I1jg.jpg" width="100" alt="a unicorn">
## Headers
Expand Down Expand Up @@ -274,7 +274,7 @@ Not indented
</blockquote>
<blockquote class="spoiler js-spoiler" data-spoiler="Reveal spoiler">
<img src="https://i.stack.imgur.com/7I1jg.jpg" alt="image of unicorn" title="Tooltip">
<img src="https://i.stack.imgur.com/7I1jg.jpg" alt="a unicorn" title="Tooltip">
</blockquote>
<!-- ## Stack Exchange Extensions to Markdown
Expand Down Expand Up @@ -397,23 +397,23 @@ Only some [basic HTML elements are whitelisted](https://meta.stackexchange.com/q
- `<img>`: `src` then `width` then `height` then `alt` then `title`
<img src="https://i.stack.imgur.com/7I1jg.jpg" alt="image of unicorn" title="Tooltip">
<img src="https://i.stack.imgur.com/7I1jg.jpg" alt="a unicorn" title="Tooltip">
- Specifying one of `width` or `height` scales the image; must specify both to change the aspect ratio. They can't be `px` and they max out at 999.
<img src="https://i.stack.imgur.com/7I1jg.jpg" width="999">
<img src="https://i.stack.imgur.com/7I1jg.jpg" width="999" alt="a unicorn">
<img src="https://i.stack.imgur.com/7I1jg.jpg" width="100">
<img src="https://i.stack.imgur.com/7I1jg.jpg" width="100" alt="a unicorn">
<img src="https://i.stack.imgur.com/7I1jg.jpg" height="999">
<img src="https://i.stack.imgur.com/7I1jg.jpg" height="999" alt="a unicorn">
<img src="https://i.stack.imgur.com/7I1jg.jpg" width="999" height="100">
<img src="https://i.stack.imgur.com/7I1jg.jpg" width="999" height="100" alt="a unicorn">
<img src="https://i.stack.imgur.com/7I1jg.jpg" width="100" height="999">
<img src="https://i.stack.imgur.com/7I1jg.jpg" width="100" height="999" alt="a unicorn">
- Animated gifs are supported
<img src="https://i.stack.imgur.com/AXtId.gif">
<img src="https://i.stack.imgur.com/AXtId.gif" alt="waffles">
- `<kbd>`: no attributes
Expand Down
6 changes: 3 additions & 3 deletions docs/product/components/badges.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -313,7 +313,7 @@
</span>
{% endhighlight %}
<div class="stacks-preview--example">
<div class="overflow-x-auto">
<div class="overflow-x-auto" tabindex="0">
<table class="wmn5 s-table s-table__bx-simple">
<thead>
<tr>
Expand Down Expand Up @@ -372,7 +372,7 @@
<span class="s-badge s-badge__staff s-badge__xs">Staff</span>
{% endhighlight %}
<div class="stacks-preview--example">
<div class="overflow-x-auto">
<div class="overflow-x-auto" tabindex="0">
<table class="wmn5 s-table s-table__bx-simple">
<thead>
<tr>
Expand Down Expand Up @@ -417,7 +417,7 @@
<span class="s-badge s-badge__xs">Extra small</span>
{% endhighlight %}
<div class="stacks-preview--example">
<div class="overflow-x-auto">
<div class="overflow-x-auto" tabindex="0">
<table class="wmn5 s-table s-table__bx-simple">
<thead>
<tr>
Expand Down
6 changes: 3 additions & 3 deletions docs/product/components/breadcrumbs.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@
<a class="s-breadcrumbs--link" href="#">Asking</a>
</div>
</nav>
<h1 class="fs-headline1 fw-normal mb0">What types of questions should I avoid asking?</h1>
<h1 class="fs-headline1 fw-normal mb0" role="presentation">What types of questions should I avoid asking?</h1>
</div>
</section>

Expand All @@ -101,7 +101,7 @@ <h1 class="fs-headline1 fw-normal mb0">What types of questions should I avoid as
<a class="s-breadcrumbs--link" href="#">Review queues</a>
</div>
</nav>
<h1 class="fs-headline1 fw-normal mb0">Close votes</h1>
<h1 class="fs-headline1 fw-normal mb0" role="presentation">Close votes</h1>
</section>
</div>

Expand Down Expand Up @@ -146,7 +146,7 @@ <h1 class="fs-headline1 fw-normal mb0">Close votes</h1>
<a class="s-breadcrumbs--link" href="#">Billing</a>
</div>
</nav>
<h1 class="fs-headline1 fw-normal mb0">Payment Details</h1>
<h1 class="fs-headline1 fw-normal mb0" role="presentation">Payment Details</h1>
</section>
</div>
</section>
106 changes: 55 additions & 51 deletions docs/product/components/menus.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -247,62 +247,66 @@
<div class="stacks-preview">
{% highlight html %}
<div class="s-popover px0 py4">
<fieldset class="s-menu" role="menu">
<legend class="s-menu--title">…</legend>
<label class="s-menu--label d-flex" for="…">
<div class="flex--item mr8">
<input class="s-radio" type="radio" name="…" id="…" role="menuitemradio" checked>
</div>
<div class="flex--item">
<div class="s-label">…</div>
<div class="s-description mt2">…</div>
</div>
</label>
<label class="s-menu--label d-flex" for="…">
<div class="flex--item mr8">
<input class="s-radio" type="radio" name="…" id="…" role="menuitemradio">
</div>
<div class="flex--item">
<div class="s-label">…</div>
<div class="s-description mt2">…</div>
</div>
</label>
</fieldset>
<div class="s-menu" role="menu">
<fieldset>
<legend class="s-menu--title">…</legend>
<label class="s-menu--label d-flex" for="…">
<div class="flex--item mr8">
<input class="s-radio" type="radio" name="…" id="…" role="menuitemradio" checked>
</div>
<div class="flex--item">
<div class="s-label">…</div>
<div class="s-description mt2">…</div>
</div>
</label>
<label class="s-menu--label d-flex" for="…">
<div class="flex--item mr8">
<input class="s-radio" type="radio" name="…" id="…" role="menuitemradio">
</div>
<div class="flex--item">
<div class="s-label">…</div>
<div class="s-description mt2">…</div>
</div>
</label>
</fieldset>
</div>
</div>
{% endhighlight %}
<div class="stacks-preview--example">
<div class="s-popover is-visible ps-relative ws3 px0 py4">
<div class="s-popover--arrow s-popover--arrow__tc"></div>
<fieldset class="s-menu" role="menu">
<legend class="s-menu--title">Roles</legend>
<label class="s-menu--label d-flex" for="choice-user-34">
<div class="flex--item mr8">
<input class="s-radio" type="radio" name="choice-34" id="choice-user-34" role="menuitemradio" checked>
</div>
<div class="flex--item">
<div class="s-label">User</div>
<div class="s-description mt2">Can view, ask, answer, and edit questions. Can also vote on and flag content.</div>
</div>
</label>
<label class="s-menu--label d-flex" for="choice-moderator-34">
<div class="flex--item mr8">
<input class="s-radio" type="radio" name="choice-34" id="choice-moderator-34" role="menuitemradio">
</div>
<div class="flex--item">
<div class="s-label">Moderator</div>
<div class="s-description mt2">Everything a user can do, but can also delete and close questions.</div>
</div>
</label>
<label class="s-menu--label d-flex" for="choice-admin-34">
<div class="flex--item mr8">
<input class="s-radio" type="radio" name="choice-34" id="choice-admin-34" role="menuitemradio">
</div>
<div class="flex--item">
<div class="s-label">Admin</div>
<div class="s-description mt2">Everything a moderator can do and can also manage users, permissions, and site settings.</div>
</div>
</label>
</fieldset>
<div class="s-menu" role="menu">
<fieldset>
<legend class="s-menu--title">Roles</legend>
<label class="s-menu--label d-flex" for="choice-user-34">
<div class="flex--item mr8">
<input class="s-radio" type="radio" name="choice-34" id="choice-user-34" role="menuitemradio" checked>
</div>
<div class="flex--item">
<div class="s-label">User</div>
<div class="s-description mt2">Can view, ask, answer, and edit questions. Can also vote on and flag content.</div>
</div>
</label>
<label class="s-menu--label d-flex" for="choice-moderator-34">
<div class="flex--item mr8">
<input class="s-radio" type="radio" name="choice-34" id="choice-moderator-34" role="menuitemradio">
</div>
<div class="flex--item">
<div class="s-label">Moderator</div>
<div class="s-description mt2">Everything a user can do, but can also delete and close questions.</div>
</div>
</label>
<label class="s-menu--label d-flex" for="choice-admin-34">
<div class="flex--item mr8">
<input class="s-radio" type="radio" name="choice-34" id="choice-admin-34" role="menuitemradio">
</div>
<div class="flex--item">
<div class="s-label">Admin</div>
<div class="s-description mt2">Everything a moderator can do and can also manage users, permissions, and site settings.</div>
</div>
</label>
</fieldset>
</div>
</div>
</div>
</div>
Expand Down
66 changes: 31 additions & 35 deletions docs/product/components/navigation.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -257,20 +257,20 @@
<div class="stacks-preview">
{% highlight html %}
<nav aria-label="…">
<ul role="tablist" class="s-navigation">
<li><button type="button" class="s-navigation--item is-selected" role="tab" aria-selected="true">…</button></li>
<li><button type="button" class="s-navigation--item" role="tab" aria-selected="false">…</button></li>
<li><button type="button" class="s-navigation--item" role="tab" aria-selected="false">…</button></li>
</ul>
<div role="tablist" class="s-navigation">
<button type="button" class="s-navigation--item is-selected" role="tab" aria-selected="true">…</button>
<button type="button" class="s-navigation--item" role="tab" aria-selected="false">…</button>
<button type="button" class="s-navigation--item" role="tab" aria-selected="false">…</button>
</div>
</nav>
{% endhighlight %}
<div class="stacks-preview--example">
<nav aria-label="button navigation">
<ul role="tablist" class="s-navigation">
<li><button type="button" class="s-navigation--item is-selected" role="tab" aria-selected="true">Current revision</button></li>
<li><button type="button" class="s-navigation--item" role="tab" aria-selected="false">Side-by-side diff</button></li>
<li><button type="button" class="s-navigation--item" role="tab" aria-selected="false">Inline diff</button></li>
</ul>
<div role="tablist" class="s-navigation">
<button type="button" class="s-navigation--item is-selected" role="tab" aria-selected="true">Current revision</button>
<button type="button" class="s-navigation--item" role="tab" aria-selected="false">Side-by-side diff</button>
<button type="button" class="s-navigation--item" role="tab" aria-selected="false">Inline diff</button>
</div>
</nav>
</div>
</div>
Expand Down Expand Up @@ -406,25 +406,21 @@
<div class="stacks-preview">
{% highlight html %}
<nav aria-label="…">
<ul class="s-navigation" role="tablist" data-controller="s-navigation-tablist">
<li>
<button type="button"
role="tab"
id="tab-question"
aria-selected="true"
aria-controls="panel-question"
class="s-navigation--item is-selected">Task</button>
</li>
<li>
<button type="button"
role="tab"
id="tab-answers"
aria-selected="false"
aria-controls="panel-answers"
tabindex="-1"
class="s-navigation--item">Answers</button>
</li>
</ul>
<div class="s-navigation" role="tablist" data-controller="s-navigation-tablist">
<button type="button"
role="tab"
id="tab-question"
aria-selected="true"
aria-controls="panel-question"
class="s-navigation--item is-selected">Task</button>
<button type="button"
role="tab"
id="tab-answers"
aria-selected="false"
aria-controls="panel-answers"
tabindex="-1"
class="s-navigation--item">Answers</button>
</div>
</nav>

<div id="panel-question" aria-labelledby="tab-question">
Expand All @@ -438,12 +434,12 @@
<div class="stacks-preview--example bg-black-025">

<nav class="mb8" aria-label="example tablist navigation">
<ul class="s-navigation" role="tablist" data-controller="s-navigation-tablist">
<li><button type="button" role="tab" id="tab-1" aria-selected="true" aria-controls="panel-1" class="s-navigation--item is-selected">Task</button></li>
<li><button type="button" role="tab" id="tab-2" aria-selected="false" aria-controls="panel-2" tabindex="-1" class="s-navigation--item">Answers</button></li>
<li><button type="button" role="tab" id="tab-3" aria-selected="false" aria-controls="panel-3" tabindex="-1" class="s-navigation--item">Duplicate A</button></li>
<li><button type="button" role="tab" id="tab-4" aria-selected="false" aria-controls="panel-4" tabindex="-1" class="s-navigation--item">Duplicate B</button></li>
</ul>
<div class="s-navigation" role="tablist" data-controller="s-navigation-tablist">
<button type="button" role="tab" id="tab-1" aria-selected="true" aria-controls="panel-1" class="s-navigation--item is-selected">Task</button>
<button type="button" role="tab" id="tab-2" aria-selected="false" aria-controls="panel-2" tabindex="-1" class="s-navigation--item">Answers</button>
<button type="button" role="tab" id="tab-3" aria-selected="false" aria-controls="panel-3" tabindex="-1" class="s-navigation--item">Duplicate A</button>
<button type="button" role="tab" id="tab-4" aria-selected="false" aria-controls="panel-4" tabindex="-1" class="s-navigation--item">Duplicate B</button>
</div>
</nav>

<div id="panel-1" aria-labelledby="tab-1">
Expand Down
8 changes: 4 additions & 4 deletions docs/product/components/page-titles.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ <h1 class="s-page-title--header">Page title</h1>
{% endhighlight %}
<section class="stacks-preview--example">
<div class="s-page-title">
<h1 class="s-page-title--header">Page title</h1>
<h1 class="s-page-title--header" role="presentation">Page title</h1>
</div>
</section>
</div>
Expand All @@ -70,7 +70,7 @@ <h1 class="s-page-title--header">Page title</h1>
<section class="stacks-preview--example">
<div class="s-page-title">
<div class="s-page-title--text">
<h1 class="s-page-title--header">Page title</h1>
<h1 class="s-page-title--header" role="presentation">Page title</h1>
<p class="s-page-title--description">Optional description de Finibus Bonorum et Malorum with an <a href="#">optional link</a>.</p>
</div>
</div>
Expand All @@ -93,7 +93,7 @@ <h1 class="s-page-title--header">Page title</h1>
<section class="stacks-preview--example">
<div class="s-page-title">
<div class="s-page-title--text">
<h1 class="s-page-title--header">Page title</h1>
<h1 class="s-page-title--header" role="presentation">Page title</h1>
<p class="s-page-title--description">Optional description de Finibus Bonorum et Malorum with an <a href="#">optional link</a>.</p>
</div>
<div class="s-page-title--actions">
Expand Down Expand Up @@ -135,7 +135,7 @@ <h1 class="s-page-title--header">Page title</h1>
<a class="s-breadcrumbs--link">…</a>
</div>
</nav>
<h1 class="s-page-title--header">Page title</h1>
<h1 class="s-page-title--header" role="presentation">Page title</h1>
<p class="s-page-title--description">Optional description de Finibus Bonorum et Malorum with an <a>optional link</a>.</p>
</div>
</div>
Expand Down
Loading

0 comments on commit 0663d27

Please sign in to comment.