Skip to content

Commit

Permalink
aria-expanded: revise definition and change applicability for issue 6…
Browse files Browse the repository at this point in the history
…81 (#972)

* aria-expanded: revise definition and change applicability

Resolves issue #681 by:
* Revising aria-expanded definition to state it aria-expanded belongs on
  interactive, focusable, controlling element.
* Rewording normative authors SHOULD to clarify when aria-controls should
  be used.
* Trimming unnecessary content from aria-expanded description related to
  grouping mechanisms and the benefits of collapsing content.
* Removing support from document, section, sectionhead, and window.
* Restoring support to following subclass roles that were effected by
  removals: gridcell, listbox (for issue #722), row, rowheader, tab, and
  treeitem.
* Adding support for checkbox.
* Adding aria-expanded as supported for role application

Thus, support is removed from the roles listed below that do not act as
interactive, focusable, controlling mechanisms for expansion:

alert
alertdialog
article
banner
blockquote
caption
cell
complementary
contentinfo
definition
deletion
dialog
directory
feed
figure
form
grid
group
heading
img
insertion
label
landmark
legend
list
listitem
log
main
marquee
math
menu
menubar
navigation
note
paragraph
radiogroup
region
search
select
status
subscript
superscript
table
tabpanel
term
time
timer
toolbar
tooltip
tree
treegrid
  • Loading branch information
mcking65 authored and joanmarie committed Sep 4, 2019
1 parent dddc322 commit d91c6d6
Showing 1 changed file with 32 additions and 20 deletions.
52 changes: 32 additions & 20 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -955,7 +955,12 @@ <h2>Definition of Roles</h2>
</tr>
<tr>
<th class="role-properties-head" scope="row">Supported States and Properties:</th>
<td class="role-properties"><pref>aria-activedescendant</pref></td>
<td class="role-properties">
<ul>
<li><pref>aria-activedescendant</pref></li>
<li><sref>aria-expanded</sref></li>
</ul>
</td>
</tr>
<tr>
<th class="role-inherited-head" scope="row">Inherited States and Properties:</th>
Expand Down Expand Up @@ -1550,6 +1555,7 @@ <h2>Definition of Roles</h2>
<th class="role-properties-head" scope="row">Supported States and Properties:</th>
<td class="role-properties">
<ul>
<li><sref>aria-expanded</sref></li>
<li><pref>aria-readonly</pref></li>
</ul>
</td>
Expand Down Expand Up @@ -2402,7 +2408,7 @@ <h2>Definition of Roles</h2>
</tr>
<tr>
<th class="role-properties-head" scope="row">Supported States and Properties:</th>
<td class="role-properties"><sref>aria-expanded</sref></td>
<td class="role-properties"></td>
</tr>
<tr>
<th class="role-inherited-head" scope="row">Inherited States and Properties:</th>
Expand Down Expand Up @@ -2851,6 +2857,7 @@ <h2>Definition of Roles</h2>
<th class="role-properties-head" scope="row">Supported States and Properties:</th>
<td class="role-properties">
<ul>
<li><sref>aria-expanded</sref></li>
<li><pref>aria-readonly</pref></li>
<li><pref>aria-required</pref></li>
<li><sref>aria-selected</sref></li>
Expand Down Expand Up @@ -3532,6 +3539,7 @@ <h2>Definition of Roles</h2>
<th class="role-properties-head" scope="row">Supported States and Properties:</th>
<td class="role-properties">
<ul>
<li><sref>aria-expanded</sref></li>
<li><pref>aria-multiselectable</pref></li>
<li><pref>aria-readonly</pref></li>
<li><pref>aria-required</pref></li>
Expand Down Expand Up @@ -5690,6 +5698,7 @@ <h5>Presentational Roles Conflict Resolution</h5>
<td class="role-properties">
<ul>
<li><pref>aria-colindex</pref></li>
<li><sref>aria-expanded</sref></li>
<li><pref>aria-level</pref></li>
<li><pref>aria-rowindex</pref></li>
<li><sref>aria-selected</sref></li>
Expand Down Expand Up @@ -5833,7 +5842,7 @@ <h5>Presentational Roles Conflict Resolution</h5>
<p>The <rref>rowheader</rref> role can be used to identify a cell as a header for a row in a <rref>table</rref>, <rref>grid</rref>, or <rref>treegrid</rref>. The rowheader establishes a <a>relationship</a> between it and all cells in the corresponding row. It is a structural equivalent to setting <code>scope="row"</code> on an <abbr title="Hypertext Markup Language">HTML</abbr> <code>th</code> <a>element</a>.</p>
<p>Authors MUST ensure <a>elements</a> with <a>role</a> <code>rowheader</code> are contained in, or <a>owned</a> by, an element with the role <rref>row</rref>.</p>
<p>Applying the <sref>aria-selected</sref> state on a rowheader MUST NOT cause the user agent to automatically propagate the <sref>aria-selected</sref> state to all the cells in the corresponding row. An author MAY choose to propagate selection in this manner depending on the specific application.</p>
<p>While the <code>rowheader</code> role can be used in both interactive grids and non-interactive tables, the use of <pref>aria-readonly</pref> and <pref>aria-required</pref> is only applicable to interactive elements. Therefore, authors SHOULD NOT use <pref>aria-required</pref> or <pref>aria-readonly</pref> in a <code>rowheader</code> that descends from a <rref>table</rref>, and user agents SHOULD NOT expose either property to <a>assistive technologies</a> unless the <code>rowheader</code> descends from a <rref>grid</rref> or <rref>treegrid</rref>.</p>
<p>While the <code>rowheader</code> role can be used in both interactive grids and non-interactive tables, the use of <sref>aria-expanded</sref>, <pref>aria-readonly</pref>, and <pref>aria-required</pref> is only applicable to interactive elements. Therefore, authors SHOULD NOT use <sref>aria-expanded</sref>, <pref>aria-readonly</pref>, or<pref>aria-required</pref> in a <code>rowheader</code> that descends from a <rref>table</rref>, and user agents SHOULD NOT expose these properties to <a>assistive technologies</a> unless the <code>rowheader</code> descends from a <rref>grid</rref> or <rref>treegrid</rref>.</p>
</div>
<table class="role-features">
<caption>Characteristics:</caption>
Expand Down Expand Up @@ -5884,7 +5893,12 @@ <h5>Presentational Roles Conflict Resolution</h5>
</tr>
<tr>
<th class="role-properties-head" scope="row">Supported States and Properties:</th>
<td class="role-properties"><pref>aria-sort</pref></td>
<td class="role-properties">
<ul>
<li><sref>aria-expanded</sref></li>
<li><pref>aria-sort</pref></li>
</ul>
</td>
</tr>
<tr>
<th class="role-inherited-head" scope="row">Inherited States and Properties:</th>
Expand Down Expand Up @@ -6218,7 +6232,7 @@ <h5>Presentational Roles Conflict Resolution</h5>
</tr>
<tr>
<th class="role-properties-head" scope="row">Supported States and Properties:</th>
<td class="role-properties"><sref>aria-expanded</sref></td>
<td class="role-properties"></td>
</tr>
<tr>
<th class="role-inherited-head" scope="row">Inherited States and Properties:</th>
Expand Down Expand Up @@ -6288,7 +6302,7 @@ <h5>Presentational Roles Conflict Resolution</h5>
</tr>
<tr>
<th class="role-properties-head" scope="row">Supported States and Properties:</th>
<td class="role-properties"><sref>aria-expanded</sref></td>
<td class="role-properties"></td>
</tr>
<tr>
<th class="role-inherited-head" scope="row">Inherited States and Properties:</th>
Expand Down Expand Up @@ -7028,6 +7042,7 @@ <h5>Presentational Roles Conflict Resolution</h5>
<th class="role-properties-head" scope="row">Supported States and Properties:</th>
<td class="role-properties">
<ul>
<li><sref>aria-expanded</sref></li>
<li><pref>aria-posinset</pref></li>
<li><sref>aria-selected</sref></li>
<li><pref>aria-setsize</pref></li>
Expand Down Expand Up @@ -8121,7 +8136,7 @@ <h5>Presentational Roles Conflict Resolution</h5>
</tr>
<tr>
<th class="role-properties-head" scope="row">Supported States and Properties:</th>
<td class="role-properties"> </td>
<td class="role-properties"><sref>aria-expanded</sref></td>
</tr>
<tr>
<th class="role-inherited-head" scope="row">Inherited States and Properties:</th>
Expand Down Expand Up @@ -8273,12 +8288,7 @@ <h5>Presentational Roles Conflict Resolution</h5>
</tr>
<tr>
<th class="role-properties-head" scope="row">Supported States and Properties:</th>
<td class="role-properties">
<ul>
<li><sref>aria-expanded</sref></li>
<li><pref>aria-modal</pref></li>
</ul>
</td>
<td class="role-properties"><pref>aria-modal</pref></td>
</tr>
<tr>
<th class="role-inherited-head" scope="row">Inherited States and Properties:</th>
Expand Down Expand Up @@ -9372,9 +9382,9 @@ <h2>Definitions of States and Properties (all aria-* attributes)</h2>
<div class="state" id="aria-expanded">
<sdef>aria-expanded</sdef>
<div class="state-description">
<p>Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.</p>
<p>For example, this indicates whether a portion of a tree is expanded or collapsed. In other instances, this may be applied to page sections to mark expandable and collapsible regions that are flexible for managing content density. Simplifying the user interface by collapsing sections may improve usability for all, including those with cognitive or developmental disabilities.</p>
<p>If the element with the <sref>aria-expanded</sref> attribute controls the expansion of another grouping container that is not 'owned by' the element, the author SHOULD reference the container by using the <pref>aria-controls</pref> attribute.</p>
<p>Indicates whether a grouping element owned or controlled by this element is expanded or collapsed.</p>
<p>The <sref>aria-expanded</sref> attribute is applied to a focusable, interactive element that toggles visibility of content in another element. For example, it is applied to a parent <rref>treeitem</rref> to indicate whether its child branch of the tree is shown. Similarly, it can be applied to a <rref>button</rref> that controls visibility of a section of page content.</p>
<p>If a grouping container that can be expanded or collapsed is not <a>owned</a> by the element that has the <sref>aria-expanded</sref> attribute, the author SHOULD identify the controlling relationship by referencing the container from the element that has <sref>aria-expanded</sref> with the <pref>aria-controls</pref> property.</p>
</div>
<table class="state-features">
<caption>Characteristics:</caption>
Expand All @@ -9387,7 +9397,7 @@ <h2>Definitions of States and Properties (all aria-* attributes)</h2>
<tbody>
<tr>
<th class="state-related-head" scope="row">Related Concepts:</th>
<td class="state-related">Tapered prompts in voice browsing. Switch in <cite><a href="https://www.w3.org/TR/SMIL3/"><abbr title="Synchronized Multimedia Integration Language">SMIL</abbr></a></cite> [[SMIL3]].</td>
<td class="state-related"></td>
</tr>
<tr>
<th class="state-applicability-head" scope="row">Used in Roles:</th>
Expand All @@ -9414,15 +9424,15 @@ <h2>Definitions of States and Properties (all aria-* attributes)</h2>
<tbody>
<tr>
<th class="value-name" scope="row">false</th>
<td class="value-description">The element, or another grouping element it controls, is collapsed.</td>
<td class="value-description">The grouping element this element owns or controls is collapsed.</td>
</tr>
<tr>
<th class="value-name" scope="row">true</th>
<td class="value-description">The element, or another grouping element it controls, is expanded.</td>
<td class="value-description">The grouping element this element owns or controls is expanded.</td>
</tr>
<tr>
<th class="value-name" scope="row"><strong class="default">undefined (default)</strong></th>
<td class="value-description">The element, or another grouping element it controls, is neither expandable nor collapsible; all its child elements are shown or there are no child elements.</td>
<td class="value-description">The element does not own or control a grouping element that is expandable.</td>
</tr>
</tbody>
</table>
Expand Down Expand Up @@ -11679,6 +11689,8 @@ <h2>Change Log</h2>
<h2>Substantive changes since the last public working draft</h2>
<ul>
<!-- EdNote: After each WD publish, move contents of this list into the next one below. -->
<li>04-Sep-2019: Add aria-expanded support to application and checkbox roles.</li>
<li>04-Sep-2019: Remove aria-expanded support from the following roles: alert, alertdialog, article, banner, blockquote, caption, cell, complementary, contentinfo, definition, deletion, dialog, directory, feed, figure, form, grid, group, heading, img, insertion, label, landmark, legend, list, listitem, log, main, marquee, math, menu, menubar, navigation, note, paragraph, radiogroup, region, search, select, status, subscript, superscript, table, tabpanel, term, time, timer, toolbar, tooltip, tree, treegrid.</li>
<li>04-Sep-2019: Remove children-presentational=true from math role</li>
<li>11-Jul-2019: Set Accessible Name Required to false on gridcell</li>
<li>04-Jun-2019: Make aria-valuemin and aria-valuemax supported, rather than required, properties of focusable separator, slider, and scrollbar. Make aria-orientation a supported, rather than required, property of scrollbar.</li>
Expand Down

0 comments on commit d91c6d6

Please sign in to comment.