Skip to content

Update button and input button allowances #446

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

Merged
merged 14 commits into from
Jul 5, 2023
Merged

Update button and input button allowances #446

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
52be13a
Update button and input button allowances
scottaohara Feb 6, 2023
3ab4559
Merge branch 'gh-pages' into button-inputbutton-allowances
scottaohara Feb 6, 2023
d8a3c14
Merge branch 'gh-pages' into button-inputbutton-allowances
scottaohara Feb 13, 2023
a20db48
Merge branch 'gh-pages' into button-inputbutton-allowances
scottaohara Feb 15, 2023
e7be8ca
add missing slider allowance for input type=image
scottaohara Feb 15, 2023
dcf7215
Merge branch 'gh-pages' into button-inputbutton-allowances
scottaohara Feb 15, 2023
a0044c4
Merge branch 'gh-pages' into button-inputbutton-allowances
scottaohara Feb 15, 2023
c68f557
Merge branch 'gh-pages' into button-inputbutton-allowances
scottaohara Mar 16, 2023
96ff722
Merge branch 'gh-pages' into button-inputbutton-allowances
scottaohara Apr 24, 2023
0d11f13
Merge branch 'gh-pages' into button-inputbutton-allowances
scottaohara May 15, 2023
f92291e
Merge branch 'gh-pages' into button-inputbutton-allowances
scottaohara May 31, 2023
0892f34
Merge branch 'gh-pages' into button-inputbutton-allowances
scottaohara Jun 29, 2023
17a628a
add changelog
scottaohara Jul 5, 2023
b492937
Update input-image-reset-submit.html
scottaohara Jul 5, 2023
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
124 changes: 92 additions & 32 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,9 +64,14 @@
the following substantive additions and/or corrections have been proposed:
</p>
<ul>
<li>
<a href="https://github.com/w3c/html-aria/pull/469">5 July 2023 - Addition:</a>
Update the <a href="#el-button">`button`</a>, <a href="#el-input-button">`input type=button`</a>, <a href="#el-input-image">`input type=image`</a>
<a href="#el-input-reset">`input type=reset`</a>, and <a href="#el-input-submit">`input type=submit`</a> elements to align their allowed roles.
</li>
<li>
<a href="https://github.com/w3c/html-aria/pull/469">29 June 2023 - Addition:</a>
Update the <a href="#s">`s`</a> element allowed roles to indicate use of `role=deletion` on the element would be considered redundnat.
Update the <a href="#el-s">`s`</a> element allowed roles to indicate use of `role=deletion` on the element would be considered redundnat.
</li>
<li>
<a href="https://github.com/w3c/html-aria/pull/435">31 May 2023 - Correction:</a>
Expand Down Expand Up @@ -862,14 +867,18 @@ <h2 id="docconformance">
Roles:
<a href="#index-aria-checkbox">`checkbox`</a>,
<span class="addition"><a href="#index-aria-combobox">`combobox`</a></span>,
<span class="proposed addition"><a href="#index-aria-gridcell">`gridcell`</a></span>,
<a href="#index-aria-link">`link`</a>,
<a href="#index-aria-menuitem">`menuitem`</a>,
<a href="#index-aria-menuitemcheckbox">`menuitemcheckbox`</a>,
<a href="#index-aria-menuitemradio">`menuitemradio`</a>,
<a href="#index-aria-option">`option`</a>,
<a href="#index-aria-radio">`radio`</a>,
<a href="#index-aria-switch">`switch`</a>
or <a href="#index-aria-tab">`tab`</a>. (<code><a href="#index-aria-button">button</a></code> is also allowed, but NOT RECOMMENDED.)
<span class="proposed addition"><a href="#index-aria-slider">`slider`</a></span>,
<a href="#index-aria-switch">`switch`</a>,
<a href="#index-aria-tab">`tab`</a>,
or <span class="proposed addition"><a href="#index-aria-treeitem">`treeitem`</a></span>.
(<code><a href="#index-aria-button">button</a></code> is also allowed, but NOT RECOMMENDED.)
</p>
<p>
<a data-cite="wai-aria-1.2#global_states">Global `aria-*` attributes</a>
Expand Down Expand Up @@ -1633,14 +1642,18 @@ <h2 id="docconformance">
Roles:
<span class="correction"><a href="#index-aria-checkbox">`checkbox`</a>,</span>
<span class="addition"><a href="#index-aria-combobox">`combobox`</a>,</span>
<span class="proposed addition"><a href="#index-aria-gridcell">`gridcell`</a>,</span>
<a href="#index-aria-link">`link`</a>,
<a href="#index-aria-menuitem">`menuitem`</a>,
<a href="#index-aria-menuitemcheckbox">`menuitemcheckbox`</a>,
<a href="#index-aria-menuitemradio">`menuitemradio`</a>,
<a href="#index-aria-option">`option`</a>,
<a href="#index-aria-radio">`radio`</a>,
<a href="#index-aria-switch">`switch`</a>
or <a href="#index-aria-tab">`tab`</a>. (<code><a href="#index-aria-button">button</a></code> is also allowed, but NOT RECOMMENDED.)
<span class="proposed addition"><a href="#index-aria-slider">`slider`</a>,</span>
<a href="#index-aria-switch">`switch`</a>,
<a href="#index-aria-tab">`tab`</a>,
or <span class="addition proposed"><a href="#index-aria-treeitem">`treeitem`</a></span>.
(<code><a href="#index-aria-button">button</a></code> is also allowed, but NOT RECOMMENDED.)
</p>
<p>
<a data-cite="wai-aria-1.2#global_states">Global `aria-*` attributes</a>
Expand Down Expand Up @@ -1783,19 +1796,28 @@ <h2 id="docconformance">
<code>role=<a href="#index-aria-button">button</a></code>
</td>
<td>
<p>
Roles:
<a href="#index-aria-link">`link`</a>,
<a href="#index-aria-menuitem">`menuitem`</a>,
<a href="#index-aria-menuitemcheckbox">`menuitemcheckbox`</a>,
<a href="#index-aria-menuitemradio">`menuitemradio`</a>,
<a href="#index-aria-radio">`radio`</a>
or <a href="#index-aria-switch">`switch`</a>. (<code><a href="#index-aria-button">button</a></code> is also allowed, but NOT RECOMMENDED.)
</p>
<p>
<a data-cite="wai-aria-1.2#global_states">Global `aria-*` attributes</a>
and any `aria-*` attributes applicable to the allowed roles.
</p>
<div class="proposed addition">
<p>
Roles:
<a href="#index-aria-button">`button`</a>,
<a href="#index-aria-checkbox">`checkbox`</a>,
<a href="#index-aria-gridcell">`gridcell`</a>,
<a href="#index-aria-link">`link`</a>,
<a href="#index-aria-menuitem">`menuitem`</a>,
<a href="#index-aria-menuitemcheckbox">`menuitemcheckbox`</a>,
<a href="#index-aria-menuitemradio">`menuitemradio`</a>,
<a href="#index-aria-option">`option`</a>,
<a href="#index-aria-radio">`radio`</a>,
<a href="#index-aria-slider">`slider`</a>,
<a href="#index-aria-switch">`switch`</a>,
<a href="#index-aria-tab">`tab`</a>
or <a href="#index-aria-treeitem">`treeitem`</a>.
</p>
<p>
<a data-cite="wai-aria-1.2#global_states">Global `aria-*` attributes</a>
and any `aria-*` attributes applicable to the allowed roles.
</p>
</div>
</td>
</tr>
<tr>
Expand Down Expand Up @@ -1906,13 +1928,32 @@ <h2 id="docconformance">
<code>role=<a href="#index-aria-button">button</a></code>
</td>
<td>
<p>
<a><strong class="nosupport">No `role`</strong></a> other than <code><a href="#index-aria-button">button</a></code>, which is NOT RECOMMENDED.
</p>
<p>
<a data-cite="wai-aria-1.2#global_states">Global `aria-*` attributes</a>
and any `aria-*` attributes applicable to the `button` role.
</p>
<div class="proposed addition">
<p>
The following roles are allowed, but are NOT RECOMMENDED:
<a href="#index-aria-button">`button`</a>,
<a href="#index-aria-checkbox">`checkbox`</a>,
<a href="#index-aria-combobox">`combobox`</a>,
<a href="#index-aria-gridcell">`gridcell`</a>,
<a href="#index-aria-link">`link`</a>,
<a href="#index-aria-menuitem">`menuitem`</a>,
<a href="#index-aria-menuitemcheckbox">`menuitemcheckbox`</a>,
<a href="#index-aria-menuitemradio">`menuitemradio`</a>,
<a href="#index-aria-option">`option`</a>,
<a href="#index-aria-radio">`radio`</a>,
<a href="#index-aria-slider">`slider`</a>,
<a href="#index-aria-switch">`switch`</a>,
<a href="#index-aria-tab">`tab`</a>
or <a href="#index-aria-treeitem">`treeitem`</a>.
</p>
<p>
<a data-cite="wai-aria-1.2#global_states">Global `aria-*` attributes</a>
and any `aria-*` attributes applicable to the allowed roles.
</p>
<p>
If possible, authors SHOULD consider using a different HTML element which allows the specified role.
</p>
</div>
</td>
</tr>
<tr>
Expand Down Expand Up @@ -1941,13 +1982,32 @@ <h2 id="docconformance">
<code>role=<a href="#index-aria-button">button</a></code>
</td>
<td>
<p>
<a><strong class="nosupport">No `role`</strong></a> other than <code><a href="#index-aria-button">button</a></code>, which is NOT RECOMMENDED.
</p>
<p>
<a data-cite="wai-aria-1.2#global_states">Global `aria-*` attributes</a>
and any `aria-*` attributes applicable to the `button` role.
</p>
<div class="proposed addition">
<p>
The following roles are allowed, but are NOT RECOMMENDED:
<a href="#index-aria-button">`button`</a>,
<a href="#index-aria-checkbox">`checkbox`</a>,
<a href="#index-aria-combobox">`combobox`</a>,
<a href="#index-aria-gridcell">`gridcell`</a>,
<a href="#index-aria-link">`link`</a>,
<a href="#index-aria-menuitem">`menuitem`</a>,
<a href="#index-aria-menuitemcheckbox">`menuitemcheckbox`</a>,
<a href="#index-aria-menuitemradio">`menuitemradio`</a>,
<a href="#index-aria-option">`option`</a>,
<a href="#index-aria-radio">`radio`</a>,
<a href="#index-aria-slider">`slider`</a>,
<a href="#index-aria-switch">`switch`</a>,
<a href="#index-aria-tab">`tab`</a>
or <a href="#index-aria-treeitem">`treeitem`</a>.
</p>
<p>
<a data-cite="wai-aria-1.2#global_states">Global `aria-*` attributes</a>
and any `aria-*` attributes applicable to the allowed roles.
</p>
<p>
If possible, authors SHOULD consider using a different HTML element which allows the specified role.
</p>
</div>
</td>
</tr>
<tr>
Expand Down
4 changes: 2 additions & 2 deletions tests/input-image-reset-submit.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,10 +66,10 @@ <h3>
</h3>
<p>
Authors are allowed to use the roles
<code>button</code>, <code>checkbox</code>, <code>combobox</code>, <code>gridcell</code>, <code>link</code>, <code>menuitem</code>, <code>menuitemcheckbox</code>, <code>menuitemradio</code>, <code>option</code>, <code>radio</code>, <code>slider</code>, <code>switch</code>, <code>tab</code> or <code>treeitem</code> on a <code>input type=reset</code>, <code>input type=image</code> or <code>input type=submit</code> element, but their use is NOT RECOMMENDED.
<code>button</code>, <code>checkbox</code>, <code>combobox</code>, <code>gridcell</code>, <code>link</code>, <code>menuitem</code>, <code>menuitemcheckbox</code>, <code>menuitemradio</code>, <code>option</code>, <code>radio</code>, <code>slider</code>, <code>switch</code>, <code>tab</code> or <code>treeitem</code> on a <code>input type=reset</code>, <code>input type=image</code> or <code>input type=submit</code> element.
</p>
<p>
All allowed roles on the button element are now allowed on these elements as well. While there are far better elements to use as a base for these roles, and thus why it is 'not recommended' to specify these updated role allowances on these elements, if an author has no other choice and they end up using these elements to make an otherwise accessible custom widget, there is no reason to preclude their use as other automated and manual checks can call out potential accessibility gaps.
All allowed roles on the button element are now allowed on these elements as well. While there are far better elements to use as a base for these roles, if an author has no other choice and they end up using these elements to make an otherwise accessible custom widget, there is no reason to preclude their use as other automated and manual checks can call out potential accessibility gaps.
</p>
<div class="flex">
<div class="widgetDemo">
Expand Down