From 7eeddcd048dce1a4000afe4163404fb1ac765045 Mon Sep 17 00:00:00 2001
From: Simon Pieters <zcorpan@gmail.com>
Date: Fri, 28 Jun 2019 15:16:43 +0200
Subject: [PATCH 01/56] Initial commit for Communicating Widget States draft

---
 widget-states.md | 30 ++++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)
 create mode 100644 widget-states.md

diff --git a/widget-states.md b/widget-states.md
new file mode 100644
index 0000000000..291b5ba4a8
--- /dev/null
+++ b/widget-states.md
@@ -0,0 +1,30 @@
+Issue for this section: https://github.com/w3c/aria-practices/issues/254
+
+Related issues:
+https://github.com/w3c/aria/issues/1008
+https://github.com/w3c/aria/issues/681#issuecomment-506703445
+
+
+## Widget States
+
+aria-selected
+aria-checked
+aria-pressed
+aria-expanded
+aria-disabled
+aria-readonly
+
+
+HTML equivalents:
+
+```
+<input readonly>
+<input disabled>
+<input type=checkbox checked>
+<input type=checkbox>.indeterminate = true; <-> aria-checked = undefined
+```
+
+Push button can be implemented as:
+```
+<button> + aria-pressed, -webkit-appearance: none; for easier styling
+```

From 6d1d2b83656e4b1a31d90fef9b81b46f5c20e90f Mon Sep 17 00:00:00 2001
From: Simon Pieters <zcorpan@gmail.com>
Date: Thu, 31 Oct 2019 19:53:36 +0100
Subject: [PATCH 02/56] WIP

---
 widget-states.md | 162 ++++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 154 insertions(+), 8 deletions(-)

diff --git a/widget-states.md b/widget-states.md
index 291b5ba4a8..c9f4a41c6b 100644
--- a/widget-states.md
+++ b/widget-states.md
@@ -5,14 +5,160 @@ https://github.com/w3c/aria/issues/1008
 https://github.com/w3c/aria/issues/681#issuecomment-506703445
 
 
