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

apg/fix/multi-slider-focus-glitch generated by aria-practices #381

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

apg/fix/multi-slider-focus-glitch generated by aria-practices #381

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
6 changes: 1 addition & 5 deletions ARIA/apg/about/acknowledgements/acknowledgements.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,14 +79,10 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
<span class="p-name fn">Zoë Bijl</span> (<span class="p-org org h-org">Invited Expert</span>)
</dd>
<dd class="editor p-author h-card vcard" data-editor-id="34017">
<a class="u-url url p-name fn" href="https://www.w3.org/staff/#dmontalvo">Daniel Montalvo</a>
<a class="u-url url p-name fn" href="https://www.w3.org/People/cooper/">Michael Cooper</a>
(<span class="p-org org h-org">W3C</span>)
</dd>
<dt>Former editors:</dt>
<dd class="editor p-author h-card vcard" data-editor-id="34017">
<span class="p-name fn">Michael Cooper</span> (<span class="p-org org h-org">W3C</span>) - Until
<time datetime="2023-07-31">31 July 2023</time>
</dd>
<dd class="editor p-author h-card vcard" data-editor-id="42279">
<span class="p-name fn">Joseph Scheuhammer</span> (<span class="p-org org h-org">Inclusive Design
Research Centre, OCAD University</span>) - Until
Expand Down
46 changes: 7 additions & 39 deletions ARIA/apg/about/coverage-and-quality/coverage-and-quality-report.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');

<div>

<p>Page last updated: September 12, 2024</p>
<p>Page last updated: July 23, 2024</p>
<section>
<h2>About These Reports</h2>
<p>
Expand Down Expand Up @@ -699,7 +699,6 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
</td>
<td><ul>
<li><a href="../../patterns/carousel/examples/carousel-2-tablist/">Auto-Rotating Image Carousel with Tabs for Slide Control</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
<li><a href="../../patterns/tabs/examples/tabs-actions/">Experimental Tabs with Action Buttons</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
<li><a href="../../patterns/tabs/examples/tabs-automatic/">Tabs with Automatic Activation</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
<li><a href="../../patterns/tabs/examples/tabs-manual/">Tabs with Manual Activation</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
</ul>
Expand All @@ -720,7 +719,6 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
<td></td>
<td><ul>
<li><a href="../../patterns/carousel/examples/carousel-2-tablist/">Auto-Rotating Image Carousel with Tabs for Slide Control</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
<li><a href="../../patterns/tabs/examples/tabs-actions/">Experimental Tabs with Action Buttons</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
<li><a href="../../patterns/tabs/examples/tabs-automatic/">Tabs with Automatic Activation</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
<li><a href="../../patterns/tabs/examples/tabs-manual/">Tabs with Manual Activation</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
</ul>
Expand All @@ -731,7 +729,6 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
<td></td>
<td><ul>
<li><a href="../../patterns/carousel/examples/carousel-2-tablist/">Auto-Rotating Image Carousel with Tabs for Slide Control</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
<li><a href="../../patterns/tabs/examples/tabs-actions/">Experimental Tabs with Action Buttons</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
<li><a href="../../patterns/tabs/examples/tabs-automatic/">Tabs with Automatic Activation</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
<li><a href="../../patterns/tabs/examples/tabs-manual/">Tabs with Manual Activation</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
</ul>
Expand Down Expand Up @@ -948,7 +945,6 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
<li><a href="../../patterns/menu-button/examples/menu-button-actions-active-descendant/">Actions Menu Button Using aria-activedescendant</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
<li><a href="../../patterns/menu-button/examples/menu-button-actions/">Actions Menu Button Using element.focus()</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
<li><a href="../../patterns/menu-button/examples/menu-button-links/">Navigation Menu Button</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
<li><a href="../../patterns/tabs/examples/tabs-actions/">Experimental Tabs with Action Buttons</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
<li><a href="../../patterns/tabs/examples/tabs-automatic/">Tabs with Automatic Activation</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
<li><a href="../../patterns/tabs/examples/tabs-manual/">Tabs with Manual Activation</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
<li><a href="../../patterns/toolbar/examples/toolbar/">Toolbar</a></li>
Expand Down Expand Up @@ -1119,7 +1115,6 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
<li><a href="../../patterns/slider/examples/slider-temperature/">Vertical Temperature Slider</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
<li><a href="../../patterns/spinbutton/examples/datepicker-spinbuttons/">Date Picker Spin Button</a></li>
<li><a href="../../patterns/switch/examples/switch-button/">Switch Using HTML Button</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
<li><a href="../../patterns/tabs/examples/tabs-actions/">Experimental Tabs with Action Buttons</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
<li><a href="../../patterns/tabs/examples/tabs-automatic/">Tabs with Automatic Activation</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
<li><a href="../../patterns/tabs/examples/tabs-manual/">Tabs with Manual Activation</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
<li><a href="../../patterns/treeview/examples/treeview-1a/">File Directory Treeview Using Computed Properties</a></li>
Expand Down Expand Up @@ -1231,7 +1226,6 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
<li><a href="../../patterns/listbox/examples/listbox-grouped/">Listbox with Grouped Options</a></li>
<li><a href="../../patterns/listbox/examples/listbox-rearrangeable/">Listboxes with Rearrangeable Options</a></li>
<li><a href="../../patterns/listbox/examples/listbox-scrollable/">Scrollable Listbox</a></li>
<li><a href="../../patterns/tabs/examples/tabs-actions/">Experimental Tabs with Action Buttons</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
<li><a href="../../patterns/tabs/examples/tabs-automatic/">Tabs with Automatic Activation</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
<li><a href="../../patterns/tabs/examples/tabs-manual/">Tabs with Manual Activation</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
<li><a href="../../patterns/treeview/examples/treeview-1a/">File Directory Treeview Using Computed Properties</a></li>
Expand Down Expand Up @@ -1330,23 +1324,23 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
<tbody>
<tr>
<th scope="row">Total Examples</th>
<td id="example_summary_total">61</td>
<td id="example_summary_total">60</td>
</tr>
<tr>
<th scope="row">High Contrast Documentation</th>
<td id="example_summary_hc">32</td>
<td id="example_summary_hc">31</td>
</tr>
<tr>
<th scope="row">Uses SVG</th>
<td id="example_summary_svg">35</td>
<td id="example_summary_svg">34</td>
</tr>
<tr>
<th scope="row">Uses <code>forced-colors</code> media query</th>
<td id="example_summary_force_colors">2</td>
</tr>
<tr>
<th scope="row">Uses <code>currentColor</code> value</th>
<td id="example_summary_current_color">28</td>
<td id="example_summary_current_color">27</td>
</tr>

