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

Jump to bottom

For publication / deploy on Thursday September 12, 2024 #350

Merged
merged 4 commits into from
Sep 12, 2024
Merged

For publication / deploy on Thursday September 12, 2024 #350

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7ec2211
Commit changes
daniel-montalvo Aug 27, 2024
2be49b8
Commit changes
daniel-montalvo Sep 12, 2024
d007b42
Commit changes
daniel-montalvo Sep 12, 2024
8053d59
Commit changes
daniel-montalvo Sep 12, 2024
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
46 changes: 39 additions & 7 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: July 23, 2024</p>
<p>Page last updated: September 12, 2024</p>
<section>
<h2>About These Reports</h2>
<p>
Expand Down Expand Up @@ -699,6 +699,7 @@ 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 @@ -719,6 +720,7 @@ 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 @@ -729,6 +731,7 @@ 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 @@ -945,6 +948,7 @@ 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 @@ -1115,6 +1119,7 @@ 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 @@ -1226,6 +1231,7 @@ 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 @@ -1324,23 +1330,23 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
<tbody>
<tr>
<th scope="row">Total Examples</th>
<td id="example_summary_total">60</td>
<td id="example_summary_total">61</td>
</tr>
<tr>
<th scope="row">High Contrast Documentation</th>
<td id="example_summary_hc">31</td>
<td id="example_summary_hc">32</td>
</tr>
<tr>
<th scope="row">Uses SVG</th>
<td id="example_summary_svg">34</td>
<td id="example_summary_svg">35</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">27</td>
<td id="example_summary_current_color">28</td>
</tr>

<tr>
Expand All @@ -1353,15 +1359,15 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
</tr>
<tr>
<th scope="row">Use Class</th>
<td id="example_summary_class">36</td>
<td id="example_summary_class">37</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">15</td>
<td id="example_summary_mouse">16</td>
</tr>
<tr>
<th scope="row">Pointer Events</th>
Expand Down Expand Up @@ -2064,6 +2070,19 @@ 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 @@ -2487,6 +2506,14 @@ 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 @@ -2633,6 +2660,11 @@ 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: 7 additions & 2 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,7 +950,12 @@ 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 + 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</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>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/w3c/aria-practices/projects/8'>View issues related to this example</a></p> <p>Page last updated: 27 July 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: 12 September 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 + Tab</kbd></th>
<th><kbd>Shift</kbd> + <kbd>Tab</kbd></th>
<td>
<ul>
<li>Moves focus to the previous focusable element.</li>
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/w3c/aria-practices/projects/20'>View issues related to this example</a></p> <p>Page last updated: 27 July 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: 12 September 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 + Tab</kbd></th>
<th><kbd>Shift</kbd> + <kbd>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 + S</kbd></th>
<th><kbd>Command</kbd> + <kbd>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 + S</kbd></th>
<th><kbd>Control</kbd> + <kbd>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/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 + 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.
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.
</li>
</ul>
</li>
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 + 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</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>
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
8 changes: 4 additions & 4 deletions ARIA/apg/patterns/combobox/combobox-pattern.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -191,9 +191,9 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
</ul>
</li>
<li>If the combobox is editable, it supports standard single line text editing keys appropriate for the device platform (see note below).</li>
<li><kbd>Alt + Down Arrow</kbd> (Optional): If the popup is available but not displayed, displays the popup without moving focus.</li>
<li><kbd>Alt</kbd> + <kbd>Down Arrow</kbd> (Optional): If the popup is available but not displayed, displays the popup without moving focus.</li>
<li>
<kbd>Alt + Up Arrow</kbd> (Optional): If the popup is displayed:
<kbd>Alt</kbd> + <kbd>Up Arrow</kbd> (Optional): If the popup is displayed:
<ul>
<li>If the popup contains focus, returns focus to the combobox.</li>
<li>Closes the popup.</li>
Expand Down Expand Up @@ -313,8 +313,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
<li>If the combobox is editable, returns focus to the combobox and places the cursor after the last character.</li>
</ul>
</li>
<li><kbd>Control + Home</kbd> (optional): moves focus to the first row.</li>
<li><kbd>Control + End</kbd> (Optional): moves focus to the last row.</li>
<li><kbd>Control</kbd> + <kbd>Home</kbd> (optional): moves focus to the first row.</li>
<li><kbd>Control</kbd> + <kbd>End</kbd> (Optional): moves focus to the last row.</li>
<li>Any printable character: If the combobox is editable, returns the focus to the combobox without closing the popup and types the character.</li>
<li><kbd>Backspace</kbd> (Optional): If the combobox is editable, returns focus to the combobox and deletes the character prior to the cursor.</li>
<li><kbd>Delete</kbd> (Optional): If the combobox is editable, returns focus to the combobox, removes the selected state if a suggestion was selected, and removes the inline autocomplete string if present.</li>
Expand Down
Loading
Loading