-## Widget States
-
-aria-selected
-aria-checked
-aria-pressed
-aria-expanded
-aria-disabled
-aria-readonly
+## Communicating Widget States
+
+ARIA can represent several different widgets, and these widgets can have different states,
+for example in response to user interaction with the widget.
+
+HTML also has built-in widgets and similar states.
+When using HTML widgets that have built-in ways to represent these states,
+do not use ARIA states.
+Only use the HTML attributes.
+
+For example, the `textarea` element can be marked as read-only using the `readonly` attribute.
+
+```
+<label>
+ Address
+ <textarea readonly></textaera>
+</label>
+```
+
+This section covers what these states are,
+how the ARIA states map to HTML's built-in widgets' states,
+and how to use them.
+
+### `aria-selected`
+
+The `aria-selected` attribute indicates whether the element is selected.
+Some widgets or parts of widgets can be selected.
+A widget might allow only a single selection,
+or can allow multiple items to be selected.
+Use `aria-multiselectable="true"` to indicate that multiple values can be selected.
+
+The `aria-selected` attribute allows these values:
+
+* `true`: the element is selectable and is selected.
+* `false`: the element is selectable but is not selected.
+* `undefined` (default): the element is not selectable.
+
+Typically, selection can be changed by clicking with a pointing device,
+touching for touchscreens,
+or using arrow keys with a keyboard.
+When multiple selections are possible,
+this might be done by holding a modifier key on the keyboard while clicking with a pointing device,
+longpressing for touchscreens,
+or using a modifier key (e.g. Shift) while pressing arrows on a keyboard to select adjacent items,
+or using a different modifier key (e.g. Command or Control) while pressing arrows to move focus without changing the selection, and then pressing Space to select or unselect.
+However, these paradigms might vary depending on what kind of widget it is,
+and the conventions might be different depending on the kind of device and host operating system.
+
+The `aria-selected` attribute is supported for these roles:
+
+* `gridcell` (including the subclass roles `columnheader` and `rowheader`)
+* `option` (including the subclass role `treeitem`)
+* `row`
+* `tab`
+
+#### `gridcell`
+
+A `gridcell` in a `grid` or `treegrid` supports the `aria-selected` state.
+The widget could support selecting one or multiple cells.
+
+TODO example.
+
+#### `option`
+
+`aria-selected` is a required state for the `option` role in a `listbox` element.
+When an item is selected, specify `aria-selected="true"`.
+When an item is not selected, specify `aria-selected="false"`;
+do not omit the attribute.
+
+See the [Combo Box](#combobox) and the [Listbox](#Listbox) design patterns for examples.
+
+The `option` role and the subclass role `treeitem` support both `aria-selected` and `aria-checked`.
+In most cases, using only `aria-selected` is the right choice.
+Do not add both `aria-selected` and `aria-checked` "just in case",
+since that would increase verbosity for assistive technology users and could cause unnecessary confusion.
+
+In rare cases, a widget could support both selection and checkedness to represent orthogonal states,
+although that could be complex and might be confusing for users.
+For example, a `tree` widget to represent a changeable sequence of steps,
+could allow selection in order to rearrange a set of steps,
+and also allow checking and unchecking them to indicate which steps are active.
+
+#### `row`
+
+The `row` role within a `grid`, `table` or `treegrid` element supports the `aria-selected` state.
+
+See the [ARIA 1.1 Combobox with Grid Popup Example](examples/combobox/aria1.1pattern/grid-combo.html)
+of the [Combo Box](#combobox) design pattern.
+
+#### `tab`
+
+The `tab` role in a `tablist` element supports the `aria-selected` state,
+to indicate which tab is active in a tab panel.
+
+See the [Tabs](#tabpanel) design pattern for examples.
+
+### `aria-checked`
+
+The `aria-checked` attribute indicates whether the element is checked.
+
+The `aria-checked` attribute allows these values:
+
+* `true`: the element is supports being checked and is checked.
+* `false`: the element is supports being checked but is not checked.
+* `mixed`: the element is supports being checked and is in the mixed state for a tri-state checkbox.
+* `undefined` (default): the element does not support being checked.
+
+The `aria-checked` attribute is supported for these roles:
+
+* `checkbox` (including the subclass role `menuitemcheckbox`)
+* `option` (including the subclass role `treeitem`)
+* `radio` (including the subclass role `menuitemradio`)
+* `switch`
+
+However, the `mixed` value is only supported for the `checkbox` and `menuitemcheckbox` roles.
+
+#### `checkbox`
+
+`aria-checked` is a required state for the `checkbox` and `menuitemcheckbox` roles.
+
+Set `aria-checked="true"` when the checkbox is checked,
+and `aria-checked="false"` when it is unchecked.
+
+A checkbox can support a third `mixed` state.
+For example, if there is a group of checkboxes and one checkbox allows checking or unchecking the entire group,
+that checkbox can be in the `mixed` state if the group of checkboxes have some checked and some unchecked.
+
+#### `option`
+
+The `option` role and the subclass `treeitem` role support `aria-checked`, but require the `aria-selected` state.
+
+See the previous section on `aria-selected` for examples of when it can be appropriate to use `aria-checked`.
+
+#### `radio`
+
+`aria-checked` is a required state for the `radio` and `menuitemradio` roles. TODO
+
+#### `switch`
+
+TODO
+
+### `aria-pressed`
+
+The `button` role TODO
+
+### `aria-expanded`
+
+TODO
+
+### `aria-disabled`
+
+TODO
+
+### `aria-readonly`
 
 
 HTML equivalents:

From 7e080a50c2b4be12c7952d02f9be8e0aea50d739 Mon Sep 17 00:00:00 2001
From: Simon Pieters <zcorpan@gmail.com>
Date: Fri, 1 Nov 2019 17:01:33 +0100
Subject: [PATCH 03/56] WIP

---
 widget-states.md | 54 +++++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 49 insertions(+), 5 deletions(-)

diff --git a/widget-states.md b/widget-states.md
index c9f4a41c6b..a1c38c6181 100644
--- a/widget-states.md
+++ b/widget-states.md
@@ -24,8 +24,9 @@ For example, the `textarea` element can be marked as read-only using the `readon
 </label>
 ```
 
-This section covers what these states are,
-how the ARIA states map to HTML's built-in widgets' states,
+This section covers what ARIA's widget states are,
+which roles support each state,
+how the ARIA states map to HTML's built-in widget states,
 and how to use them.
 
 ### `aria-selected`
@@ -101,6 +102,16 @@ to indicate which tab is active in a tab panel.
 
 See the [Tabs](#tabpanel) design pattern for examples.
 
+#### HTML elements that support selection
+
+The HTML `select` element allows selection of either a single item
+or multiple items, depending on the attributes on the `select` element.
+
+Default selection can be specified with the `selected` attribute on the `option` element.
+
+The user can change the selection, but this is not represented with any attributes.
+Instead, there are DOM APIs to read and mutate the selection state from script.
+
 ### `aria-checked`
 
 The `aria-checked` attribute indicates whether the element is checked.
@@ -132,6 +143,8 @@ A checkbox can support a third `mixed` state.
 For example, if there is a group of checkboxes and one checkbox allows checking or unchecking the entire group,
 that checkbox can be in the `mixed` state if the group of checkboxes have some checked and some unchecked.
 
+See the [Checkbox](#checkbox) design pattern for examples.
+
 #### `option`
 
 The `option` role and the subclass `treeitem` role support `aria-checked`, but require the `aria-selected` state.
@@ -140,15 +153,46 @@ See the previous section on `aria-selected` for examples of when it can be appro
 
 #### `radio`
 
-`aria-checked` is a required state for the `radio` and `menuitemradio` roles. TODO
+`aria-checked` is a required state for the `radio` and `menuitemradio` roles.
+
+A radio button usually participates in a group of radio buttons,
+where checking one radio button unchecks the other radio buttons in the group.
+
+Use `aria-checked="true"` on the radio button that is checked,
+and `aria-checked="false"` on the other radio buttons in the group.
+
+See the [Radio Group](#radiobutton) design pattern for examples.
 
 #### `switch`
 
-TODO
+A switch control is similar to a checkbox.
+It does not support the `mixed` state,
+and it is said to be "on" or "off" rather than "checked" or "unchecked".
+However, the `aria-checked` attribute is still used to indicate its state.
+
+Use `aria-checked="true"` to indicate that the switch is on.
+Use `aria-checked="false"` to indicate that the switch is off.
+
+HTML does not (yet) have a native switch control.
 
 ### `aria-pressed`
 
-The `button` role TODO
+The `button` role can represent a toggle button by using the `aria-pressed` attribute.
+When the `aria-pressed` attribute is present and has a non-empty value,
+the button is a toggle button.
+A toggle button is a two-state button, either pressed or unpressed.
+
+The `true` value indicates that the button is pressed, and
+the `false` value indicates that the button is unpressed.
+
+HTML does not have a native way to represent toggle buttons,
+but `aria-pressed` can be used with the HTML `button` element.
+
+```html
+<button aria-pressed="false">Mute</button>
+```
+
+See the [Button](#button) design pattern for examples.
 
 ### `aria-expanded`
 

From eccacd9ce2e4ff4ccb55a6821e7e558350d9b5ec Mon Sep 17 00:00:00 2001
From: Simon Pieters <zcorpan@gmail.com>
Date: Fri, 1 Nov 2019 17:44:14 +0100
Subject: [PATCH 04/56] WIP

---
 widget-states.md | 83 +++++++++++++++++++++++++++++++++---------------
 1 file changed, 57 insertions(+), 26 deletions(-)

diff --git a/widget-states.md b/widget-states.md
index a1c38c6181..ec1020dec9 100644
--- a/widget-states.md
+++ b/widget-states.md
@@ -1,10 +1,3 @@
-Issue for this section: https://github.com/w3c/aria-practices/issues/254
-
-Related issues:
-https://github.com/w3c/aria/issues/1008
-https://github.com/w3c/aria/issues/681#issuecomment-506703445
-
-
 ## Communicating Widget States
 
 ARIA can represent several different widgets, and these widgets can have different states,
@@ -15,15 +8,6 @@ When using HTML widgets that have built-in ways to represent these states,
 do not use ARIA states.
 Only use the HTML attributes.
 
-For example, the `textarea` element can be marked as read-only using the `readonly` attribute.
-
-```
-<label>
- Address
- <textarea readonly></textaera>
-</label>
-```
-
 This section covers what ARIA's widget states are,
 which roles support each state,
 how the ARIA states map to HTML's built-in widget states,
@@ -200,21 +184,68 @@ TODO
 
 ### `aria-disabled`
 
-TODO
+The `aria-disabled` state indicates that an element is disabled,
+so it is not editable or operable.
+
+Usually, disabled elements are not focusable,
+including descendants of the element.
+
+Use CSS to change the appearance of disabled controls,
+so that it is clear for visual users that the element is disabled.
+
+The `aria-disabled` state is supported on the following roles:
+
+* `application`
+* `button`
+* `composite` (including subclass roles `grid`, `combobox`, `listbox`, `menu`, `menubar`, `radiogroup`, `select`, `tablist`, `tree`, `treegrid`)
+* `gridcell` (including subclass roles `columnheader` and `rowheader`)
+* `group` (including subclass roles `row`, `toolbar`)
+* `input` (including subclass roles `checkbox`, `menuitemcheckbox`, `menuitemradio`, `option`, `radio`, `searchbox`, `slider`, `spinbutton`, `switch`, `textbox`, `treeitem`)
+* `link`
+* `menuitem`
+* `scrollbar`
+* `separator`
+* `tab`
+
+In HTML, most built-in widgets can be disabled by using the `disabled` attribute.
+There is no need to also use `aria-disabled` in such cases.
+
+See the following design patterns for examples:
+
+* [Accordion (Sections With Show/Hide Functionality)](#accordion)
+* [Menu or Menu bar](#menu)
+* [Toolbar](#toolbar)
 
 ### `aria-readonly`
 
+The `aria-readonly` state indicates whether an element allows its value to be changed.
 
-HTML equivalents:
+* `true`: the element does not allow its value to be changed, but is otherwise operable.
+* `false`: the element allows the value to be changed.
 
-```
-<input readonly>
-<input disabled>
-<input type=checkbox checked>
-<input type=checkbox>.indeterminate = true; <-> aria-checked = undefined
-```
+The `aria-readonly` attribute is supported for these roles:
+
+* `checkbox` (including the subclass roles `menuitemcheckbox` and `switch`)
+* `combobox`
+* `grid` (including the subclass role `treegrid`)
+* `gridcell` (including the subclass roles `columnheader` and `rowheader`)
+* `listbox`
+* `radiogroup`
+* `slider`
+* `spinbutton`
+* `textbox` (including the subclass roles `searchbox`)
+* `menuitemradio`
+
+When an element is readonly, it should still be focusable and allow text selection,
+only not allow editing or otherwise changing the value or state of the element.
+
+HTML has the `readonly` attribute for the `input` and `textarea` elements.
+When using those elements, use the `readonly` attribute instead of `aria-readonly`.
+For example:
 
-Push button can be implemented as:
 ```
-<button> + aria-pressed, -webkit-appearance: none; for easier styling
+<label>
+ Address
+ <textarea readonly></textaera>
+</label>
 ```

From 0245ffd1a290e2a59ab8dbb2dde388310cde3b9e Mon Sep 17 00:00:00 2001
From: Simon Pieters <zcorpan@gmail.com>
Date: Tue, 12 Nov 2019 12:34:38 +0100
Subject: [PATCH 05/56] Mention indeterminate <input type=checkbox>

---
 widget-states.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/widget-states.md b/widget-states.md
index ec1020dec9..297a61ef50 100644
--- a/widget-states.md
+++ b/widget-states.md
@@ -116,6 +116,10 @@ The `aria-checked` attribute is supported for these roles:
 
 However, the `mixed` value is only supported for the `checkbox` and `menuitemcheckbox` roles.
 
+In HTML, the `<input type="checkbox">` element where the `indeterminate` IDL attribute is set to `true`
+is by default mapped to `aria-checked="mixed"`.
+There is no way to represent `indeterminate` declaratively with markup in HTML.
+
 #### `checkbox`
 
 `aria-checked` is a required state for the `checkbox` and `menuitemcheckbox` roles.

From 61b7c7f624e9a953bab8f6828bc77f5780b4740d Mon Sep 17 00:00:00 2001
From: Simon Pieters <zcorpan@gmail.com>
Date: Tue, 12 Nov 2019 12:36:13 +0100
Subject: [PATCH 06/56] Change Combo Box to Combobox

---
 widget-states.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/widget-states.md b/widget-states.md
index 297a61ef50..4a5b5e2bc1 100644
--- a/widget-states.md
+++ b/widget-states.md
@@ -59,7 +59,7 @@ When an item is selected, specify `aria-selected="true"`.
 When an item is not selected, specify `aria-selected="false"`;
 do not omit the attribute.
 
-See the [Combo Box](#combobox) and the [Listbox](#Listbox) design patterns for examples.
+See the [Combobox](#combobox) and the [Listbox](#Listbox) design patterns for examples.
 
 The `option` role and the subclass role `treeitem` support both `aria-selected` and `aria-checked`.
 In most cases, using only `aria-selected` is the right choice.
@@ -77,7 +77,7 @@ and also allow checking and unchecking them to indicate which steps are active.
 The `row` role within a `grid`, `table` or `treegrid` element supports the `aria-selected` state.
 
 See the [ARIA 1.1 Combobox with Grid Popup Example](examples/combobox/aria1.1pattern/grid-combo.html)
-of the [Combo Box](#combobox) design pattern.
+of the [Combobox](#combobox) design pattern.
 
 #### `tab`
 

From f809c94f30899759ff2e79912f8ee46848759f02 Mon Sep 17 00:00:00 2001
From: Simon Pieters <zcorpan@gmail.com>
Date: Wed, 13 Nov 2019 16:26:43 +0100
Subject: [PATCH 07/56] WIP aria-expanded

---
 widget-states.md | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/widget-states.md b/widget-states.md
index 4a5b5e2bc1..e789a26024 100644
--- a/widget-states.md
+++ b/widget-states.md
@@ -184,7 +184,17 @@ See the [Button](#button) design pattern for examples.
 
 ### `aria-expanded`
 
-TODO
+The `aria-expanded` state is used in these design patterns:
+
+* [Accordion](#accordion)
+* [Combobox](#combobox)
+* [Disclosure](#disclosure)
+* [Listbox](#listbox)
+* [Menubar](#menu)
+* [Menu Button](#menubutton)
+* [Toolbar](#toolbar)
+* [Treegrid](#treegrid)
+* [Tree View](#TreeView)
 
 ### `aria-disabled`
 

From c356a98dc1f4c4e851ec93d7572c46333de12184 Mon Sep 17 00:00:00 2001
From: Simon Pieters <zcorpan@gmail.com>
Date: Fri, 15 Nov 2019 17:14:03 +0100
Subject: [PATCH 08/56] Intro and example

---
 widget-states.md | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/widget-states.md b/widget-states.md
index e789a26024..85ea1513b2 100644
--- a/widget-states.md
+++ b/widget-states.md
@@ -184,6 +184,24 @@ See the [Button](#button) design pattern for examples.
 
 ### `aria-expanded`
 
+The `aria-expanded` attribute informs assistive technology users that an interactive element can be expanded,
+meaning it owns or controls another element that can be collapsed or expanded.
+
+For example, a button can toggle the visibility of some content, as in an accordion.
+
+```html
+<h2><button aria-controls="spoiler" aria-expanded="false">Spoil the end</button></h2>
+<div id="spoiler">
+ <p>Ultimately, all starts burn out and the black holes evaporate from Hawking radiation,
+ and the universe reaches maximum entropy.</p>
+</div>
+```
+
+Clicking the button shows or hides the "spoiler" element with JavaScript,
+and also changes the value of `aria-expanded` to `true` when showing,
+and `false` when hiding.
+Users of assistive technology would know from focusing the button whether it is collapsed or expanded.
+
 The `aria-expanded` state is used in these design patterns:
 
 * [Accordion](#accordion)

From dc582e44565c947d333d8c59afdd4de26ae164c7 Mon Sep 17 00:00:00 2001
From: Simon Pieters <zcorpan@gmail.com>
Date: Wed, 4 Dec 2019 16:05:36 +0100
Subject: [PATCH 09/56] Improve introduction

---
 widget-states.md | 21 +++++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/widget-states.md b/widget-states.md
index 85ea1513b2..6e57769efa 100644
--- a/widget-states.md
+++ b/widget-states.md
@@ -1,12 +1,25 @@
 ## Communicating Widget States
 
-ARIA can represent several different widgets, and these widgets can have different states,
-for example in response to user interaction with the widget.
+ARIA can represent several different widgets, and these widgets can have a variety of states,
+such as an option being selected,
+a checkbox being checked or unchecked,
+or an accordion being expanded or collapsed.
+
+The following table summarizes the states discussed in this section.
+
+State           | Description | HTML equivalent
+----------------|-------------|----------------
+`aria-selected` | the element is chosen for further operation | `selected` IDL attribute on `option`
+`aria-checked`  | the element is checked, unchecked, or mixed state | `checked` IDL attribute on `input`
+`aria-pressed`  | for toggle buttons: pressed or unpressed | None
+`aria-expanded` | an element owned or controlled by this element can be expanded or collapsed | None
+`aria-disabled` | the element is not editable or operable | `disabled` content attribute on form controls
+`aria-readonly` | the element is not editable, but is operable | `readonly` content attribute on `input` and `textarea`
 
 HTML also has built-in widgets and similar states.
 When using HTML widgets that have built-in ways to represent these states,
 do not use ARIA states.
-Only use the HTML attributes.
+Only use the HTML attributes or APIs.
 
 This section covers what ARIA's widget states are,
 which roles support each state,
@@ -192,7 +205,7 @@ For example, a button can toggle the visibility of some content, as in an accord
 ```html
 <h2><button aria-controls="spoiler" aria-expanded="false">Spoil the end</button></h2>
 <div id="spoiler">
- <p>Ultimately, all starts burn out and the black holes evaporate from Hawking radiation,
+ <p>Ultimately, all stars burn out and the black holes evaporate from Hawking radiation,
  and the universe reaches maximum entropy.</p>
 </div>
 ```

From 8451dcc65a2e4e68e9545494cb85e921de09a144 Mon Sep 17 00:00:00 2001
From: Simon Pieters <zcorpan@gmail.com>
Date: Wed, 4 Dec 2019 16:11:57 +0100
Subject: [PATCH 10/56] Say that aria-hidden, aria-invalid are not covered

---
 widget-states.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/widget-states.md b/widget-states.md
index 6e57769efa..5a085ad72e 100644
--- a/widget-states.md
+++ b/widget-states.md
@@ -26,6 +26,10 @@ which roles support each state,
 how the ARIA states map to HTML's built-in widget states,
 and how to use them.
 
+Note: The `aria-hidden` state is discussed in a separate section. TODO link
+
+Note: The `aria-invalid` state is not yet covered in this document, but is planned to be part of a section about forms.
+
 ### `aria-selected`
 
 The `aria-selected` attribute indicates whether the element is selected.

From 8f7ddaee18c05105ac74f6e091ad908273dee282 Mon Sep 17 00:00:00 2001
From: Simon Pieters <zcorpan@gmail.com>
Date: Wed, 4 Dec 2019 16:33:22 +0100
Subject: [PATCH 11/56] Restructure aria-selected section

---
 widget-states.md | 31 +++++++++++++++----------------
 1 file changed, 15 insertions(+), 16 deletions(-)

diff --git a/widget-states.md b/widget-states.md
index 5a085ad72e..9a2809f616 100644
--- a/widget-states.md
+++ b/widget-states.md
@@ -32,7 +32,7 @@ Note: The `aria-invalid` state is not yet covered in this document, but is plann
 
 ### `aria-selected`
 
-The `aria-selected` attribute indicates whether the element is selected.
+The `aria-selected` attribute indicates whether the element is chosen for futher operation.
 Some widgets or parts of widgets can be selected.
 A widget might allow only a single selection,
 or can allow multiple items to be selected.
@@ -55,21 +55,27 @@ or using a different modifier key (e.g. Command or Control) while pressing arrow
 However, these paradigms might vary depending on what kind of widget it is,
 and the conventions might be different depending on the kind of device and host operating system.
 
-The `aria-selected` attribute is supported for these roles:
+The `aria-selected` attribute is supported in these widgets:
 
-* `gridcell` (including the subclass roles `columnheader` and `rowheader`)
-* `option` (including the subclass role `treeitem`)
-* `row`
-* `tab`
+Widget             | Roles in the widget where `aria-selected` applies
+-------------------|-------------------
+`grid`, `treegrid` | `row`, `gridcell`, `columnheader`, `rowheader`
+`listbox`, `tree`  | `option`, `treeitem`
+`tablist`          | `tab`
 
-#### `gridcell`
+#### Selecting rows and cells in `grid` and `treegrid`
 
 A `gridcell` in a `grid` or `treegrid` supports the `aria-selected` state.
 The widget could support selecting one or multiple cells.
 
 TODO example.
 
-#### `option`
+The `row` role within a `grid`, `table` or `treegrid` element supports the `aria-selected` state.
+
+See the [ARIA 1.1 Combobox with Grid Popup Example](examples/combobox/aria1.1pattern/grid-combo.html)
+of the [Combobox](#combobox) design pattern.
+
+#### Selecting options in listboxes and trees
 
 `aria-selected` is a required state for the `option` role in a `listbox` element.
 When an item is selected, specify `aria-selected="true"`.
@@ -89,14 +95,7 @@ For example, a `tree` widget to represent a changeable sequence of steps,
 could allow selection in order to rearrange a set of steps,
 and also allow checking and unchecking them to indicate which steps are active.
 
-#### `row`
-
-The `row` role within a `grid`, `table` or `treegrid` element supports the `aria-selected` state.
-
-See the [ARIA 1.1 Combobox with Grid Popup Example](examples/combobox/aria1.1pattern/grid-combo.html)
-of the [Combobox](#combobox) design pattern.
-
-#### `tab`
+#### Selecting tabs in a tablist
 
 The `tab` role in a `tablist` element supports the `aria-selected` state,
 to indicate which tab is active in a tab panel.

From a784e68fcb77163fe52f25cfa67a7c3a7ab9791e Mon Sep 17 00:00:00 2001
From: Simon Pieters <zcorpan@gmail.com>
Date: Wed, 4 Dec 2019 16:35:35 +0100
Subject: [PATCH 12/56] Separate listbox and tree in the table

---
 widget-states.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/widget-states.md b/widget-states.md
index 9a2809f616..65939615fe 100644
--- a/widget-states.md
+++ b/widget-states.md
@@ -60,7 +60,8 @@ The `aria-selected` attribute is supported in these widgets:
 Widget             | Roles in the widget where `aria-selected` applies
 -------------------|-------------------
 `grid`, `treegrid` | `row`, `gridcell`, `columnheader`, `rowheader`
-`listbox`, `tree`  | `option`, `treeitem`
+`listbox`          | `option`
+`tree`             | `treeitem`
 `tablist`          | `tab`
 
 #### Selecting rows and cells in `grid` and `treegrid`

From b4e58ef3330befd50c4100e94bb5589e62d10449 Mon Sep 17 00:00:00 2001
From: Simon Pieters <zcorpan@gmail.com>
Date: Wed, 4 Dec 2019 16:44:14 +0100
Subject: [PATCH 13/56] Tweak headings in aria-checked

---
 widget-states.md | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/widget-states.md b/widget-states.md
index 65939615fe..d6a1e074d0 100644
--- a/widget-states.md
+++ b/widget-states.md
@@ -76,7 +76,7 @@ The `row` role within a `grid`, `table` or `treegrid` element supports the `aria
 See the [ARIA 1.1 Combobox with Grid Popup Example](examples/combobox/aria1.1pattern/grid-combo.html)
 of the [Combobox](#combobox) design pattern.
 
-#### Selecting options in listboxes and trees
+#### Selecting options in listboxes and treeitems in trees
 
 `aria-selected` is a required state for the `option` role in a `listbox` element.
 When an item is selected, specify `aria-selected="true"`.
@@ -126,9 +126,12 @@ The `aria-checked` attribute allows these values:
 
 The `aria-checked` attribute is supported for these roles:
 
-* `checkbox` (including the subclass role `menuitemcheckbox`)
-* `option` (including the subclass role `treeitem`)
-* `radio` (including the subclass role `menuitemradio`)
+* `checkbox`
+* `menuitemcheckbox`
+* `option` (in a `listbox`)
+* `treeitem` (in a `tree`)
+* `radio`
+* `menuitemradio`
 * `switch`
 
 However, the `mixed` value is only supported for the `checkbox` and `menuitemcheckbox` roles.
@@ -137,7 +140,7 @@ In HTML, the `<input type="checkbox">` element where the `indeterminate` IDL att
 is by default mapped to `aria-checked="mixed"`.
 There is no way to represent `indeterminate` declaratively with markup in HTML.
 
-#### `checkbox`
+#### Checking checkboxes
 
 `aria-checked` is a required state for the `checkbox` and `menuitemcheckbox` roles.
 
@@ -150,13 +153,13 @@ that checkbox can be in the `mixed` state if the group of checkboxes have some c
 
 See the [Checkbox](#checkbox) design pattern for examples.
 
-#### `option`
+#### Checking options in listboxes and treeitems in trees
 
 The `option` role and the subclass `treeitem` role support `aria-checked`, but require the `aria-selected` state.
 
 See the previous section on `aria-selected` for examples of when it can be appropriate to use `aria-checked`.
 
-#### `radio`
+#### Checking radio buttons
 
 `aria-checked` is a required state for the `radio` and `menuitemradio` roles.
 
@@ -168,7 +171,7 @@ and `aria-checked="false"` on the other radio buttons in the group.
 
 See the [Radio Group](#radiobutton) design pattern for examples.
 
-#### `switch`
+#### Toggling a switch
 
 A switch control is similar to a checkbox.
 It does not support the `mixed` state,

From b46f1d2e849188cb52f0a4c0db2c6f44127895cf Mon Sep 17 00:00:00 2001
From: Simon Pieters <zcorpan@gmail.com>
Date: Wed, 4 Dec 2019 16:46:15 +0100
Subject: [PATCH 14/56] Reorder sections in aria-checked

---
 widget-states.md | 20 +++++++++-----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/widget-states.md b/widget-states.md
index d6a1e074d0..1a98eea7df 100644
--- a/widget-states.md
+++ b/widget-states.md
@@ -126,13 +126,11 @@ The `aria-checked` attribute allows these values:
 
 The `aria-checked` attribute is supported for these roles:
 
-* `checkbox`
-* `menuitemcheckbox`
+* `checkbox`, `menuitemcheckbox`
+* `radio`, `menuitemradio`
+* `switch`
 * `option` (in a `listbox`)
 * `treeitem` (in a `tree`)
-* `radio`
-* `menuitemradio`
-* `switch`
 
 However, the `mixed` value is only supported for the `checkbox` and `menuitemcheckbox` roles.
 
@@ -153,12 +151,6 @@ that checkbox can be in the `mixed` state if the group of checkboxes have some c
 
 See the [Checkbox](#checkbox) design pattern for examples.
 
-#### Checking options in listboxes and treeitems in trees
-
-The `option` role and the subclass `treeitem` role support `aria-checked`, but require the `aria-selected` state.
-
-See the previous section on `aria-selected` for examples of when it can be appropriate to use `aria-checked`.
-
 #### Checking radio buttons
 
 `aria-checked` is a required state for the `radio` and `menuitemradio` roles.
@@ -183,6 +175,12 @@ Use `aria-checked="false"` to indicate that the switch is off.
 
 HTML does not (yet) have a native switch control.
 
+#### Checking options in listboxes and treeitems in trees
+
+The `option` role and the subclass `treeitem` role support `aria-checked`, but require the `aria-selected` state.
+
+See the previous section on `aria-selected` for examples of when it can be appropriate to use `aria-checked`.
+
 ### `aria-pressed`
 
 The `button` role can represent a toggle button by using the `aria-pressed` attribute.

From f3145ec38119fce11ae19464e9fb36b64245da11 Mon Sep 17 00:00:00 2001
From: Simon Pieters <zcorpan@gmail.com>
Date: Wed, 4 Dec 2019 16:52:57 +0100
Subject: [PATCH 15/56] Mention a difference between aria-selected and
 aria-checked for option/treeitem

---
 widget-states.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/widget-states.md b/widget-states.md
index 1a98eea7df..34871744a2 100644
--- a/widget-states.md
+++ b/widget-states.md
@@ -96,6 +96,9 @@ For example, a `tree` widget to represent a changeable sequence of steps,
 could allow selection in order to rearrange a set of steps,
 and also allow checking and unchecking them to indicate which steps are active.
 
+A further difference between selected and checked is that `aria-selected` is either selected or not selected,
+whereas `aria-checked` supports a three states (`true`, `false`, and `mixed`).
+
 #### Selecting tabs in a tablist
 
 The `tab` role in a `tablist` element supports the `aria-selected` state,

From f7069ae2e0a17023813d6a2199fd12a7bd30f2c0 Mon Sep 17 00:00:00 2001
From: Simon Pieters <zcorpan@gmail.com>
Date: Wed, 4 Dec 2019 17:01:40 +0100
Subject: [PATCH 16/56] Include descriptions of design patterns for
 aria-expanded

---
 widget-states.md | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/widget-states.md b/widget-states.md
index 34871744a2..a8fe9b675f 100644
--- a/widget-states.md
+++ b/widget-states.md
@@ -225,15 +225,17 @@ Users of assistive technology would know from focusing the button whether it is
 
 The `aria-expanded` state is used in these design patterns:
 
-* [Accordion](#accordion)
-* [Combobox](#combobox)
-* [Disclosure](#disclosure)
-* [Listbox](#listbox)
-* [Menubar](#menu)
-* [Menu Button](#menubutton)
-* [Toolbar](#toolbar)
-* [Treegrid](#treegrid)
-* [Tree View](#TreeView)
+Design pattern             | Description
+---------------------------|-------------
+[Accordion](#accordion)    | A section With show/hide functionality
+[Combobox](#combobox)      | An input widget with an associated popup
+[Disclosure](#disclosure)  | A button that controls visibility of a section of content
+[Listbox](#listbox)        | A list of options
+[Menubar](#menu)           | A list of choices or actions
+[Menu Button](#menubutton) | A button that opens a menu
+[Toolbar](#toolbar)        | A set of controls
+[Treegrid](#treegrid)      | A hierarchical data grid consisting of tabular information that is editable or interactive
+[Tree View](#TreeView)     | A hierarchical list, possibly where items can be collapsed
 
 ### `aria-disabled`
 

From bb61cab5639a2b77d6346478f5a94c7ab84c62e7 Mon Sep 17 00:00:00 2001
From: Simon Pieters <zcorpan@gmail.com>
Date: Wed, 4 Dec 2019 17:06:28 +0100
Subject: [PATCH 17/56] Nuance for disabled widgets and focus

---
 widget-states.md | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/widget-states.md b/widget-states.md
index a8fe9b675f..adf4e9389d 100644
--- a/widget-states.md
+++ b/widget-states.md
@@ -239,11 +239,12 @@ Design pattern             | Description
 
 ### `aria-disabled`
 
-The `aria-disabled` state indicates that an element is disabled,
-so it is not editable or operable.
+The `aria-disabled` state indicates that the element is not editable or operable.
 
 Usually, disabled elements are not focusable,
 including descendants of the element.
+However, in some composite widgets, it can be desirable to keep some elements focusable.
+See the [Focusability of disabled controls](#kbd_disabled_controls) section.
 
 Use CSS to change the appearance of disabled controls,
 so that it is clear for visual users that the element is disabled.

From 56cce6d602dee72871160a519b2a7b8c970e3fab Mon Sep 17 00:00:00 2001
From: Simon Pieters <zcorpan@gmail.com>
Date: Wed, 4 Dec 2019 17:08:40 +0100
Subject: [PATCH 18/56] Consistency for how to list subroles in aria-readonly

---
 widget-states.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/widget-states.md b/widget-states.md
index adf4e9389d..927cc0528f 100644
--- a/widget-states.md
+++ b/widget-states.md
@@ -281,15 +281,15 @@ The `aria-readonly` state indicates whether an element allows its value to be ch
 
 The `aria-readonly` attribute is supported for these roles:
 
-* `checkbox` (including the subclass roles `menuitemcheckbox` and `switch`)
+* `checkbox`, `menuitemcheckbox`, `switch`
 * `combobox`
-* `grid` (including the subclass role `treegrid`)
-* `gridcell` (including the subclass roles `columnheader` and `rowheader`)
+* `grid`, `treegrid`
+* `gridcell`, `columnheader`, `rowheader`
 * `listbox`
 * `radiogroup`
 * `slider`
 * `spinbutton`
-* `textbox` (including the subclass roles `searchbox`)
+* `textbox`, `searchbox`
 * `menuitemradio`
 
 When an element is readonly, it should still be focusable and allow text selection,

From 5164637fd2557fb363a84707d37e91b0c650cf76 Mon Sep 17 00:00:00 2001
From: Simon Pieters <zcorpan@gmail.com>
Date: Wed, 4 Dec 2019 17:15:14 +0100
Subject: [PATCH 19/56] Mention how aria-readonly works on grids

---
 widget-states.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/widget-states.md b/widget-states.md
index 927cc0528f..b822ab162c 100644
--- a/widget-states.md
+++ b/widget-states.md
@@ -295,6 +295,9 @@ The `aria-readonly` attribute is supported for these roles:
 When an element is readonly, it should still be focusable and allow text selection,
 only not allow editing or otherwise changing the value or state of the element.
 
+When `aria-readonly` is applied to a `grid` or `treegrid`, the value is propagated to all `gridcells` in the widget.
+Each `gridcell` can override this propagation by setting `aria-readonly` on the `gridcell`. See the [Grid Design Pattern](#grid) for examples.
+
 HTML has the `readonly` attribute for the `input` and `textarea` elements.
 When using those elements, use the `readonly` attribute instead of `aria-readonly`.
 For example:

From aa312200d5fea8f6da8a232b04bafb9404401f29 Mon Sep 17 00:00:00 2001
From: Simon Pieters <zcorpan@gmail.com>
Date: Thu, 5 Dec 2019 20:55:52 +0100
Subject: [PATCH 20/56] Tweaks

---
 widget-states.md | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/widget-states.md b/widget-states.md
index b822ab162c..6614967622 100644
--- a/widget-states.md
+++ b/widget-states.md
@@ -7,17 +7,17 @@ or an accordion being expanded or collapsed.
 
 The following table summarizes the states discussed in this section.
 
-State           | Description | HTML equivalent
+State           | Description | HTML attribute for similar concept
 ----------------|-------------|----------------
-`aria-selected` | the element is chosen for further operation | `selected` IDL attribute on `option`
-`aria-checked`  | the element is checked, unchecked, or mixed state | `checked` IDL attribute on `input`
+`aria-selected` | the element is chosen for further operation | `selected` attribute on `option`
+`aria-checked`  | the element is checked, unchecked, or mixed state | `checked` attribute on `input`
 `aria-pressed`  | for toggle buttons: pressed or unpressed | None
 `aria-expanded` | an element owned or controlled by this element can be expanded or collapsed | None
-`aria-disabled` | the element is not editable or operable | `disabled` content attribute on form controls
-`aria-readonly` | the element is not editable, but is operable | `readonly` content attribute on `input` and `textarea`
+`aria-disabled` | the element is not editable or operable | `disabled` attribute on form controls
+`aria-readonly` | the element is not editable, but is operable | `readonly` attribute on `input` and `textarea`
 
-HTML also has built-in widgets and similar states.
-When using HTML widgets that have built-in ways to represent these states,
+HTML also has built-in form controls with similar states.
+When using HTML form controls that have built-in ways to represent these states,
 do not use ARIA states.
 Only use the HTML attributes or APIs.
 
@@ -32,7 +32,7 @@ Note: The `aria-invalid` state is not yet covered in this document, but is plann
 
 ### `aria-selected`
 
-The `aria-selected` attribute indicates whether the element is chosen for futher operation.
+The `aria-selected` attribute indicates whether the element is chosen for further operation.
 Some widgets or parts of widgets can be selected.
 A widget might allow only a single selection,
 or can allow multiple items to be selected.

From 7ee731661ee56536ce5ff25df78a04a02fbb8810 Mon Sep 17 00:00:00 2001
From: Simon Pieters <zcorpan@gmail.com>
Date: Fri, 6 Dec 2019 14:51:47 +0100
Subject: [PATCH 21/56] Convert widget-states.md to HTML

---
 aria-practices.html | 705 +++++++++++++++++++++++++++++++++++++++++++-
 widget-states.md    | 310 -------------------
 2 files changed, 698 insertions(+), 317 deletions(-)
 delete mode 100644 widget-states.md

diff --git a/aria-practices.html b/aria-practices.html
index c9d80f7c57..2c160e5b93 100644
--- a/aria-practices.html
+++ b/aria-practices.html
@@ -477,7 +477,7 @@ <h4>WAI-ARIA Roles, States, and Properties</h4>
         </ul>
       </section>
     </section>
-    
+
     <section class="widget" id="carousel">
       <h3>Carousel (Slide Show or Image Rotator)</h3>
       <p>
@@ -512,10 +512,10 @@ <h3>Carousel (Slide Show or Image Rotator)</h3>
       <section class="notoc">
         <h4>Example</h4>
         <p>
-          <a href="examples/carousel/carousel-1/carousel-1.html">Auto-Rotating Image Carousel Example:</a> A basic image carousel that demonstrates the accessibility features necessary for carousels that rotate automatically on page load. 
+          <a href="examples/carousel/carousel-1/carousel-1.html">Auto-Rotating Image Carousel Example:</a> A basic image carousel that demonstrates the accessibility features necessary for carousels that rotate automatically on page load.
         </p>
       </section>
-      
+
       <section class="notoc">
         <h4>Terms</h4>
         <p>The following terms are used to describe components of a carousel.</p>
@@ -578,7 +578,7 @@ <h5>Basic carousel elements</h5>
           <li>
             The rotation control has an accessible label provided by either its inner text or <a href="#aria-label" class="property-reference">aria-label</a>.
             The label changes to match the action the button will perform, e.g., &quot;Stop slide rotation&quot; or &quot;Start slide rotation&quot;.
-            A label that changes when the button is activated clearly communicates both that slide content can change automatically and when it is doing so. 
+            A label that changes when the button is activated clearly communicates both that slide content can change automatically and when it is doing so.
             Note that since the label changes, the rotation control does not have any states, e.g., <code>aria-pressed</code>, specified.
           </li>
           <li>Each slide container has role <a href="#group" class="role-reference">group</a> with the property <a href="#aria-roledescription" class="property-reference">aria-roledescription</a> set to <code>slide</code>.</li>
@@ -645,7 +645,7 @@ <h5>Grouped Carousel Elements</h5>
         </ul>
       </section>
     </section>
-    
+
     <section class="widget" id="checkbox">
       <h3>Checkbox</h3>
       <p>WAI-ARIA supports two types of <a href="#checkbox" class="role-reference">checkbox</a> widgets:</p>
@@ -2179,7 +2179,7 @@ <h5>For Radio Groups Not Contained in a Toolbar</h5>
           <ul>
             <li>
               <kbd>Tab</kbd> and <kbd>Shift + Tab</kbd>:
-              Move focus into and out of the radio group. 
+              Move focus into and out of the radio group.
               When focus moves into a radio group :
               <ul>
                 <li>If a radio button is checked, focus is set on the checked button.</li>
@@ -4327,6 +4327,697 @@ <h5>Intentional Key Conflicts</h5>
     </section>
   </section>
 
+  <section id="communicating_widget_states">
+    <h2>Communicating Widget States</h2>
+
+    <p>
+      ARIA can represent several different widgets, and these widgets can have a variety of states,
+      such as an option being selected,
+      a checkbox being checked or unchecked,
+      or an accordion being expanded or collapsed.
+    </p>
+
+    <p>
+      The following table summarizes the states discussed in this section.
+    </p>
+
+    <table>
+      <thead>
+        <tr>
+          <th>State</th>
+          <th>Description</th>
+          <th>HTML attribute for similar concept</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>
+            <code>aria-selected</code>
+          </td>
+          <td>the element is chosen for further operation</td>
+          <td>
+            <code>selected</code>attribute on
+            <code>option</code>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <code>aria-checked</code>
+          </td>
+          <td>the element is checked, unchecked, or mixed state</td>
+          <td>
+            <code>checked</code>attribute on
+            <code>input</code>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <code>aria-pressed</code>
+          </td>
+          <td>for toggle buttons: pressed or unpressed</td>
+          <td>None</td>
+        </tr>
+        <tr>
+          <td>
+            <code>aria-expanded</code>
+          </td>
+          <td>an element owned or controlled by this element can be expanded or collapsed</td>
+          <td>None</td>
+        </tr>
+        <tr>
+          <td>
+            <code>aria-disabled</code>
+          </td>
+          <td>the element is not editable or operable</td>
+          <td>
+            <code>disabled</code>attribute on form controls
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <code>aria-readonly</code>
+          </td>
+          <td>the element is not editable, but is operable</td>
+          <td>
+            <code>readonly</code>attribute on
+            <code>input</code>and
+            <code>textarea</code>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+
+    <p>
+      HTML also has built-in form controls with similar states.
+      When using HTML form controls that have built-in ways to represent these states,
+      do not use ARIA states.
+      Only use the HTML attributes or APIs.
+    </p>
+
+    <p>
+      This section covers what ARIA&#39;s widget states are,
+      which roles support each state,
+      how the ARIA states map to HTML&#39;s built-in widget states,
+      and how to use them.
+    </p>
+
+    <p class="note">
+      The <code>aria-hidden</code> state is discussed in a separate section. TODO link
+    </p>
+
+    <p class="note">The <code>aria-invalid</code> state is not yet covered in this document, but is planned to be part of a section about forms.
+    </p>
+
+    <section id="communicating_widget_states_aria-selected">
+      <h3><code>aria-selected</code></h3>
+
+      <p>
+        The <code>aria-selected</code> attribute indicates whether the element is chosen for further operation.
+        Some widgets or parts of widgets can be selected.
+        A widget might allow only a single selection,
+        or can allow multiple items to be selected.
+        Use <code>aria-multiselectable="true"</code> to indicate that multiple values can be selected.
+      </p>
+
+      <p>
+        The <code>aria-selected</code>attribute allows these values:
+      </p>
+
+      <ul>
+        <li><code>true</code>: the element is selectable and is selected.</li>
+
+        <li><code>false</code>: the element is selectable but is not selected.</li>
+
+        <li><code>undefined</code>(default): the element is not selectable.</li>
+      </ul>
+
+      <p>
+        Typically, selection can be changed by clicking with a pointing device,
+        touching for touchscreens,
+        or using arrow keys with a keyboard.
+        When multiple selections are possible,
+        this might be done by holding a modifier key on the keyboard while clicking with a pointing device,
+        longpressing for touchscreens,
+        or using a modifier key (e.g. Shift) while pressing arrows on a keyboard to select adjacent items,
+        or using a different modifier key (e.g. Command or Control) while pressing arrows to move focus
+        without changing the selection, and then pressing Space to select or unselect.
+        However, these paradigms might vary depending on what kind of widget it is,
+        and the conventions might be different depending on the kind of device and host operating system.
+      </p>
+
+      <p>
+        The <code>aria-selected</code> attribute is supported in these widgets:
+      </p>
+
+      <table>
+        <thead>
+          <tr>
+            <th>Widget</th>
+            <th>Roles in the widget where
+              <code>aria-selected</code>applies
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>
+              <code>grid</code>,
+              <code>treegrid</code>
+            </td>
+            <td>
+              <code>row</code>,
+              <code>gridcell</code>,
+              <code>columnheader</code>,
+              <code>rowheader</code>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <code>listbox</code>
+            </td>
+            <td>
+              <code>option</code>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <code>tree</code>
+            </td>
+            <td>
+              <code>treeitem</code>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <code>tablist</code>
+            </td>
+            <td>
+              <code>tab</code>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+
+      <section id="communicating_widget_states_selecting_rows_and_cells">
+        <h4>Selecting rows and cells in <code>grid</code> and <code>treegrid</code></h4>
+
+        <p>A <code>gridcell</code> in a <code>grid</code> or <code>treegrid</code> supports the <code>aria-selected</code> state.
+          The widget could support selecting one or multiple cells.
+        </p>
+
+        <p>
+          TODO example.
+        </p>
+
+        <p>
+          The <code>row</code> role within a <code>grid</code>, <code>table</code> or <code>treegrid</code> element supports the <code>aria-selected</code> state.
+        </p>
+
+        <p>
+          See the <a href="examples/combobox/aria1.1pattern/grid-combo.html">ARIA 1.1 Combobox with Grid Popup Example</a>
+          of the <a href="#combobox">Combobox</a> design pattern.
+        </p>
+      </section>
+
+      <section id="communicating_widget_states_selecting_options">
+        <h4>Selecting options in listboxes and treeitems in trees</h4>
+
+        <p>
+          <code>aria-selected</code> is a required state for the <code>option</code> role in a <code>listbox</code>element.
+          When an item is selected, specify <code>aria-selected="true"</code>.
+          When an item is not selected, specify <code>aria-selected="false"</code>;
+          do not omit the attribute.
+        </p>
+
+        <p>
+          See the <a href="#combobox">Combobox</a> and the <a href="#Listbox">Listbox</a> design patterns for examples.
+        </p>
+
+        <p>
+          The <code>option</code>role and the subclass role <code>treeitem</code> support both <code>aria-selected</code> and <code>aria-checked</code>.
+          In most cases, using only <code>aria-selected</code> is the right choice.
+          Do not add both <code>aria-selected</code> and <code>aria-checked</code> "just in case",
+          since that would increase verbosity for assistive technology users and could cause unnecessary confusion.
+        </p>
+
+        <p>
+          In rare cases, a widget could support both selection and checkedness to represent orthogonal states,
+          although that could be complex and might be confusing for users.
+          For example, a <code>tree</code> widget to represent a changeable sequence of steps,
+          could allow selection in order to rearrange a set of steps,
+          and also allow checking and unchecking them to indicate which steps are active.
+        </p>
+
+        <p>
+          A further difference between selected and checked is that
+          <code>aria-selected</code> is either selected or not selected,
+          whereas <code>aria-checked</code> supports a three states
+          (<code>true</code>, <code>false</code>, and <code>mixed</code>).
+        </p>
+      </section>
+
+      <section id="communicating_widget_states_selecting_tabs">
+        <h4>Selecting tabs in a tablist</h4>
+
+        <p>
+          The <code>tab</code> role in a <code>tablist</code> element supports the <code>aria-selected</code> state,
+          to indicate which tab is active in a tab panel.
+        </p>
+
+        <p>
+          See the <a href="#tabpanel">Tabs</a> design pattern for examples.
+        </p>
+      </section>
+
+      <section id="communicating_widget_states_html_selection">
+        <h4>HTML elements that support selection</h4>
+
+        <p>
+          The HTML <code>select</code> element allows selection of either a single item or multiple items,
+          depending on the attributes on the <code>select</code>element.
+        </p>
+
+        <p>
+          Default selection can be specified with the <code>selected</code>attribute on the <code>option</code>element.
+        </p>
+
+        <p>
+          The user can change the selection, but this is not represented with any attributes.
+          Instead, there are DOM APIs to read and mutate the selection state from script.
+        </p>
+      </section>
+    </section>
+
+    <section id="communicating_widget_states_aria-checked">
+      <h3><code>aria-checked</code></h3>
+
+      <p>
+        The <code>aria-checked</code> attribute indicates whether the element is checked.
+      </p>
+
+      <p>
+        The <code>aria-checked</code> attribute allows these values:
+      </p>
+
+      <ul>
+        <li><code>true</code>: the element is supports being checked and is checked.</li>
+
+        <li><code>false</code>: the element is supports being checked but is not checked.</li>
+
+        <li><code>mixed</code>: the element is supports being checked and is in the mixed state for a tri-state checkbox.</li>
+
+        <li><code>undefined</code>(default): the element does not support being checked.</li>
+      </ul>
+
+      <p>
+        The <code>aria-checked</code>attribute is supported for these roles:
+      </p>
+
+      <ul>
+        <li><code>checkbox</code>, <code>menuitemcheckbox</code></li>
+
+        <li><code>radio</code>, <code>menuitemradio</code></li>
+
+        <li><code>switch</code></li>
+
+        <li><code>option</code> (in a <code>listbox</code>)</li>
+
+        <li><code>treeitem</code> (in a <code>tree</code>)</li>
+      </ul>
+
+      <p>
+        However, the <code>mixed</code> value is only supported for the <code>checkbox</code> and <code>menuitemcheckbox</code> roles.
+      </p>
+
+      <p>
+        In HTML, the <code>&lt;input type="checkbox"></code>element where the
+        <code>indeterminate</code> IDL attribute is set to <code>true</code> is by default mapped to
+        <code>aria-checked="mixed"</code>.
+        There is no way to represent <code>indeterminate</code> declaratively with markup in HTML.
+      </p>
+
+      <section id="communicating_widget_states_checking_checkboxes">
+        <h4>Checking checkboxes</h4>
+
+        <p>
+          <code>aria-checked</code> is a required state for the <code>checkbox</code> and <code>menuitemcheckbox</code> roles.
+        </p>
+
+        <p>
+          Set <code>aria-checked="true"</code> when the checkbox is checked,
+          and <code>aria-checked="false"</code>when it is unchecked.
+        </p>
+
+        <p>
+          A checkbox can support a third <code>mixed</code>state.
+          For example, if there is a group of checkboxes and one checkbox allows checking or unchecking the entire group,
+          that checkbox can be in the <code>mixed</code> state if the group of checkboxes have some checked and some unchecked.
+        </p>
+
+        <p>
+          See the <a href="#checkbox">Checkbox</a> design pattern for examples.
+        </p>
+      </section>
+
+      <section id="communicating_widget_states_checking_radio_buttons">
+        <h4>Checking radio buttons</h4>
+
+        <p>
+          <code>aria-checked</code> is a required state for the <code>radio</code> and <code>menuitemradio</code> roles.
+        </p>
+
+        <p>
+          A radio button usually participates in a group of radio buttons,
+          where checking one radio button unchecks the other radio buttons in the group.
+        </p>
+
+        <p>
+          Use <code>aria-checked="true"</code>on the radio button that is checked,
+          and <code>aria-checked="false"</code>on the other radio buttons in the group.
+        </p>
+
+        <p>
+          See the <a href="#radiobutton">Radio Group</a>design pattern for examples.
+        </p>
+      </section>
+
+      <section id="communicating_widget_states_toggling_a_switch">
+        <h4>Toggling a switch</h4>
+
+        <p>
+          A switch control is similar to a checkbox.
+          It does not support the <code>mixed</code>state,
+          and it is said to be "on" or "off" rather than "checked" or "unchecked".
+          However, the <code>aria-checked</code>attribute is still used to indicate its state.
+        </p>
+
+        <p>
+          Use <code>aria-checked="true"</code>to indicate that the switch is on.
+          Use <code>aria-checked="false"</code>to indicate that the switch is off.
+        </p>
+
+        <p>
+          HTML does not (yet) have a native switch control.
+        </p>
+      </section>
+
+      <section id="communicating_widget_states_checking_options">
+        <h4>Checking options in listboxes and treeitems in trees</h4>
+
+        <p>
+          The <code>option</code> role and the subclass <code>treeitem</code> role support <code>aria-checked</code>,
+          but require the <code>aria-selected</code> state.
+        </p>
+
+        <p>
+          See the previous section on <code>aria-selected</code> for examples of when it can be appropriate to use <code>aria-checked</code>.
+        </p>
+      </section>
+    </section>
+
+    <section id="communicating_widget_states_aria-pressed">
+      <h3><code>aria-pressed</code></h3>
+
+      <p>
+        The <code>button</code> role can represent a toggle button by using the <code>aria-pressed</code> attribute.
+        When the <code>aria-pressed</code>attribute is present and has a non-empty value,
+        the button is a toggle button.
+        A toggle button is a two-state button, either pressed or unpressed.
+      </p>
+
+      <p>
+        The <code>true</code> value indicates that the button is pressed, and
+        the <code>false</code>value indicates that the button is unpressed.
+      </p>
+
+      <p>
+        HTML does not have a native way to represent toggle buttons,
+        but <code>aria-pressed</code> can be used with the HTML <code>button</code> element.
+      </p>
+
+      <pre><code class="lang-html">&lt;button aria-pressed="false">Mute&lt;/button></code></pre>
+
+      <p>
+        See the <a href="#button">Button</a> design pattern for examples.
+      </p>
+    </section>
+
+
+    <section id="communicating_widget_states_aria-expanded">
+      <h3><code>aria-expanded</code></h3>
+
+      <p>
+        The <code>aria-expanded</code> attribute informs assistive technology users that an interactive element can be expanded,
+        meaning it owns or controls another element that can be collapsed or expanded.
+      </p>
+
+      <p>
+        For example, a button can toggle the visibility of some content, as in an accordion.
+      </p>
+
+      <pre><code class="lang-html">&lt;h2>&lt;button aria-controls="spoiler" aria-expanded="false">Spoil the end&lt;/button>&lt;/h2>
+      &lt;div id="spoiler">
+       &lt;p>Ultimately, all stars burn out and the black holes evaporate from Hawking radiation,
+       and the universe reaches maximum entropy.&lt;/p>
+      &lt;/div></code></pre>
+
+      <p>Clicking the button shows or hides the "spoiler" element with JavaScript,
+        and also changes the value of <code>aria-expanded</code> to <code>true</code> when showing,
+        and <code>false</code> when hiding.
+        Users of assistive technology would know from focusing the button whether it is collapsed or expanded.
+      </p>
+
+      <p>
+        The <code>aria-expanded</code> state is used in these design patterns:
+      </p>
+
+      <table>
+        <thead>
+          <tr>
+            <th>Design pattern</th>
+            <th>Description</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>
+              <a href="#accordion">Accordion</a>
+            </td>
+            <td>A section With show/hide functionality</td>
+          </tr>
+          <tr>
+            <td>
+              <a href="#combobox">Combobox</a>
+            </td>
+            <td>An input widget with an associated popup</td>
+          </tr>
+          <tr>
+            <td>
+              <a href="#disclosure">Disclosure</a>
+            </td>
+            <td>A button that controls visibility of a section of content</td>
+          </tr>
+          <tr>
+            <td>
+              <a href="#listbox">Listbox</a>
+            </td>
+            <td>A list of options</td>
+          </tr>
+          <tr>
+            <td>
+              <a href="#menu">Menubar</a>
+            </td>
+            <td>A list of choices or actions</td>
+          </tr>
+          <tr>
+            <td>
+              <a href="#menubutton">Menu Button</a>
+            </td>
+            <td>A button that opens a menu</td>
+          </tr>
+          <tr>
+            <td>
+              <a href="#toolbar">Toolbar</a>
+            </td>
+            <td>A set of controls</td>
+          </tr>
+          <tr>
+            <td>
+              <a href="#treegrid">Treegrid</a>
+            </td>
+            <td>A hierarchical data grid consisting of tabular information that is editable or interactive</td>
+          </tr>
+          <tr>
+            <td>
+              <a href="#TreeView">Tree View</a>
+            </td>
+            <td>A hierarchical list, possibly where items can be collapsed</td>
+          </tr>
+        </tbody>
+      </table>
+    </section>
+
+    <section id="communicating_widget_states_aria-disabled">
+      <h3><code>aria-disabled</code></h3>
+
+      <p>
+        The <code>aria-disabled</code> state indicates that the element is not editable or operable.
+      </p>
+
+      <p>
+        Usually, disabled elements are not focusable,
+        including descendants of the element.
+        However, in some composite widgets, it can be desirable to keep some elements focusable.
+        See the <a href="#kbd_disabled_controls">Focusability of disabled controls</a> section.
+      </p>
+
+      <p>
+        Use CSS to change the appearance of disabled controls,
+        so that it is clear for visual users that the element is disabled.
+      </p>
+
+      <p>
+        The <code>aria-disabled</code>state is supported on the following roles:
+      </p>
+
+      <ul>
+        <li><code>application</code></li>
+
+        <li><code>button</code></li>
+
+        <li>
+          <code>composite</code> (including subclass roles
+          <code>grid</code>,
+          <code>combobox</code>,
+          <code>listbox</code>,
+          <code>menu</code>,
+          <code>menubar</code>,
+          <code>radiogroup</code>,
+          <code>select</code>,
+          <code>tablist</code>,
+          <code>tree</code>,
+          <code>treegrid</code>)
+        </li>
+
+        <li>
+          <code>gridcell</code> (including subclass roles
+          <code>columnheader</code> and
+          <code>rowheader</code>)
+        </li>
+
+        <li>
+          <code>group</code> (including subclass roles
+          <code>row</code>,
+          <code>toolbar</code>)
+        </li>
+
+        <li>
+          <code>input</code> (including subclass roles
+          <code>checkbox</code>,
+          <code>menuitemcheckbox</code>,
+          <code>menuitemradio</code>,
+          <code>option</code>,
+          <code>radio</code>,
+          <code>searchbox</code>,
+          <code>slider</code>,
+          <code>spinbutton</code>,
+          <code>switch</code>,
+          <code>textbox</code>,
+          <code>treeitem</code>)
+        </li>
+
+        <li><code>link</code></li>
+
+        <li><code>menuitem</code></li>
+
+        <li><code>scrollbar</code></li>
+
+        <li><code>separator</code></li>
+
+        <li><code>tab</code></li>
+      </ul>
+
+      <p>In HTML, most built-in widgets can be disabled by using the <code>disabled</code> attribute.
+        There is no need to also use <code>aria-disabled</code> in such cases.
+      </p>
+
+      <p>See the following design patterns for examples:</p>
+
+      <ul>
+        <li><a href="#accordion">Accordion (Sections With Show/Hide Functionality)</a></li>
+
+        <li><a href="#menu">Menu or Menu bar</a></li>
+
+        <li><a href="#toolbar">Toolbar</a></li>
+      </ul>
+    </section>
+
+    <section id="communicating_widget_states_aria-readonly">
+      <h3><code>aria-readonly</code></h3>
+
+      <p>
+        The <code>aria-readonly</code> state indicates whether an element allows its value to be changed.
+      </p>
+
+      <ul>
+        <li><code>true</code>: the element does not allow its value to be changed, but is otherwise operable.</li>
+
+        <li><code>false</code>: the element allows the value to be changed.</li>
+      </ul>
+
+      <p>
+        The <code>aria-readonly</code> attribute is supported for these roles:
+      </p>
+
+      <ul>
+        <li><code>checkbox</code>, <code>menuitemcheckbox</code>, <code>switch</code></li>
+
+        <li><code>combobox</code></li>
+
+        <li><code>grid</code>, <code>treegrid</code></li>
+
+        <li><code>gridcell</code>, <code>columnheader</code>, <code>rowheader</code></li>
+
+        <li><code>listbox</code></li>
+
+        <li><code>radiogroup</code></li>
+
+        <li><code>slider</code></li>
+
+        <li><code>spinbutton</code></li>
+
+        <li><code>textbox</code>, <code>searchbox</code></li>
+
+        <li><code>menuitemradio</code></li>
+      </ul>
+
+      <p>
+        When an element is readonly, it should still be focusable and allow text selection,
+        only not allow editing or otherwise changing the value or state of the element.
+      </p>
+
+      <p>
+        When <code>aria-readonly</code> is applied to a <code>grid</code> or <code>treegrid</code>,
+        the value is propagated to all <code>gridcells</code>in the widget.
+        Each <code>gridcell</code> can override this propagation by setting
+        <code>aria-readonly</code> on the <code>gridcell</code>.
+        See the <a href="#grid">Grid Design Pattern</a>for examples.
+      </p>
+
+      <p>
+        HTML has the <code>readonly</code> attribute for the <code>input</code> and
+        <code>textarea</code>elements.
+        When using those elements, use the <code>readonly</code>attribute instead of <code>aria-readonly</code>.
+        For example:
+      </p>
+
+      <pre><code>&lt;label>
+       Address
+       &lt;textarea readonly>&lt;/textaera>
+      &lt;/label></code></pre>
+    </section>
+  </section>
+
   <section id="gridAndTableProperties">
     <h2>Grid and Table Properties</h2>
     <p>
@@ -4988,7 +5679,7 @@ <h2>Indexes</h2>
       <h2>Change History</h2>
       <p>Change history is maintained in a separate version-specific branch.</p>
     </section>
-    
+
     <section id="acknowledgements" class="appendix">
       <h2>Acknowledgements</h2>
       <section>
diff --git a/widget-states.md b/widget-states.md
deleted file mode 100644
index 6614967622..0000000000
--- a/widget-states.md
+++ /dev/null
@@ -1,310 +0,0 @@
-## Communicating Widget States
-
-ARIA can represent several different widgets, and these widgets can have a variety of states,
-such as an option being selected,
-a checkbox being checked or unchecked,
-or an accordion being expanded or collapsed.
-
-The following table summarizes the states discussed in this section.
-
-State           | Description | HTML attribute for similar concept
-----------------|-------------|----------------
-`aria-selected` | the element is chosen for further operation | `selected` attribute on `option`
-`aria-checked`  | the element is checked, unchecked, or mixed state | `checked` attribute on `input`
-`aria-pressed`  | for toggle buttons: pressed or unpressed | None
-`aria-expanded` | an element owned or controlled by this element can be expanded or collapsed | None
-`aria-disabled` | the element is not editable or operable | `disabled` attribute on form controls
-`aria-readonly` | the element is not editable, but is operable | `readonly` attribute on `input` and `textarea`
-
-HTML also has built-in form controls with similar states.
-When using HTML form controls that have built-in ways to represent these states,
-do not use ARIA states.
-Only use the HTML attributes or APIs.
-
-This section covers what ARIA's widget states are,
-which roles support each state,
-how the ARIA states map to HTML's built-in widget states,
-and how to use them.
-
-Note: The `aria-hidden` state is discussed in a separate section. TODO link
-
-Note: The `aria-invalid` state is not yet covered in this document, but is planned to be part of a section about forms.
-
-### `aria-selected`
-
-The `aria-selected` attribute indicates whether the element is chosen for further operation.
-Some widgets or parts of widgets can be selected.
-A widget might allow only a single selection,
-or can allow multiple items to be selected.
-Use `aria-multiselectable="true"` to indicate that multiple values can be selected.
-
-The `aria-selected` attribute allows these values:
-
-* `true`: the element is selectable and is selected.
-* `false`: the element is selectable but is not selected.
-* `undefined` (default): the element is not selectable.
-
-Typically, selection can be changed by clicking with a pointing device,
-touching for touchscreens,
-or using arrow keys with a keyboard.
-When multiple selections are possible,
-this might be done by holding a modifier key on the keyboard while clicking with a pointing device,
-longpressing for touchscreens,
-or using a modifier key (e.g. Shift) while pressing arrows on a keyboard to select adjacent items,
-or using a different modifier key (e.g. Command or Control) while pressing arrows to move focus without changing the selection, and then pressing Space to select or unselect.
-However, these paradigms might vary depending on what kind of widget it is,
-and the conventions might be different depending on the kind of device and host operating system.
-
-The `aria-selected` attribute is supported in these widgets:
-
-Widget             | Roles in the widget where `aria-selected` applies
--------------------|-------------------
-`grid`, `treegrid` | `row`, `gridcell`, `columnheader`, `rowheader`
-`listbox`          | `option`
-`tree`             | `treeitem`
-`tablist`          | `tab`
-
-#### Selecting rows and cells in `grid` and `treegrid`
-
-A `gridcell` in a `grid` or `treegrid` supports the `aria-selected` state.
-The widget could support selecting one or multiple cells.
-
-TODO example.
-
-The `row` role within a `grid`, `table` or `treegrid` element supports the `aria-selected` state.
-
-See the [ARIA 1.1 Combobox with Grid Popup Example](examples/combobox/aria1.1pattern/grid-combo.html)
-of the [Combobox](#combobox) design pattern.
-
-#### Selecting options in listboxes and treeitems in trees
-
-`aria-selected` is a required state for the `option` role in a `listbox` element.
-When an item is selected, specify `aria-selected="true"`.
-When an item is not selected, specify `aria-selected="false"`;
-do not omit the attribute.
-
-See the [Combobox](#combobox) and the [Listbox](#Listbox) design patterns for examples.
-
-The `option` role and the subclass role `treeitem` support both `aria-selected` and `aria-checked`.
-In most cases, using only `aria-selected` is the right choice.
-Do not add both `aria-selected` and `aria-checked` "just in case",
-since that would increase verbosity for assistive technology users and could cause unnecessary confusion.
-
-In rare cases, a widget could support both selection and checkedness to represent orthogonal states,
-although that could be complex and might be confusing for users.
-For example, a `tree` widget to represent a changeable sequence of steps,
-could allow selection in order to rearrange a set of steps,
-and also allow checking and unchecking them to indicate which steps are active.
-
-A further difference between selected and checked is that `aria-selected` is either selected or not selected,
-whereas `aria-checked` supports a three states (`true`, `false`, and `mixed`).
-
-#### Selecting tabs in a tablist
-
-The `tab` role in a `tablist` element supports the `aria-selected` state,
-to indicate which tab is active in a tab panel.
-
-See the [Tabs](#tabpanel) design pattern for examples.
-
-#### HTML elements that support selection
-
-The HTML `select` element allows selection of either a single item
-or multiple items, depending on the attributes on the `select` element.
-
-Default selection can be specified with the `selected` attribute on the `option` element.
-
-The user can change the selection, but this is not represented with any attributes.
-Instead, there are DOM APIs to read and mutate the selection state from script.
-
-### `aria-checked`
-
-The `aria-checked` attribute indicates whether the element is checked.
-
-The `aria-checked` attribute allows these values:
-
-* `true`: the element is supports being checked and is checked.
-* `false`: the element is supports being checked but is not checked.
-* `mixed`: the element is supports being checked and is in the mixed state for a tri-state checkbox.
-* `undefined` (default): the element does not support being checked.
-
-The `aria-checked` attribute is supported for these roles:
-
-* `checkbox`, `menuitemcheckbox`
-* `radio`, `menuitemradio`
-* `switch`
-* `option` (in a `listbox`)
-* `treeitem` (in a `tree`)
-
-However, the `mixed` value is only supported for the `checkbox` and `menuitemcheckbox` roles.
-
-In HTML, the `<input type="checkbox">` element where the `indeterminate` IDL attribute is set to `true`
-is by default mapped to `aria-checked="mixed"`.
-There is no way to represent `indeterminate` declaratively with markup in HTML.
-
-#### Checking checkboxes
-
-`aria-checked` is a required state for the `checkbox` and `menuitemcheckbox` roles.
-
-Set `aria-checked="true"` when the checkbox is checked,
-and `aria-checked="false"` when it is unchecked.
-
-A checkbox can support a third `mixed` state.
-For example, if there is a group of checkboxes and one checkbox allows checking or unchecking the entire group,
-that checkbox can be in the `mixed` state if the group of checkboxes have some checked and some unchecked.
-
-See the [Checkbox](#checkbox) design pattern for examples.
-
-#### Checking radio buttons
-
-`aria-checked` is a required state for the `radio` and `menuitemradio` roles.
-
-A radio button usually participates in a group of radio buttons,
-where checking one radio button unchecks the other radio buttons in the group.
-
-Use `aria-checked="true"` on the radio button that is checked,
-and `aria-checked="false"` on the other radio buttons in the group.
-
-See the [Radio Group](#radiobutton) design pattern for examples.
-
-#### Toggling a switch
-
-A switch control is similar to a checkbox.
-It does not support the `mixed` state,
-and it is said to be "on" or "off" rather than "checked" or "unchecked".
-However, the `aria-checked` attribute is still used to indicate its state.
-
-Use `aria-checked="true"` to indicate that the switch is on.
-Use `aria-checked="false"` to indicate that the switch is off.
-
-HTML does not (yet) have a native switch control.
-
-#### Checking options in listboxes and treeitems in trees
-
-The `option` role and the subclass `treeitem` role support `aria-checked`, but require the `aria-selected` state.
-
-See the previous section on `aria-selected` for examples of when it can be appropriate to use `aria-checked`.
-
-### `aria-pressed`
-
-The `button` role can represent a toggle button by using the `aria-pressed` attribute.
-When the `aria-pressed` attribute is present and has a non-empty value,
-the button is a toggle button.
-A toggle button is a two-state button, either pressed or unpressed.
-
-The `true` value indicates that the button is pressed, and
-the `false` value indicates that the button is unpressed.
-
-HTML does not have a native way to represent toggle buttons,
-but `aria-pressed` can be used with the HTML `button` element.
-
-```html
-<button aria-pressed="false">Mute</button>
-```
-
-See the [Button](#button) design pattern for examples.
-
-### `aria-expanded`
-
-The `aria-expanded` attribute informs assistive technology users that an interactive element can be expanded,
-meaning it owns or controls another element that can be collapsed or expanded.
-
-For example, a button can toggle the visibility of some content, as in an accordion.
-
-```html
-<h2><button aria-controls="spoiler" aria-expanded="false">Spoil the end</button></h2>
-<div id="spoiler">
- <p>Ultimately, all stars burn out and the black holes evaporate from Hawking radiation,
- and the universe reaches maximum entropy.</p>
-</div>
-```
-
-Clicking the button shows or hides the "spoiler" element with JavaScript,
-and also changes the value of `aria-expanded` to `true` when showing,
-and `false` when hiding.
-Users of assistive technology would know from focusing the button whether it is collapsed or expanded.
-
-The `aria-expanded` state is used in these design patterns:
-
-Design pattern             | Description
----------------------------|-------------
-[Accordion](#accordion)    | A section With show/hide functionality
-[Combobox](#combobox)      | An input widget with an associated popup
-[Disclosure](#disclosure)  | A button that controls visibility of a section of content
-[Listbox](#listbox)        | A list of options
-[Menubar](#menu)           | A list of choices or actions
-[Menu Button](#menubutton) | A button that opens a menu
-[Toolbar](#toolbar)        | A set of controls
-[Treegrid](#treegrid)      | A hierarchical data grid consisting of tabular information that is editable or interactive
-[Tree View](#TreeView)     | A hierarchical list, possibly where items can be collapsed
-
-### `aria-disabled`
-
-The `aria-disabled` state indicates that the element is not editable or operable.
-
-Usually, disabled elements are not focusable,
-including descendants of the element.
-However, in some composite widgets, it can be desirable to keep some elements focusable.
-See the [Focusability of disabled controls](#kbd_disabled_controls) section.
-
-Use CSS to change the appearance of disabled controls,
-so that it is clear for visual users that the element is disabled.
-
-The `aria-disabled` state is supported on the following roles:
-
-* `application`
-* `button`
-* `composite` (including subclass roles `grid`, `combobox`, `listbox`, `menu`, `menubar`, `radiogroup`, `select`, `tablist`, `tree`, `treegrid`)
-* `gridcell` (including subclass roles `columnheader` and `rowheader`)
-* `group` (including subclass roles `row`, `toolbar`)
-* `input` (including subclass roles `checkbox`, `menuitemcheckbox`, `menuitemradio`, `option`, `radio`, `searchbox`, `slider`, `spinbutton`, `switch`, `textbox`, `treeitem`)
-* `link`
-* `menuitem`
-* `scrollbar`
-* `separator`
-* `tab`
-
-In HTML, most built-in widgets can be disabled by using the `disabled` attribute.
-There is no need to also use `aria-disabled` in such cases.
-
-See the following design patterns for examples:
-
-* [Accordion (Sections With Show/Hide Functionality)](#accordion)
-* [Menu or Menu bar](#menu)
-* [Toolbar](#toolbar)
-
-### `aria-readonly`
-
-The `aria-readonly` state indicates whether an element allows its value to be changed.
-
-* `true`: the element does not allow its value to be changed, but is otherwise operable.
-* `false`: the element allows the value to be changed.
-
-The `aria-readonly` attribute is supported for these roles:
-
-* `checkbox`, `menuitemcheckbox`, `switch`
-* `combobox`
-* `grid`, `treegrid`
-* `gridcell`, `columnheader`, `rowheader`
-* `listbox`
-* `radiogroup`
-* `slider`
-* `spinbutton`
-* `textbox`, `searchbox`
-* `menuitemradio`
-
-When an element is readonly, it should still be focusable and allow text selection,
-only not allow editing or otherwise changing the value or state of the element.
-
-When `aria-readonly` is applied to a `grid` or `treegrid`, the value is propagated to all `gridcells` in the widget.
-Each `gridcell` can override this propagation by setting `aria-readonly` on the `gridcell`. See the [Grid Design Pattern](#grid) for examples.
-
-HTML has the `readonly` attribute for the `input` and `textarea` elements.
-When using those elements, use the `readonly` attribute instead of `aria-readonly`.
-For example:
-
-```
-<label>
- Address
- <textarea readonly></textaera>
-</label>
-```

From 386d0e6fe958889c96bd415e236468c7429994c9 Mon Sep 17 00:00:00 2001
From: Carolyn MacLeod <Carolyn_MacLeod@ca.ibm.com>
Date: Tue, 18 Feb 2020 22:47:42 -0500
Subject: [PATCH 22/56] add missing space

---
 aria-practices.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/aria-practices.html b/aria-practices.html
index 40008ff6c5..3b58ec8e25 100644
--- a/aria-practices.html
+++ b/aria-practices.html
@@ -5990,7 +5990,7 @@ <h2>Communicating Widget States</h2>
           </td>
           <td>the element is not editable or operable</td>
           <td>
-            <code>disabled</code>attribute on form controls
+            <code>disabled</code> attribute on form controls
           </td>
         </tr>
         <tr>

From ab2d482400e036dea72094c847453a8e0ffd533b Mon Sep 17 00:00:00 2001
From: Carolyn MacLeod <Carolyn_MacLeod@ca.ibm.com>
Date: Tue, 18 Feb 2020 22:48:41 -0500
Subject: [PATCH 23/56] add missing space

---
 aria-practices.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/aria-practices.html b/aria-practices.html
index 3b58ec8e25..0f2ee1d2d9 100644
--- a/aria-practices.html
+++ b/aria-practices.html
@@ -6074,7 +6074,7 @@ <h3><code>aria-selected</code></h3>
           <tr>
             <th>Widget</th>
             <th>Roles in the widget where
-              <code>aria-selected</code>applies
+              <code>aria-selected</code> applies
             </th>
           </tr>
         </thead>

From 2d79605cc2e632379c740f8ef45ae6e03cac29cf Mon Sep 17 00:00:00 2001
From: Carolyn MacLeod <Carolyn_MacLeod@ca.ibm.com>
Date: Tue, 18 Feb 2020 22:49:10 -0500
Subject: [PATCH 24/56] add missing space

---
 aria-practices.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/aria-practices.html b/aria-practices.html
index 0f2ee1d2d9..bd1f74f1e4 100644
--- a/aria-practices.html
+++ b/aria-practices.html
@@ -6143,7 +6143,7 @@ <h4>Selecting rows and cells in <code>grid</code> and <code>treegrid</code></h4>
         <h4>Selecting options in listboxes and treeitems in trees</h4>
 
         <p>
-          <code>aria-selected</code> is a required state for the <code>option</code> role in a <code>listbox</code>element.
+          <code>aria-selected</code> is a required state for the <code>option</code> role in a <code>listbox</code> element.
           When an item is selected, specify <code>aria-selected="true"</code>.
           When an item is not selected, specify <code>aria-selected="false"</code>;
           do not omit the attribute.

From 43e2ec49e8c6813effa8534c995b1c4d1260ffa4 Mon Sep 17 00:00:00 2001
From: Carolyn MacLeod <Carolyn_MacLeod@ca.ibm.com>
Date: Tue, 18 Feb 2020 22:49:54 -0500
Subject: [PATCH 25/56] add missing space

---
 aria-practices.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/aria-practices.html b/aria-practices.html
index bd1f74f1e4..d1e1b996df 100644
--- a/aria-practices.html
+++ b/aria-practices.html
@@ -6154,7 +6154,7 @@ <h4>Selecting options in listboxes and treeitems in trees</h4>
         </p>
 
         <p>
-          The <code>option</code>role and the subclass role <code>treeitem</code> support both <code>aria-selected</code> and <code>aria-checked</code>.
+          The <code>option</code> role and the subclass role <code>treeitem</code> support both <code>aria-selected</code> and <code>aria-checked</code>.
           In most cases, using only <code>aria-selected</code> is the right choice.
           Do not add both <code>aria-selected</code> and <code>aria-checked</code> "just in case",
           since that would increase verbosity for assistive technology users and could cause unnecessary confusion.

From 4bb12d05be81244972fc34904baad9c81ed9189a Mon Sep 17 00:00:00 2001
From: Carolyn MacLeod <Carolyn_MacLeod@ca.ibm.com>
Date: Tue, 18 Feb 2020 22:50:35 -0500
Subject: [PATCH 26/56] add missing space

---
 aria-practices.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/aria-practices.html b/aria-practices.html
index d1e1b996df..a7bb7357f5 100644
--- a/aria-practices.html
+++ b/aria-practices.html
@@ -6194,7 +6194,7 @@ <h4>HTML elements that support selection</h4>
 
         <p>
           The HTML <code>select</code> element allows selection of either a single item or multiple items,
-          depending on the attributes on the <code>select</code>element.
+          depending on the attributes on the <code>select</code> element.
         </p>
 
         <p>

From bbfca57e2d9e74cf20684e899c50bf8ec28808df Mon Sep 17 00:00:00 2001
From: Carolyn MacLeod <Carolyn_MacLeod@ca.ibm.com>
Date: Tue, 18 Feb 2020 22:52:47 -0500
Subject: [PATCH 27/56] delete extra word

---
 aria-practices.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/aria-practices.html b/aria-practices.html
index a7bb7357f5..6975d05d5f 100644
--- a/aria-practices.html
+++ b/aria-practices.html
@@ -6222,7 +6222,7 @@ <h3><code>aria-checked</code></h3>
       <ul>
         <li><code>true</code>: the element is supports being checked and is checked.</li>
 
-        <li><code>false</code>: the element is supports being checked but is not checked.</li>
+        <li><code>false</code>: the element supports being checked but is not checked.</li>
 
         <li><code>mixed</code>: the element is supports being checked and is in the mixed state for a tri-state checkbox.</li>
 

From ae53811a251b5afa763488a1a16e2d6fe3cdb655 Mon Sep 17 00:00:00 2001
From: Carolyn MacLeod <Carolyn_MacLeod@ca.ibm.com>
Date: Tue, 18 Feb 2020 22:53:13 -0500
Subject: [PATCH 28/56] add missing space

---
 aria-practices.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/aria-practices.html b/aria-practices.html
index 6975d05d5f..943577f5ee 100644
--- a/aria-practices.html
+++ b/aria-practices.html
@@ -6226,7 +6226,7 @@ <h3><code>aria-checked</code></h3>
 
         <li><code>mixed</code>: the element is supports being checked and is in the mixed state for a tri-state checkbox.</li>
 
-        <li><code>undefined</code>(default): the element does not support being checked.</li>
+        <li><code>undefined</code> (default): the element does not support being checked.</li>
       </ul>
 
       <p>

From 5a6a5d63ac7dd7fa5fbcd4c707ac47ee51941f2a Mon Sep 17 00:00:00 2001
From: Carolyn MacLeod <Carolyn_MacLeod@ca.ibm.com>
Date: Tue, 18 Feb 2020 22:53:39 -0500
Subject: [PATCH 29/56] add missing space

---
 aria-practices.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/aria-practices.html b/aria-practices.html
index 943577f5ee..a281b370b7 100644
--- a/aria-practices.html
+++ b/aria-practices.html
@@ -6230,7 +6230,7 @@ <h3><code>aria-checked</code></h3>
       </ul>
 
       <p>
-        The <code>aria-checked</code>attribute is supported for these roles:
+        The <code>aria-checked</code> attribute is supported for these roles:
       </p>
 
       <ul>

From 1717e79206ebf307b8c49a72e2c5e7de15bc76f0 Mon Sep 17 00:00:00 2001
From: Carolyn MacLeod <Carolyn_MacLeod@ca.ibm.com>
Date: Tue, 18 Feb 2020 22:54:13 -0500
Subject: [PATCH 30/56] add missing space

---
 aria-practices.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/aria-practices.html b/aria-practices.html
index a281b370b7..f6bc9d25d8 100644
--- a/aria-practices.html
+++ b/aria-practices.html
@@ -6250,7 +6250,7 @@ <h3><code>aria-checked</code></h3>
       </p>
 
       <p>
-        In HTML, the <code>&lt;input type="checkbox"></code>element where the
+        In HTML, the <code>&lt;input type="checkbox"></code> element where the
         <code>indeterminate</code> IDL attribute is set to <code>true</code> is by default mapped to
         <code>aria-checked="mixed"</code>.
         There is no way to represent <code>indeterminate</code> declaratively with markup in HTML.

From 1ba9b3cfbe73c3bb2ad79e0cb6668199f4c38558 Mon Sep 17 00:00:00 2001
From: Carolyn MacLeod <Carolyn_MacLeod@ca.ibm.com>
Date: Tue, 18 Feb 2020 22:54:42 -0500
Subject: [PATCH 31/56] add missing space

---
 aria-practices.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/aria-practices.html b/aria-practices.html
index f6bc9d25d8..1a1ce41227 100644
--- a/aria-practices.html
+++ b/aria-practices.html
@@ -6265,7 +6265,7 @@ <h4>Checking checkboxes</h4>
 
         <p>
           Set <code>aria-checked="true"</code> when the checkbox is checked,
-          and <code>aria-checked="false"</code>when it is unchecked.
+          and <code>aria-checked="false"</code> when it is unchecked.
         </p>
 
         <p>

From 24bb485ad429aa43b611555b21e69b96d55d2b0b Mon Sep 17 00:00:00 2001
From: Carolyn MacLeod <Carolyn_MacLeod@ca.ibm.com>
Date: Tue, 18 Feb 2020 22:55:04 -0500
Subject: [PATCH 32/56] add missing space

---
 aria-practices.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/aria-practices.html b/aria-practices.html
index 1a1ce41227..9bd588129b 100644
--- a/aria-practices.html
+++ b/aria-practices.html
@@ -6292,7 +6292,7 @@ <h4>Checking radio buttons</h4>
         </p>
 
         <p>
-          Use <code>aria-checked="true"</code>on the radio button that is checked,
+          Use <code>aria-checked="true"</code> on the radio button that is checked,
           and <code>aria-checked="false"</code>on the other radio buttons in the group.
         </p>
 

From 8606c352e7f3bfcd0995e1cc6f87f0209a1723ac Mon Sep 17 00:00:00 2001
From: Carolyn MacLeod <Carolyn_MacLeod@ca.ibm.com>
Date: Tue, 18 Feb 2020 22:55:24 -0500
Subject: [PATCH 33/56] add missing space

---
 aria-practices.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/aria-practices.html b/aria-practices.html
index 9bd588129b..8d6288d200 100644
--- a/aria-practices.html
+++ b/aria-practices.html
@@ -6293,7 +6293,7 @@ <h4>Checking radio buttons</h4>
 
         <p>
           Use <code>aria-checked="true"</code> on the radio button that is checked,
-          and <code>aria-checked="false"</code>on the other radio buttons in the group.
+          and <code>aria-checked="false"</code> on the other radio buttons in the group.
         </p>
 
         <p>

From f478fd3b704c93950edacf01690d957e74b35e6d Mon Sep 17 00:00:00 2001
From: Carolyn MacLeod <Carolyn_MacLeod@ca.ibm.com>
Date: Tue, 18 Feb 2020 22:55:44 -0500
Subject: [PATCH 34/56] add missing space

---
 aria-practices.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/aria-practices.html b/aria-practices.html
index 8d6288d200..b544257eb1 100644
--- a/aria-practices.html
+++ b/aria-practices.html
@@ -6297,7 +6297,7 @@ <h4>Checking radio buttons</h4>
         </p>
 
         <p>
-          See the <a href="#radiobutton">Radio Group</a>design pattern for examples.
+          See the <a href="#radiobutton">Radio Group</a> design pattern for examples.
         </p>
       </section>
 

From 13f56cd3223caa315667d2669054a0bcfca30ff5 Mon Sep 17 00:00:00 2001
From: Carolyn MacLeod <Carolyn_MacLeod@ca.ibm.com>
Date: Tue, 18 Feb 2020 22:56:05 -0500
Subject: [PATCH 35/56] add missing space

---
 aria-practices.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/aria-practices.html b/aria-practices.html
index b544257eb1..3756d21c79 100644
--- a/aria-practices.html
+++ b/aria-practices.html
@@ -6306,7 +6306,7 @@ <h4>Toggling a switch</h4>
 
         <p>
           A switch control is similar to a checkbox.
-          It does not support the <code>mixed</code>state,
+          It does not support the <code>mixed</code> state,
           and it is said to be "on" or "off" rather than "checked" or "unchecked".
           However, the <code>aria-checked</code>attribute is still used to indicate its state.
         </p>

From 50b9bf610d9479a3ac57489402b5ef903473e4e2 Mon Sep 17 00:00:00 2001
From: Carolyn MacLeod <Carolyn_MacLeod@ca.ibm.com>
Date: Tue, 18 Feb 2020 22:56:33 -0500
Subject: [PATCH 36/56] add missing space

---
 aria-practices.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/aria-practices.html b/aria-practices.html
index 3756d21c79..407684915e 100644
--- a/aria-practices.html
+++ b/aria-practices.html
@@ -6308,7 +6308,7 @@ <h4>Toggling a switch</h4>
           A switch control is similar to a checkbox.
           It does not support the <code>mixed</code> state,
           and it is said to be "on" or "off" rather than "checked" or "unchecked".
-          However, the <code>aria-checked</code>attribute is still used to indicate its state.
+          However, the <code>aria-checked</code> attribute is still used to indicate its state.
         </p>
 
         <p>

From 60ee84e31140fb983bc9c13808a48b5140583a20 Mon Sep 17 00:00:00 2001
From: Carolyn MacLeod <Carolyn_MacLeod@ca.ibm.com>
Date: Tue, 18 Feb 2020 22:56:56 -0500
Subject: [PATCH 37/56] add missing space

---
 aria-practices.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/aria-practices.html b/aria-practices.html
index 407684915e..ff8c67bf45 100644
--- a/aria-practices.html
+++ b/aria-practices.html
@@ -6312,7 +6312,7 @@ <h4>Toggling a switch</h4>
         </p>
 
         <p>
-          Use <code>aria-checked="true"</code>to indicate that the switch is on.
+          Use <code>aria-checked="true"</code> to indicate that the switch is on.
           Use <code>aria-checked="false"</code>to indicate that the switch is off.
         </p>
 

From c8e85c381c1ac63900756145408846c0da16b1ca Mon Sep 17 00:00:00 2001
From: Carolyn MacLeod <Carolyn_MacLeod@ca.ibm.com>
Date: Tue, 18 Feb 2020 22:57:19 -0500
Subject: [PATCH 38/56] add missing space

---
 aria-practices.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/aria-practices.html b/aria-practices.html
index ff8c67bf45..663e9cb1ee 100644
--- a/aria-practices.html
+++ b/aria-practices.html
@@ -6313,7 +6313,7 @@ <h4>Toggling a switch</h4>
 
         <p>
           Use <code>aria-checked="true"</code> to indicate that the switch is on.
-          Use <code>aria-checked="false"</code>to indicate that the switch is off.
+          Use <code>aria-checked="false"</code> to indicate that the switch is off.
         </p>
 
         <p>

From 56232d91931e7be156c2e9bf5cfa95df79834422 Mon Sep 17 00:00:00 2001
From: Carolyn MacLeod <Carolyn_MacLeod@ca.ibm.com>
Date: Tue, 18 Feb 2020 22:58:16 -0500
Subject: [PATCH 39/56] add missing space

---
 aria-practices.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/aria-practices.html b/aria-practices.html
index 663e9cb1ee..59795ee815 100644
--- a/aria-practices.html
+++ b/aria-practices.html
@@ -5956,7 +5956,7 @@ <h2>Communicating Widget States</h2>
           </td>
           <td>the element is chosen for further operation</td>
           <td>
-            <code>selected</code>attribute on
+            <code>selected</code> attribute on
             <code>option</code>
           </td>
         </tr>

From 7d2040e82cb2f904e7e2367ce7639bc8fbf4c041 Mon Sep 17 00:00:00 2001
From: Carolyn MacLeod <Carolyn_MacLeod@ca.ibm.com>
Date: Tue, 18 Feb 2020 22:58:41 -0500
Subject: [PATCH 40/56] add missing space

---
 aria-practices.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/aria-practices.html b/aria-practices.html
index 59795ee815..76410b70f3 100644
--- a/aria-practices.html
+++ b/aria-practices.html
@@ -5966,7 +5966,7 @@ <h2>Communicating Widget States</h2>
           </td>
           <td>the element is checked, unchecked, or mixed state</td>
           <td>
-            <code>checked</code>attribute on
+            <code>checked</code> attribute on
             <code>input</code>
           </td>
         </tr>

From 171f1c892a45cc6c91b73363eeba6f92ac6063e8 Mon Sep 17 00:00:00 2001
From: Carolyn MacLeod <Carolyn_MacLeod@ca.ibm.com>
Date: Tue, 18 Feb 2020 22:59:13 -0500
Subject: [PATCH 41/56] add missing space

---
 aria-practices.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/aria-practices.html b/aria-practices.html
index 76410b70f3..cb55985fda 100644
--- a/aria-practices.html
+++ b/aria-practices.html
@@ -5999,7 +5999,7 @@ <h2>Communicating Widget States</h2>
           </td>
           <td>the element is not editable, but is operable</td>
           <td>
-            <code>readonly</code>attribute on
+            <code>readonly</code> attribute on
             <code>input</code>and
             <code>textarea</code>
           </td>

From 0cf3fb9dc1da79f7734d098a6ab199ad419edbc5 Mon Sep 17 00:00:00 2001
From: Carolyn MacLeod <Carolyn_MacLeod@ca.ibm.com>
Date: Tue, 18 Feb 2020 22:59:38 -0500
Subject: [PATCH 42/56] add missing space

---
 aria-practices.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/aria-practices.html b/aria-practices.html
index cb55985fda..65fd986b91 100644
--- a/aria-practices.html
+++ b/aria-practices.html
@@ -6000,7 +6000,7 @@ <h2>Communicating Widget States</h2>
           <td>the element is not editable, but is operable</td>
           <td>
             <code>readonly</code> attribute on
-            <code>input</code>and
+            <code>input</code> and
             <code>textarea</code>
           </td>
         </tr>

From 63718bd78ff8c277969e385fe61bb56295606dad Mon Sep 17 00:00:00 2001
From: Carolyn MacLeod <Carolyn_MacLeod@ca.ibm.com>
Date: Tue, 18 Feb 2020 23:00:13 -0500
Subject: [PATCH 43/56] add missing space

---
 aria-practices.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/aria-practices.html b/aria-practices.html
index 65fd986b91..4a75b14426 100644
--- a/aria-practices.html
+++ b/aria-practices.html
@@ -6040,7 +6040,7 @@ <h3><code>aria-selected</code></h3>
       </p>
 
       <p>
-        The <code>aria-selected</code>attribute allows these values:
+        The <code>aria-selected</code> attribute allows these values:
       </p>
 
       <ul>

From 3d057af5864c925c6cf91dad9a357d78dd94b58e Mon Sep 17 00:00:00 2001
From: Carolyn MacLeod <Carolyn_MacLeod@ca.ibm.com>
Date: Tue, 18 Feb 2020 23:00:35 -0500
Subject: [PATCH 44/56] add missing space

---
 aria-practices.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/aria-practices.html b/aria-practices.html
index 4a75b14426..94d3d67dfc 100644
--- a/aria-practices.html
+++ b/aria-practices.html
@@ -6048,7 +6048,7 @@ <h3><code>aria-selected</code></h3>
 
         <li><code>false</code>: the element is selectable but is not selected.</li>
 
-        <li><code>undefined</code>(default): the element is not selectable.</li>
+        <li><code>undefined</code> (default): the element is not selectable.</li>
       </ul>
 
       <p>

From 212ab93b6ed056bb9ba49439a66a8c466bf7773e Mon Sep 17 00:00:00 2001
From: Carolyn MacLeod <Carolyn_MacLeod@ca.ibm.com>
Date: Tue, 18 Feb 2020 23:01:40 -0500
Subject: [PATCH 45/56] add missing spaces

---
 aria-practices.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/aria-practices.html b/aria-practices.html
index 94d3d67dfc..fba2cef8cd 100644
--- a/aria-practices.html
+++ b/aria-practices.html
@@ -6198,7 +6198,7 @@ <h4>HTML elements that support selection</h4>
         </p>
 
         <p>
-          Default selection can be specified with the <code>selected</code>attribute on the <code>option</code>element.
+          Default selection can be specified with the <code>selected</code> attribute on the <code>option</code> element.
         </p>
 
         <p>

From a8490583c4e37a2a3241b304d5e1c0dddff3ede0 Mon Sep 17 00:00:00 2001
From: Carolyn MacLeod <Carolyn_MacLeod@ca.ibm.com>
Date: Tue, 18 Feb 2020 23:02:23 -0500
Subject: [PATCH 46/56] delete extra word

---
 aria-practices.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/aria-practices.html b/aria-practices.html
index fba2cef8cd..ce7e77ba60 100644
--- a/aria-practices.html
+++ b/aria-practices.html
@@ -6220,7 +6220,7 @@ <h3><code>aria-checked</code></h3>
       </p>
 
       <ul>
-        <li><code>true</code>: the element is supports being checked and is checked.</li>
+        <li><code>true</code>: the element supports being checked and is checked.</li>
 
         <li><code>false</code>: the element supports being checked but is not checked.</li>
 

From eadbca0054c915f245307be5427c6d0968e545d2 Mon Sep 17 00:00:00 2001
From: Carolyn MacLeod <Carolyn_MacLeod@ca.ibm.com>
Date: Tue, 18 Feb 2020 23:03:01 -0500
Subject: [PATCH 47/56] delete extra word

---
 aria-practices.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/aria-practices.html b/aria-practices.html
index ce7e77ba60..653deb8453 100644
--- a/aria-practices.html
+++ b/aria-practices.html
@@ -6224,7 +6224,7 @@ <h3><code>aria-checked</code></h3>
 
         <li><code>false</code>: the element supports being checked but is not checked.</li>
 
-        <li><code>mixed</code>: the element is supports being checked and is in the mixed state for a tri-state checkbox.</li>
+        <li><code>mixed</code>: the element supports being checked and is in the mixed state for a tri-state checkbox.</li>
 
         <li><code>undefined</code> (default): the element does not support being checked.</li>
       </ul>

From 29896efc0eb8cb0bf011fa99209158e304b3b1a7 Mon Sep 17 00:00:00 2001
From: Carolyn MacLeod <Carolyn_MacLeod@ca.ibm.com>
Date: Tue, 18 Feb 2020 23:03:27 -0500
Subject: [PATCH 48/56] add missing space

---
 aria-practices.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/aria-practices.html b/aria-practices.html
index 653deb8453..0e8e29e03c 100644
--- a/aria-practices.html
+++ b/aria-practices.html
@@ -6269,7 +6269,7 @@ <h4>Checking checkboxes</h4>
         </p>
 
         <p>
-          A checkbox can support a third <code>mixed</code>state.
+          A checkbox can support a third <code>mixed</code> state.
           For example, if there is a group of checkboxes and one checkbox allows checking or unchecking the entire group,
           that checkbox can be in the <code>mixed</code> state if the group of checkboxes have some checked and some unchecked.
         </p>

From fca18a2065e1d08bc9a7bdab77f9f1e9c09e1f8c Mon Sep 17 00:00:00 2001
From: Carolyn MacLeod <Carolyn_MacLeod@ca.ibm.com>
Date: Tue, 18 Feb 2020 23:03:51 -0500
Subject: [PATCH 49/56] add missing space

---
 aria-practices.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/aria-practices.html b/aria-practices.html
index 0e8e29e03c..a5eb2681f6 100644
--- a/aria-practices.html
+++ b/aria-practices.html
@@ -6340,7 +6340,7 @@ <h3><code>aria-pressed</code></h3>
 
       <p>
         The <code>button</code> role can represent a toggle button by using the <code>aria-pressed</code> attribute.
-        When the <code>aria-pressed</code>attribute is present and has a non-empty value,
+        When the <code>aria-pressed</code> attribute is present and has a non-empty value,
         the button is a toggle button.
         A toggle button is a two-state button, either pressed or unpressed.
       </p>

From 9f0b752a0799081b745155ac4c70dd9c2a420117 Mon Sep 17 00:00:00 2001
From: Carolyn MacLeod <Carolyn_MacLeod@ca.ibm.com>
Date: Tue, 18 Feb 2020 23:04:17 -0500
Subject: [PATCH 50/56] add missing space

---
 aria-practices.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/aria-practices.html b/aria-practices.html
index a5eb2681f6..1c6c2f4f67 100644
--- a/aria-practices.html
+++ b/aria-practices.html
@@ -6347,7 +6347,7 @@ <h3><code>aria-pressed</code></h3>
 
       <p>
         The <code>true</code> value indicates that the button is pressed, and
-        the <code>false</code>value indicates that the button is unpressed.
+        the <code>false</code> value indicates that the button is unpressed.
       </p>
 
       <p>

From 7dbb0f823bcc5efeef82dc96e5f330e70bf05d74 Mon Sep 17 00:00:00 2001
From: Carolyn MacLeod <Carolyn_MacLeod@ca.ibm.com>
Date: Tue, 18 Feb 2020 23:04:59 -0500
Subject: [PATCH 51/56] add missing space

---
 aria-practices.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/aria-practices.html b/aria-practices.html
index 1c6c2f4f67..67ec42979c 100644
--- a/aria-practices.html
+++ b/aria-practices.html
@@ -6477,7 +6477,7 @@ <h3><code>aria-disabled</code></h3>
       </p>
 
       <p>
-        The <code>aria-disabled</code>state is supported on the following roles:
+        The <code>aria-disabled</code> state is supported on the following roles:
       </p>
 
       <ul>

From fe4e15acbf6e4aca56d5c7cdf139a4efa1d3726c Mon Sep 17 00:00:00 2001
From: Carolyn MacLeod <Carolyn_MacLeod@ca.ibm.com>
Date: Tue, 18 Feb 2020 23:05:25 -0500
Subject: [PATCH 52/56] add missing space

---
 aria-practices.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/aria-practices.html b/aria-practices.html
index 67ec42979c..6631891072 100644
--- a/aria-practices.html
+++ b/aria-practices.html
@@ -6598,7 +6598,7 @@ <h3><code>aria-readonly</code></h3>
 
       <p>
         When <code>aria-readonly</code> is applied to a <code>grid</code> or <code>treegrid</code>,
-        the value is propagated to all <code>gridcells</code>in the widget.
+        the value is propagated to all <code>gridcells</code> in the widget.
         Each <code>gridcell</code> can override this propagation by setting
         <code>aria-readonly</code> on the <code>gridcell</code>.
         See the <a href="#grid">Grid Design Pattern</a>for examples.

From aee861e3c1ee657b15287b19bb8db7057fbacdff Mon Sep 17 00:00:00 2001
From: Carolyn MacLeod <Carolyn_MacLeod@ca.ibm.com>
Date: Tue, 18 Feb 2020 23:05:52 -0500
Subject: [PATCH 53/56] add missing space

---
 aria-practices.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/aria-practices.html b/aria-practices.html
index 6631891072..039a1eb7d0 100644
--- a/aria-practices.html
+++ b/aria-practices.html
@@ -6601,7 +6601,7 @@ <h3><code>aria-readonly</code></h3>
         the value is propagated to all <code>gridcells</code> in the widget.
         Each <code>gridcell</code> can override this propagation by setting
         <code>aria-readonly</code> on the <code>gridcell</code>.
-        See the <a href="#grid">Grid Design Pattern</a>for examples.
+        See the <a href="#grid">Grid Design Pattern</a> for examples.
       </p>
 
       <p>

From adebf342a9e1097f25b5fe0132739fdaac4e9cd9 Mon Sep 17 00:00:00 2001
From: Carolyn MacLeod <Carolyn_MacLeod@ca.ibm.com>
Date: Tue, 18 Feb 2020 23:06:22 -0500
Subject: [PATCH 54/56] add missing space

---
 aria-practices.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/aria-practices.html b/aria-practices.html
index 039a1eb7d0..8fd102e3b5 100644
--- a/aria-practices.html
+++ b/aria-practices.html
@@ -6606,7 +6606,7 @@ <h3><code>aria-readonly</code></h3>
 
       <p>
         HTML has the <code>readonly</code> attribute for the <code>input</code> and
-        <code>textarea</code>elements.
+        <code>textarea</code> elements.
         When using those elements, use the <code>readonly</code>attribute instead of <code>aria-readonly</code>.
         For example:
       </p>

From ca42e37c2c76ab89465ef826882271f827254cb0 Mon Sep 17 00:00:00 2001
From: Carolyn MacLeod <Carolyn_MacLeod@ca.ibm.com>
Date: Tue, 18 Feb 2020 23:06:47 -0500
Subject: [PATCH 55/56] add missing space

---
 aria-practices.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/aria-practices.html b/aria-practices.html
index 8fd102e3b5..fc3e2d04d9 100644
--- a/aria-practices.html
+++ b/aria-practices.html
@@ -6607,7 +6607,7 @@ <h3><code>aria-readonly</code></h3>
       <p>
         HTML has the <code>readonly</code> attribute for the <code>input</code> and
         <code>textarea</code> elements.
-        When using those elements, use the <code>readonly</code>attribute instead of <code>aria-readonly</code>.
+        When using those elements, use the <code>readonly</code> attribute instead of <code>aria-readonly</code>.
         For example:
       </p>
 

From 9eba40e4e4ce819b1284b516eecb4dd7fe40fe02 Mon Sep 17 00:00:00 2001
From: Simon Pieters <zcorpan@gmail.com>
Date: Tue, 26 Oct 2021 22:40:33 +0200
Subject: [PATCH 56/56] Apply suggestions from code review

Co-authored-by: Carolyn MacLeod <Carolyn_MacLeod@ca.ibm.com>
---
 aria-practices.html | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/aria-practices.html b/aria-practices.html
index fc3e2d04d9..8ef8be88de 100644
--- a/aria-practices.html
+++ b/aria-practices.html
@@ -6058,11 +6058,11 @@ <h3><code>aria-selected</code></h3>
         When multiple selections are possible,
         this might be done by holding a modifier key on the keyboard while clicking with a pointing device,
         longpressing for touchscreens,
-        or using a modifier key (e.g. Shift) while pressing arrows on a keyboard to select adjacent items,
-        or using a different modifier key (e.g. Command or Control) while pressing arrows to move focus
-        without changing the selection, and then pressing Space to select or unselect.
+        or using a modifier key (e.g. Shift) while typing arrows on a keyboard to select adjacent items,
+        or a different modifier key (e.g. Command or Control) while typing arrows to move focus
+        without changing the selection, and then typing Space to select or unselect.
         However, these paradigms might vary depending on what kind of widget it is,
-        and the conventions might be different depending on the kind of device and host operating system.
+        and the conventions of the host operating system or device.
       </p>
 
       <p>
@@ -6163,8 +6163,8 @@ <h4>Selecting options in listboxes and treeitems in trees</h4>
         <p>
           In rare cases, a widget could support both selection and checkedness to represent orthogonal states,
           although that could be complex and might be confusing for users.
-          For example, a <code>tree</code> widget to represent a changeable sequence of steps,
-          could allow selection in order to rearrange a set of steps,
+          For example, a <code>tree</code> widget to represent a changeable sequence of steps
+          could allow selection in order to rearrange the steps,
           and also allow checking and unchecking them to indicate which steps are active.
         </p>