<tr>
Expand All @@ -1359,15 +1353,15 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
</tr>
<tr>
<th scope="row">Use Class</th>
<td id="example_summary_class">37</td>
<td id="example_summary_class">36</td>
</tr>
<tr>
<th scope="row">Use Prototype</th>
<td id="example_summary_prototype">22</td>
</tr>
<tr>
<th scope="row">Mouse Events</th>
<td id="example_summary_mouse">16</td>
<td id="example_summary_mouse">15</td>
</tr>
<tr>
<th scope="row">Pointer Events</th>
Expand Down Expand Up @@ -2070,19 +2064,6 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
<td>2</td>
<td></td>
</tr>
<tr>
<td><a href="../../patterns/tabs/examples/tabs-actions/">Experimental Tabs with Action Buttons</a></td>
<td>class</td>
<td></td>
<td></td>
<td>Yes</td>
<td>ex1</td>
<td>5</td>
<td>3</td>
<td>7</td>
<td>3</td>
<td>menu,menuitem,aria-expanded,aria-haspopup,aria-hidden,aria-label</td>
</tr>
<tr>
<td><a href="../../patterns/tabs/examples/tabs-automatic/">Tabs with Automatic Activation</a></td>
<td>class</td>
Expand Down Expand Up @@ -2506,14 +2487,6 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
<td></td>
<td>Yes</td>
</tr>
<tr>
<td><a href="../../patterns/tabs/examples/tabs-actions/">Experimental Tabs with Action Buttons</a></td>
<td>Yes</td>
<td>Yes</td>
<td></td>
<td></td>
<td>Yes</td>
</tr>
<tr>
<td><a href="../../patterns/toolbar/examples/toolbar/">Toolbar</a></td>
<td>Yes</td>
Expand Down Expand Up @@ -2660,11 +2633,6 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
<td></td>
<td>Yes</td>
</tr>
<tr>
<td><a href="../../patterns/tabs/examples/tabs-actions/">Experimental Tabs with Action Buttons</a></td>
<td>Yes</td>
<td></td>
</tr>
<tr>
<td><a href="../../patterns/toolbar/examples/toolbar/">Toolbar</a></td>
<td>Yes</td>
Expand Down
9 changes: 2 additions & 7 deletions ARIA/apg/index/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
<ul>
<li><a href="#examples_by_role_label">Examples by Role</a></li>
<li><a href="#examples_by_props_label">Examples by Properties and States</a></li>
<li><a href="#examples_experimental_label">Experimental Examples</a></li>

