Skip to content

Commit

Permalink
Action-1724: Editorial changes to grid, treegrid, and gridcell roles
Browse files Browse the repository at this point in the history
* General clean-up of descriptions.
* Make the language about aria-readonly in grids more specific and
  state there is no implied value when aria-readonly is not specified.
* Add text to the grid role to cover all circumstances when an
  interaction or cell editing mode is required.
* Change gridcell description to say it can be "focusable" instead of
  "active".
* Removed the following statement because the language of sections 7.4
  ("Implicit WAI-ARIA Semantics"), 7.5 ("Conflicts with Host Language
  Semantics", and 7.6 ("State and Property Attribute Processing")
  makes it obsolete:

      If the author applies a non-global WAI-ARIA state or property
      to a native markup element that is acting as a row, such as the
      tr element in HTML, the author MUST also apply the row role to
      that element as stated in the section on Implementation in Host
      Languages.
  • Loading branch information
mcking65 authored and joanmarie committed Jan 21, 2016
1 parent 4108813 commit e427cbe
Showing 1 changed file with 29 additions and 14 deletions.
43 changes: 29 additions & 14 deletions aria/aria.html
Original file line number Diff line number Diff line change
Expand Up @@ -2443,16 +2443,29 @@ <h2>Definition of Roles</h2>
<div class="role" id="grid">
<rdef>grid</rdef>
<div class="role-description">
<p>An interactive control which contains cells of tabular data arranged in rows and columns, like a table.</p>
<p class="ednote">JC 2014-06-03. Now that 1.1 will include a table role, we need to differentiate the short description more sufficiently. Emphasize that grids are "interactive" tables that maintain a selection state.</p>
<p>Grids do not necessarily imply presentation. The <code>grid</code> construct describes <a>relationships</a> between data such that it may be used for different presentations. Grids allow the user to move focus between cells using two dimensional navigation.</p>
<p>Authors MUST ensure that elements with role <rref>treegrid</rref> are <a>owned</a> by elements with role <rref>row</rref>, which are in turn owned by an element with role <rref>rowgroup</rref>, <code>grid</code>, or <rref>treegrid</rref>. If the author applies any non-global WAI-ARIA states or properties to a native markup element that is acting as a row (such as the <code>tr</code> element in HTML), the author MUST also apply the role of <rref>row</rref>, as stated in the section on <a href="#host_languages">Implementation in Host Languages</a>. Authors MAY make cells focusable. Authors MAY provide row and column headers for grids, by using <rref>rowheader</rref> and <rref>columnheader</rref> roles.</p>
<p>Since WAI-ARIA can augment an element in the host language, grids can reuse existing functionality of native table grids. When <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> grid or gridcell roles overlay host language table elements they reuse the host language <a>semantics</a> for that table. For instance, <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> does not specify general attributes for <rref>gridcell</rref> elements that span multiple rows or columns. When the author needs a <rref>gridcell</rref> to span multiple rows or columns, use the host language markup, such as the <code>colspan</code> and <code>rowspan</code> attributes in HTML.</p>
<p>Authors MAY determine the contents of a <rref>gridcell</rref> through calculation of a mathematical formula. Authors MAY make a cell's formula editable by the user. In a spreadsheet application for example, the text alternative of a cell may be the calculated value of a formula. However, when the cell is being edited, the text alternative may be the formula itself.</p>
<p><rref>gridcell</rref> elements with the <sref>aria-selected</sref> attribute set can be selected for user interaction, and if the <pref>aria-multiselectable</pref> attribute of the <code>grid</code> is set to <code>true</code>, multiple cells in the grid may be selected. Grids may be used for spreadsheets like those in desktop spreadsheet applications.</p>
<p>A composite <rref>widget</rref> containing a collection of one or more rows with one or more cells where some or all cells in the grid are focusable by using methods of two-dimensional navigation, such as directional arrow keys.</p>
<p>The <code>grid</code> role does not imply a specific visual, e.g., tabular, presentation. It describes <a>relationships</a> among <a>elements</a>. It may be used for purposes as simple as grouping a collection of checkboxes or navigation links or as complex as creating a full-featured spreadsheet application.</p>
<p>The cell elements of a <code>grid</code> have role <rref>gridcell</rref>. Authors MAY designate a cell as a row or column header by using either the <rref>rowheader</rref> or <rref>columnheader</rref> <a>role</a> in lieu of the <rref>gridcell</rref> role. Authors MUST ensure elements with role <rref>gridcell</rref>, <rref>columnheader</rref>, or <rref>rowheader</rref> are <a>owned</a> by elements with role <rref>row</rref>, which are in turn owned by an element with role <rref>rowgroup</rref>, or <code>grid</code>.</p>
<p>To be <a>keyboard accessible</a>, authors SHOULD manage focus of descendants of a <code>grid</code> as described in <a href="#managingfocus">Managing Focus</a>. When a user is navigating the <code>grid</code> content with a keyboard, authors SHOULD set focus as follows:</p>
<ul>
<li>If a <rref>gridcell</rref> contains a single interactive <rref>widget</rref> that will not consume arrow key presses when it receives focus, such as a <rref>checkbox</rref>, <rref>button</rref>, or <rref>link</rref>, authors MAY set focus on the interactive element contained in that cell. This allows the contained widget to be directly operable.</li>
<li>Otherwise, authors SHOULD ensure the element that receives focus is a <rref>gridcell</rref>, <rref>rowheader</rref>, or <rref>columnheader</rref> element.</li>
</ul>
<p>Authors SHOULD provide a mechanism for changing to an interaction or edit mode that allows users to navigate and interact with content contained inside a focusable cell if that focusable cell contains any of the following:</p>
<ul>
<li>a widget that requires arrow keys to operate, e.g., a <rref>combobox</rref> or <rref>radiogroup</rref></li>
<li>multiple interactive elements</li>
<li>editable content</li>
</ul>
<p>For example, if a cell in a spreadsheet contains a <rref>combobox</rref> or editable text, the <kbd>Enter</kbd> key might be used to activate a cell interaction or editing mode when that cell has focus so the directional arrow keys can be used to operate the contained <rref>combobox</rref> or <rref>textbox</rref>. Depending on the implementation, pressing <kbd>Enter</kbd> again, <kbd>Tab</kbd>, <kbd>Escape</kbd>, or another key may switch the application back to the grid navigation mode.</p>
<p>Authors MAY use a <rref>gridcell</rref> to display the result of a formula, which could be editable by the user. In a spreadsheet application, for example, a <rref>gridcell</rref> may show a value calculated from a formula until the user activates the <rref>gridcell</rref> for editing when a <rref>textbox</rref> appears in the <rref>gridcell</rref> containing the formula in an editable state.</p>
<!-- make sure the following para remains synced with its counterpart in #treegrid -->
<p>A <code>grid</code> is considered editable unless otherwise specified. To make a <code>grid</code> read-only, insert the <pref>aria-readonly</pref> attribute of the <code>grid</code> to <code>true</code>. User Agents MUST implicitly propagate value of the <code>treegrid</code> element's <pref>aria-readonly</pref> attribute to all of its owned <rref>gridcell</rref> elements, and expose this to the accessibility API. An author MAY override an individual <rref>gridcell</rref> element's propagated <pref>aria-readonly</pref> attribute on the <rref>gridcell</rref>.</p>
<p>To be <a>keyboard accessible</a>, authors SHOULD manage focus of descendants for all instances of this <a>role</a>, as described in <a href="#managingfocus">Managing Focus</a>.</p>
<p>If <pref>aria-readonly</pref> is set on an element with role <code>grid</code>, <a>user agents</a> MUST propagate the value to all <rref>gridcell</rref> elements owned by the <code>grid</code> and expose the value in the accessibility API. An author MAY override the propagated value of <pref>aria-readonly</pref> for an individual <rref>gridcell</rref> element.</p>
<p>In a <code>grid</code> that provides cell content editing functions, if the content of a focusable <rref>gridcell</rref> element is not editable, authors MAY set <pref>aria-readonly</pref> to <code>true</code> on the <code>gridcell</code> element. However, the value of <pref>aria-readonly</pref>, whether specified for a <code>grid</code> or individual cells, only indicates whether the content contained in cells is editable. It does not represent availability of functions for navigating or manipulating the <code>grid</code> itself.</p>
<p>An undefined value for <pref>aria-readonly</pref>, i.e., <pref>aria-readonly</pref> is not specified, does not imply that a <code>grid</code> or a <rref>gridcell</rref> contains editable content. For example, if a <code>grid</code> presents a collection of elements that are not editable, such as a collection of <rref>link</rref> elements representing dates in a datepicker, it is not necessary for the author to specify a value for <pref>aria-readonly</pref>.</p>
<p>Authors MAY indicate that a focusable <rref>gridcell</rref> is selectable as the object of an action with the <sref>aria-selected</sref> attribute. If the <code>grid</code> allows multiple <rref>gridcells</rref> to be selected, the author SHOULD set <pref>aria-multiselectable</pref> to <code>true</code> on the element with role <code>grid</code>.</p>
<p>Since <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> can augment an element of the host language, a <code>grid</code> can reuse the elements and attributes of a native table, such as an HTML <code>table</code> element. For example, if an author applies the <code>grid</code> role to an HTML <code>table</code> element, the author does not need to apply the <rref>row</rref> and <rref>gridcell</rref> roles to the descendant HTML <code>tr</code> and <code>td</code> elements because the <a>user agent</a> will automatically make the appropriate translations. When the author is reusing a native host language table element and needs a <rref>gridcell</rref> element to span multiple rows or columns, the author SHOULD apply the appropriate host language attributes instead of <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> <pref>aria-rowspan</pref> or <pref>aria-colspan</pref> properties.</p>
<p>See the <cite><a href="http://www.w3.org/TR/wai-aria-practices/"><abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> Authoring Practices Guide</a></cite> [[WAI-ARIA-PRACTICES]] for additional details on implementing grid design patterns.</p>
</div>
<table class="role-features">
<caption>Characteristics:</caption>
Expand Down Expand Up @@ -2546,10 +2559,10 @@ <h2>Definition of Roles</h2>
<div class="role" id="gridcell">
<rdef>gridcell</rdef>
<div class="role-description">
<p>A cell in a grid or treegrid.</p>
<p>Cells may be active, editable, and selectable. Cells may have <a>relationships</a> such as <pref>aria-controls</pref> to address the application of functional relationships.</p>
<p>If relevant headers cannot be determined from the <abbr title="Document Object Model">DOM</abbr> structure, authors SHOULD explicitly indicate which header cells are relevant to the cell by referencing <a>elements</a> with <a>role</a> <rref>rowheader</rref> or <rref>columnheader</rref> using the <pref>aria-describedby</pref> <a>attribute</a>.</p>
<p>In a <rref>treegrid</rref>, authors MAY define cells as expandable by using the <sref>aria-expanded</sref> attribute. If the <sref>aria-expanded</sref> attribute is provided, it applies only to the individual cell. It is not a proxy for the container row, which also can be expanded. The main use case for providing this attribute on a cell is pivot table behavior.</p>
<p>A <rref>cell</rref> in a <rref>grid</rref> or <rref>treegrid</rref>.</p>
<p>A <code>gridcell</code> may be focusable, editable, and selectable. A <code>gridcell</code> may have <a>relationships</a> such as <pref>aria-controls</pref> to address the application of functional relationships.</p>
<p>If an author intends a <code>gridcell</code> to have a row header, column header, or both, and if the relevant headers cannot be determined from the <abbr title="Document Object Model">DOM</abbr> structure, authors SHOULD explicitly indicate which header cells are relevant to the <code>gridcell</code> by applying <pref>aria-describedby</pref> on the <code>gridcell</code> and referencing <a>elements</a> with <a>role</a> <rref>rowheader</rref> or <rref>columnheader</rref>.</p>
<p>In a <rref>treegrid</rref>, authors MAY define a <code>gridcell</code> as expandable by using the <sref>aria-expanded</sref> attribute. If the <sref>aria-expanded</sref> attribute is provided, it applies only to the individual cell. It is not a proxy for the container <rref>row</rref>, which also can be expanded. The main use case for providing this attribute on a <code>gridcell</code> is pivot table behavior.</p>
<p>Authors MUST ensure <a>elements</a> with <a>role</a> gridcell are contained in, or owned by, an element with the <a>role</a> <rref>row</rref>.</p>
</div>
<table class="role-features">
Expand Down Expand Up @@ -7618,7 +7631,9 @@ <h5 id="role-presentation-ednote-none">Editorial Note regarding the ARIA 1.1 <rr
<div class="role-description">
<p>A <rref>grid</rref> whose rows can be expanded and collapsed in the same manner as for a <rref>tree</rref>.</p>
<!-- make sure the following para remains synced with its counterpart in #grid -->
<p>A <code>treegrid</code> is considered editable unless otherwise specified. To make a <code>treegrid</code> read-only, set the <pref>aria-readonly</pref> attribute of the <code>treegrid</code> to <code>true</code>. User Agents MUST implicitly propagate value of the <code>treegrid</code> element's <pref>aria-readonly</pref> attribute to all of its owned <rref>gridcell</rref> elements, and expose this to the accessibility API. An author MAY override an individual <rref>gridcell</rref> element's propagated <pref>aria-readonly</pref> attribute on the <rref>gridcell</rref>.</p>
<p>If <pref>aria-readonly</pref> is set on an <a>element</a> with <a>role</a> <code>treegrid</code>, <a>user agents</a> MUST propagate the value to all <rref>gridcell</rref> elements owned by the <code>treegrid</code> and expose the value in the accessibility API. An author MAY override the propagated value of <pref>aria-readonly</pref> for an individual <rref>gridcell</rref> element.</p>
<p>When the <pref>aria-readonly</pref> attribute is applied to a focusable <rref>gridcell</rref>, it indicates whether the content contained in the <rref>gridcell</rref> is editable. The <pref>aria-readonly</pref> attribute does not represent availability of functions for navigating or manipulating the <code>treegrid</code> itself.</p>
<p>In a <code>treegrid</code> that provides content editing functions, if the content of a focusable <rref>gridcell</rref> element is not editable, authors MAY set <pref>aria-readonly</pref> to <code>true</code> on the <rref>gridcell.</rref> element. However, if a <code>treegrid</code> presents a collection of elements that do not support <pref>aria-readonly</pref>, such as a collection of <rref>link</rref> elements, it is not necessary for the author to specify a value for <pref>aria-readonly</pref>.</p>
<p>To be <a>keyboard accessible</a>, authors SHOULD manage focus of descendants for all instances of this <a>role</a>, as described in <a href="#managingfocus">Managing Focus</a>.</p>
</div>
<table class="role-features">
Expand Down

0 comments on commit e427cbe

Please sign in to comment.