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

Update: add mapping tables for customizable select #2369

Draft
wants to merge 5 commits into
base: main
Choose a base branch
from
Draft

Update: add mapping tables for customizable select #2369

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
64faad1
Update: add mapping tables for customizable select
scottaohara Nov 1, 2024
2352593
adding TODO note for select's picker
scottaohara Nov 1, 2024
60f862f
Update html-aam/index.html
scottaohara Nov 1, 2024
c05f0e6
update mappings for button part of customizable select
scottaohara Nov 11, 2024
421f668
Update accessibility guidelines for `select` and `button` elements
scottaohara Feb 6, 2025
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
103 changes: 102 additions & 1 deletion html-aam/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1257,6 +1257,83 @@ <h4 id="el-button">`button`</h4>
</tr>
</tbody>
</table>

<h4 id="el-button-select-child">`button` as a child of a `select` element</h4>
<table aria-labelledby="el-button-select-child">
<tbody>
<tr>
<th>HTML Specification</th>
<td>
<a data-cite="HTML">`button`</a>
</td>
</tr>
<tr>
<th>[[wai-aria-1.2]]</th>
<td>
<div class="general">Not mapped. <a href="#el-button-select-child-comments">See comments</a>.</div>
<!-- a button that is a child of a select is not a typical "button" element.
it does not serve as a submit, reset, or generic 'button' type. Rather,
its purpose is directly tied to the rendering of a customized select
serving as the visible indicator/styleable node to serve as the
invoking element for the select's listbox popup.
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do you want to mention that the UA stylesheet applies interactivity: inert to this button, to ensure that this comment is true (modulo developer shenanigans)?

-->
</td>
</tr>
<tr>
<th><a data-cite="core-aam-1.2/#roleMappingComputedRole">Computed Role</a></th>
<td class="role-computed">
<div class="general">Not mapped. <a href="#el-button-select-child-comments">See comments</a>.</div>
</td>
</tr>
<tr>
<th>
<a href="https://msdn.microsoft.com/en-us/library/dd373608%28v=VS.85%29.aspx">MSAA</a> + <a href="http://accessibility.linuxfoundation.org/a11yspecs/ia2/docs/html/">IAccessible2</a>
</th>
<td>
<div class="general"><a href="#el-button-select-child-comments">See comments</a></div>
</td>
</tr>
<tr>
<th><a href="https://msdn.microsoft.com/en-us/library/ms726297%28v=VS.85%29.aspx">UIA</a></th>
<td>
<div class="general"><a href="#el-button-select-child-comments">See comments</a></div>
</td>
</tr>
<tr>
<th><a href="https://gnome.pages.gitlab.gnome.org/atk/">ATK</a></th>
<td>
<div class="general"><a href="#el-button-select-child-comments">See comments</a></div>
</td>
</tr>
<tr>
<th><a href="https://developer.apple.com/reference/appkit/nsaccessibility">AX</a></th>
<td>
<div class="general"><a href="#el-button-select-child-comments">See comments</a></div>
</td>
</tr>
<!-- <th><a href="#accessible-name-and-description-computation">Naming Algorithm</a></th> -->
<tr>
<th id="el-button-select-child-comments">Comments</th>
<td>
<p>
User agents MUST treat the child `button` element of a `select` element as inert.
The `select` and its child `button` part are meant to be considered a single item to users and in the user agent's accessibility tree.
</p>
<p>
The <a data-cite="accname-1.2/#mapping_additional_nd_te">text equivalent computation</a> of the subtree of the
`button` element participates in the accessible value calculation of the `select` element.
See the <a href="#el-select-combobox">`select`<span class="el-context"> (with NO `multiple` attribute and NO `size` attribute having value greater than `1`)</span></a> for more information.
</p>
<p>
User agents MAY warn developers that the use of global HTML or ARIA attributes, or attributes specific to the `button` element or ARIA's `button` role are not expected to be used on a `button` element in this context.
</p>
<p class=note>
As this `button` element is inert, any use of global HTML or ARIA attributes, or attributes specific to the `button` element or ARIA's `button` role are not exposed to the user agent's accessibility API.
</p>
</td>
</tr>
</tbody>
</table>
<h4 id="el-canvas">`canvas`</h4>
<table aria-labelledby="el-canvas">
<tbody>
Expand Down Expand Up @@ -6339,7 +6416,31 @@ <h4 id="el-select-combobox">`select`<span class="el-context"> (with NO `multiple
<!-- <th><a href="#accessible-name-and-description-computation">Naming Algorithm</a></th> -->
<tr>
<th>Comments</th>
<td></td>
<td>
<p>To calculate the accessible value of a `select` element:</p>
<ol>
<li>If `aria-valuetext` is specified on the `select` element, use the attribute's value, including the empty string.</li>
<li>Else if the is a `button` part, calcluate the accessible value from the <a data-cite="accname-1.2/#mapping_additional_nd_te">text equivalent computation</a> of the subtree of that element, even if it returns the empty string.</li>
<li>If the `select` element does not have an `aria-valuetext` attribute and does not contain a `button` part, then the accessible value is calculated from the accessible name of the selected `option` element.</li>
</ol>
<!-- provide a link to the ARIA spec when the https://github.com/w3c/aria/pull/2417 PR lands -->

<p class=note>The following text is still being refined</p>
<p>
The calculated role of the customizable `select` element's popup picker is a `listbox`, by default.</p>
<p>
If authors render invalid elements, in regard to the select element's content model, as descendants of the select element, and those invalid elements result in accessible objects being present as siblings in the accessibility tree to the valid descendent elements of the select, then user agents SHOULD expose the popup picker with the role of a modeless dialog.</p>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead of "if authors render", would it be more clear to say "if authors include" or even "if invalid elements (according to the select element's content model) are placed as descendants of the select element, and..."?

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also, is "the role of a modeless dialog" a thing? If so, great. But should that be "with the role of dialog"?


<p>
In the event invalid elements are present, but are not rendered, then no user agent role repair is necessary.</p>
<p>
In the event that invalid elements are present, but are empty, or are only used as wrapping elements for the valid descendent element's of a select, then user agents SHOULD ignore these elements in the accessibility tree.
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wonder if "are empty" is precise? What if they contain only whitespace? For example, you said this:

<main><article></article</main>  <!-- ignore these cause they are empty -->

but I'd think maybe this should also be ignored?

<main>    <article>    </article>    </main>  <!-- ignore these cause they are "empty" -->

</p>

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In our private chat, you provided a few example bits of HTML and what happens for each case. It was really helpful - I wonder if it's ok to include those as non-normative examples here?

<p class=note>Treating the picker as a `dialog` can help inform users that content beyond the expected elements of a `listbox` popup are present, as they can then inspect the content of the dialog with their assistive technology to discover such content.</p>

<p>See also <a href="#el-button-select-child">`button` element as a child of a `select` element.</p>
</td>
</tr>
</tbody>
</table>
Expand Down
Loading