Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs(button-group): document aria-current attribute usage #1066

Merged
merged 2 commits into from
Aug 24, 2022
Merged

docs(button-group): document aria-current attribute usage #1066

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a3f5165
docs(button-group): document aria-current attribute usage
dancormier Aug 16, 2022
bff3286
docs(button-group): fix and update script
dancormier Aug 16, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 40 additions & 9 deletions docs/product/components/button-groups.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
layout: page
title: Button groups
figma: https://www.figma.com/file/9p5HuZwl9KXP9HpBZuvBoT/Button-Groups
description: Button groups are a collection of buttons. This component is used in our questions view, and is frequently used in conjunction with other form elements such as search fields and sorting dropdowns. If the content you’re interacting with is a simple paring down or filter of the current view, it’s appropriate to use the <code class="stacks-code">.s-btn-group</code> component. Add the class <code class="stacks-code">.is-selected</code> to show the currently-selected button.
description: Button groups are a collection of buttons. This component is used in our questions view, and is frequently used in conjunction with other form elements such as search fields and sorting dropdowns. If the content you’re interacting with is a simple paring down or filter of the current view, it’s appropriate to use the <code class="stacks-code">.s-btn-group</code> component. Add the class <code class="stacks-code">.is-selected</code> and the <code class="stacks-code">aria-current</code> attribute with the <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current#values">appropriate value</a> to show the currently selected button.
---
<section class="stacks-section">
{% header "h2", "Classes" %}
Expand All @@ -28,6 +28,33 @@
</div>
</section>


{% header "h2", "Accessibility" %}
<p class="stacks-copy">
When used as navigation or a filter, button groups should include the <code class="stacks-code">aria-label</code> attribute with the <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current#values"></a>appropriate value</a>.
</p>

<section class="stacks-section">
<div class="overflow-x-auto mb32" tabindex="0">
<table class="wmn4 s-table s-table__bx-simple">
<thead>
<tr>
<th scope="col" class="s-table--cell3">Item</th>
<th scope="col" class="s-table--cell3">Applied to</th>
<th scope="col">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code class="stacks-code">aria-current="[value]"</code></td>
<td><code class="stacks-code">.s-btn.is-selected</code></td>
<td>When using a button group for navigation or filtering, include the <code class="stacks-code">aria-current</code> attribute with the <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current#values">appropriate value</a> to the selected button. Most commonly used values are <code class="stacks-code">page</code>, <code class="stacks-code">step</code>, and <code class="stacks-code">true</code>.</td>
</tr>
</tbody>
</table>
</div>
</section>

<section class="stacks-section">
{% header "h2", "Example" %}
<div class="stacks-preview">
Expand All @@ -36,7 +63,7 @@
<button class="s-btn s-btn__muted s-btn__outlined" role="button">Newest</button>
<button class="s-btn s-btn__muted s-btn__outlined" role="button">Frequent</button>
<form class="s-btn-group--container">
<button class="s-btn s-btn__muted s-btn__outlined is-selected" role="button">Votes</button>
<button class="s-btn s-btn__muted s-btn__outlined is-selected" role="button" aria-current="true">Votes</button>
</form>
<button class="s-btn s-btn__muted s-btn__outlined" role="button">Active</button>
<form class="s-btn-group--container">
Expand All @@ -49,7 +76,7 @@
<button class="s-btn s-btn__muted s-btn__outlined js-btn-group-item" role="button">Newest</button>
<button class="s-btn s-btn__muted s-btn__outlined js-btn-group-item" role="button">Frequent</button>
<form class="s-btn-group--container">
<button class="s-btn s-btn__muted s-btn__outlined is-selected js-btn-group-item" role="button">Votes</button>
<button class="s-btn s-btn__muted s-btn__outlined is-selected js-btn-group-item" role="button" aria-current="true">Votes</button>
</form>
<button class="s-btn s-btn__muted s-btn__outlined js-btn-group-item" role="button">Active</button>
<form class="s-btn-group--container">
Expand Down Expand Up @@ -80,7 +107,7 @@
<span class="s-btn--number">37</span>
</span>
</button>
<button class="s-btn s-btn__muted s-btn__outlined is-selected" role="button">
<button class="s-btn s-btn__muted s-btn__outlined is-selected" role="button" aria-current="true">
All
<span class="s-btn--badge">
<span class="s-btn--number">234</span>
Expand Down Expand Up @@ -113,14 +140,18 @@
</div>
</section>

<!-- Page specific javascript -->
<script>
$(function() {
$(".js-btn-group-item").on("click", function(e) {
document.querySelectorAll('.js-btn-group-item').forEach(buttonGroup => {
buttonGroup.addEventListener('click', e => {
e.preventDefault();
e.stopPropagation();
$(".js-btn-group").find(".js-btn-group-item").removeClass("is-selected");
$(this).addClass("is-selected");
const btns = buttonGroup.closest('.s-btn-group').querySelectorAll('.js-btn-group-item');
btns.forEach(btn => {
btn.classList.remove('is-selected');
btn.removeAttribute('aria-current');
});
buttonGroup.classList.add('is-selected');
buttonGroup.setAttribute('aria-current', 'true');
});
});
</script>