</ul>
<section id="examples_by_roles">
<h2 id="examples_by_role_label">Examples by Role</h2>
Expand Down Expand Up @@ -950,12 +950,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
</tr></tbody>
</table>
</section>
<section id="examples_experimental">
<h2 id="examples_experimental_label">Experimental Examples</h2>
<div><strong>NOTE:</strong> The HC abbreviation means example has High Contrast support.</div>
<ul id="examples_experimental_ul">
<li><a href="../patterns/tabs/examples/tabs-actions/">Experimental Tabs with Action Buttons</a> (<abbr title="High Contrast Support">HC</abbr>)</li></ul>
</section>

</div>


Expand Down
2 changes: 1 addition & 1 deletion ARIA/apg/patterns/accordion/accordion-pattern.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
</ul>
</li>
<li><kbd>Tab</kbd>: Moves focus to the next focusable element; all focusable elements in the accordion are included in the page <kbd>Tab</kbd> sequence.</li>
<li><kbd>Shift</kbd> + <kbd>Tab</kbd>: Moves focus to the previous focusable element; all focusable elements in the accordion are included in the page <kbd>Tab</kbd> sequence.</li>
<li><kbd>Shift + Tab</kbd>: Moves focus to the previous focusable element; all focusable elements in the accordion are included in the page <kbd>Tab</kbd> sequence.</li>
<li>
<kbd>Down Arrow</kbd> (Optional): If focus is on an accordion header, moves focus to the next accordion header.
If focus is on the last accordion header, either does nothing or moves focus to the first accordion header.
Expand Down
4 changes: 2 additions & 2 deletions ARIA/apg/patterns/accordion/examples/accordion.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/accordion/examples/accordion/

sidebar: true

footer: " <div class='example-page-footer'> <p><a href='https://github.com/orgs/w3c/projects/127'>View issues related to this example</a></p> <p>Page last updated: 22 October 2024</p> </div> "
footer: " <div class='example-page-footer'> <p><a href='https://github.com/w3c/aria-practices/projects/8'>View issues related to this example</a></p> <p>Page last updated: 27 July 2024</p> </div> "

# Context here: https://github.com/w3c/wai-aria-practices/issues/31
type_of_guidance: APG
Expand Down Expand Up @@ -238,7 +238,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
</td>
</tr>
<tr data-test-id="key-shift-tab">
<th><kbd>Shift</kbd> + <kbd>Tab</kbd></th>
<th><kbd>Shift + Tab</kbd></th>
<td>
<ul>
<li>Moves focus to the previous focusable element.</li>
Expand Down
2 changes: 1 addition & 1 deletion ARIA/apg/patterns/alert/examples/alert.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/alert/examples/alert/

sidebar: true

footer: " <div class='example-page-footer'> <p><a href='https://github.com/orgs/w3c/projects/138'>View issues related to this example</a></p> <p>Page last updated: 22 October 2024</p> </div> "
footer: " <div class='example-page-footer'> <p><a href='https://github.com/w3c/aria-practices/projects/20'>View issues related to this example</a></p> <p>Page last updated: 27 July 2024</p> </div> "

# Context here: https://github.com/w3c/wai-aria-practices/issues/31
type_of_guidance: APG
Expand Down
8 changes: 4 additions & 4 deletions ARIA/apg/patterns/alertdialog/examples/alertdialog.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/alertdialog/examples/alertdialog/

sidebar: true

footer: " <div class='example-page-footer'> <p><a href='https://github.com/orgs/w3c/projects/138'>View issues related to this example</a></p> <p>Page last updated: 22 October 2024</p> </div> "
footer: " <div class='example-page-footer'> <p><a href='https://github.com/w3c/aria-practices/projects/20'>View issues related to this example</a></p> <p>Page last updated: 27 July 2024</p> </div> "

