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

Add carousel pattern #957

Merged
merged 15 commits into from
Jan 15, 2019
Merged

Add carousel pattern #957

Changes from 1 commit
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
e185d24
Carousel Pattern: draft 1 based on draft from Jon Gunderson
mcking65 Dec 12, 2018
5a0a681
Complete first draft of pattern description
mcking65 Dec 12, 2018
6cf4a4b
Revise keyboard interaction.
mcking65 Dec 13, 2018
f2c06f5
partial draft of roles, states, and props
mcking65 Dec 14, 2018
c473dc8
another draft of carousel roles, states, and props
mcking65 Dec 16, 2018
114d39d
another carousel props draft
mcking65 Dec 16, 2018
484bb8c
Another draft of props section of carousel
mcking65 Dec 16, 2018
e6e7f4d
Complete draft of carousel props section
mcking65 Dec 16, 2018
a33bcf2
minor carousel pattern edit
mcking65 Dec 16, 2018
c81e8b3
Changes from meeting feedback
mcking65 Dec 18, 2018
8856024
Fixes in response to review comments from @charmarkk
mcking65 Dec 18, 2018
60248e5
Add slide show to section title
mcking65 Dec 18, 2018
ee6154e
Revise description based on feedback from @jongund in issue #43.
mcking65 Dec 18, 2018
30e3806
Add guidance about rotation control position per feedback from @jongu…
mcking65 Dec 18, 2018
6f2f95e
Fix typo found by @annabbott in review.
mcking65 Jan 15, 2019
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
Prev Previous commit
Next Next commit
another draft of carousel roles, states, and props
  • Loading branch information
@mcking65
mcking65 committed Dec 16, 2018
commit c473dc85d29e90113113fdd5e08335756f1657a4
47 changes: 29 additions & 18 deletions aria-practices.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -542,6 +542,13 @@ <h4>Keyboard Interaction</h4>

<section class="notoc">
<h4>WAI-ARIA Roles, States, and Properties</h4>
<p>This section describes the element composition for three styles of carousels:</p>
<ul>
<li>Basic: Has rotation , previous slide, and next slide controls but no slide selection controls.</li>
<li>Tabbed: Has basic controls plus a single tab stop for slide selection controls implemented using the tabs pattern.</li>
<li>Grouped: Has basic controls plus a group of tab stops for slide selection controls implemented using the button pattern. Because each slide adds an element to the page tab sequence, this is the least friendly style for keyboard users.</li>
</ul>
<h5>Basic carousel elements</h5>
<ul>
<li>
A carousel container element that encompasses all components of the carousel, including both carousel controls and slides,
Expand All @@ -568,28 +575,32 @@ <h4>WAI-ARIA Roles, States, and Properties</h4>
A label that changes when the button is activated clearly communicates both that slide content can change automatically and when it is doing so.
Note that since the label changes, the rotation control does not have any states, e.g., <code>aria-pressed</code>, specified.
</li>
<li>Each slide container has role <a href="#group" class="role-reference">group</a> with the property <a href="aria-roledescription" class="property-reference">aria-roledescription</a> set to <code>slide</code>.</li>
</ul>
<h5>Tabbed Carousel Elements</h5>
<p>The structure of a tabbed carousel is the same as a basic carousel except that:</p>
<ul>
<li>
If slide selection controls are present and are implemented as <a href="#tab" class="role-reference">tab</a> elements,
each slide container has the role <a href="#tabpanel" class="role-reference">tabpanel</a>.
Otherwise, each slide container has the role <a href="#group" class="role-reference">group</a>
and the property <a href="aria-roledescription" class="property-reference">aria-roledescription</a> set to <code>slide</code>.
Each slide container has role
<a href="#tabpanel" class="role-reference">tabpanel</a>
and it does not have the <code>aria-roledescription</code> property.
</li>
<li>If slide selection controls are included, they are either:
<ul>
<li>
<strong>(Recommended)</strong> Implemented using the <a href="#tabpanel">tabs pattern</a> where each control is a <code>tab</code> element and the set of controls is grouped in a <code>tablist</code> element.
See the <a href="#tabpanel">tabs pattern</a> for the complete list of implementation details.
</li>
<li>Implemented as a group of buttons where:
<ul>
<li>The set of controls is contained in an element with role group and has a label.</li>
<li>Each selection control is a native button or implements the button pattern.</li>
<li>The button representing the currently display slide has aria-disabled.</li>
</ul>
</li>
</ul>
<li>
It has slide selection controls implemented using the
<a href="#tabpanel">tabs pattern</a>
where each control is a <code>tab</code> element and the set of controls is grouped in a <code>tablist</code>
element. See the
<a href="#tabpanel">tabs pattern</a>
for the complete list of implementation details.
</li>
</ul>
<h5>Grouped Carousel</h5>
<p>A grouped carousel has the same structure as a basic carousel, but it also includes slide selection controls where:</p>
<ul>
<li>The set of controls is contained in an element with role group and has a label.</li>
<li>Each selection control is a native button or implements the button pattern.</li>
<li>The button representing the currently display slide has aria-disabled.</li>
</ul>
</section>
</section>

Expand Down