# Context here: https://github.com/w3c/wai-aria-practices/issues/31
type_of_guidance: APG
Expand Down Expand Up @@ -197,7 +197,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
</td>
</tr>
<tr>
<th><kbd>Shift</kbd> + <kbd>Tab</kbd></th>
<th><kbd>Shift + Tab</kbd></th>
<td>
<ul>
<li>Moves focus to previous focusable element inside the dialog.</li>
Expand All @@ -210,11 +210,11 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
<td>Closes the dialog.</td>
</tr>
<tr>
<th><kbd>Command</kbd> + <kbd>S</kbd></th>
<th><kbd>Command + S</kbd></th>
<td>(Mac only) Save the contents of the notes <code>textarea</code> when focused.</td>
</tr>
<tr data-test-id="key-control-s">
<th><kbd>Control</kbd> + <kbd>S</kbd></th>
<th><kbd>Control + S</kbd></th>
<td>(Windows only) Save the contents of the notes <code>textarea</code> when focused.</td>
</tr>
</tbody>
Expand Down
2 changes: 1 addition & 1 deletion ARIA/apg/patterns/breadcrumb/examples/breadcrumb.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/breadcrumb/examples/breadcrumb/

sidebar: true

footer: " <div class='example-page-footer'> <p><a href='https://github.com/orgs/w3c/projects/137'>View issues related to this example</a></p> <p>Page last updated: 22 October 2024</p> </div> "
footer: " <div class='example-page-footer'> <p><a href='https://github.com/w3c/aria-practices/projects/21'>View issues related to this example</a></p> <p>Page last updated: 27 July 2024</p> </div> "

# Context here: https://github.com/w3c/wai-aria-practices/issues/31
type_of_guidance: APG
Expand Down
2 changes: 1 addition & 1 deletion ARIA/apg/patterns/button/button-pattern.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
<li>If the button action indicates a context change, such as move to next step in a wizard or add another search criteria, then it is often appropriate to move focus to the starting point for that action.</li>
<li>
If the button is activated with a shortcut key, the focus usually remains in the context from which the shortcut key was activated.
For example, if <kbd>Alt</kbd> + <kbd>U</kbd> were assigned to an &quot;Up&quot; button that moves the currently focused item in a list one position higher in the list, pressing <kbd>Alt</kbd> + <kbd>U</kbd> when the focus is in the list would not move the focus from the list.
For example, if <kbd>Alt + U</kbd> were assigned to an &quot;Up&quot; button that moves the currently focused item in a list one position higher in the list, pressing <kbd>Alt + U</kbd> when the focus is in the list would not move the focus from the list.
</li>
</ul>
</li>
Expand Down
2 changes: 1 addition & 1 deletion ARIA/apg/patterns/button/examples/button.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/button/examples/button/

sidebar: true

footer: " <div class='example-page-footer'> <p><a href='https://github.com/orgs/w3c/projects/132'>View issues related to this example</a></p> <p>Page last updated: 22 October 2024</p> </div> "
footer: " <div class='example-page-footer'> <p><a href='https://github.com/w3c/aria-practices/projects/14'>View issues related to this example</a></p> <p>Page last updated: 27 July 2024</p> </div> "

# Context here: https://github.com/w3c/wai-aria-practices/issues/31
type_of_guidance: APG
Expand Down
2 changes: 1 addition & 1 deletion ARIA/apg/patterns/button/examples/button_idl.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/button/examples/button_idl/

sidebar: true

footer: " <div class='example-page-footer'> <p><a href='https://github.com/orgs/w3c/projects/132'>View issues related to this example</a></p> <p>Page last updated: 22 October 2024</p> </div> "
footer: " <div class='example-page-footer'> <p><a href='https://github.com/w3c/aria-practices/projects/14'>View issues related to this example</a></p> <p>Page last updated: 27 July 2024</p> </div> "

# Context here: https://github.com/w3c/wai-aria-practices/issues/31
type_of_guidance: APG
Expand Down
2 changes: 1 addition & 1 deletion ARIA/apg/patterns/carousel/carousel-pattern.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
If the carousel has an auto-rotate feature, automatic slide rotation stops when any element in the carousel receives keyboard focus.
It does not resume unless the user activates the rotation control.
</li>
<li><kbd>Tab</kbd> and <kbd>Shift</kbd> + <kbd>Tab</kbd>: Move focus through the interactive elements of the carousel as specified by the page tab sequence -- scripting for <kbd>Tab</kbd> is not necessary.</li>
<li><kbd>Tab</kbd> and <kbd>Shift + Tab</kbd>: Move focus through the interactive elements of the carousel as specified by the page tab sequence -- scripting for <kbd>Tab</kbd> is not necessary.</li>
<li>
Button elements implement the keyboard interaction defined in the <a href="../button/">button pattern</a>.
Note: Activating the rotation control, next slide, and previous slide do not move focus, so users may easily repetitively activate them as many times as desired.
Expand Down
Loading