Skip to content

Commit

Permalink
Merge pull request #2145 from w3c/update-1.2
Browse files Browse the repository at this point in the history 
Update APG 1.2 branch with latest changes from main
  • Loading branch information
@mcking65
mcking65 authored Nov 15, 2021
2 parents eaa9f10 + e0922b8 commit f9441af
Show file tree
Hide file tree
Showing 35 changed files with 2,254 additions and 1,791 deletions.
153 changes: 129 additions & 24 deletions aria-practices.html
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion examples/checkbox/checkbox-mixed.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ <h1>Checkbox Example (Mixed-State)</h1>
</p>
<p>Similar examples include: </p>
<ul>
<li><a href="../checkbox-1/checkbox-1.html">Checkbox (Two State)</a>: Simple two state checkbox.</li>
<li><a href="checkbox.html">Checkbox (Two State)</a>: Simple two state checkbox.</li>
</ul>
<section>
<div class="example-header">
Expand Down
2 changes: 1 addition & 1 deletion examples/checkbox/checkbox.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ <h1>Checkbox Example (Two State)</h1>

<p>Similar examples include: </p>
<ul>
<li><a href="../checkbox-2/checkbox-2.html">Checkbox (Mixed-State)</a>: Mixed state checkbox controlling standard input checkboxes.</li>
<li><a href="checkbox-mixed.html">Checkbox (Mixed-State)</a>: Demonstrates a checkbox that uses the mixed value for aria-checked to reflect and control checked states within a group of two-state HTML checkboxes contained in an HTML <code>fieldset</code>.</li>
</ul>

<section>
Expand Down
2 changes: 1 addition & 1 deletion examples/combobox/combobox-autocomplete-list.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -203,7 +203,7 @@ <h3 id="kbd_label_textbox">Textbox</h3>
</tr>
<tr data-test-id="textbox-key-enter">
<th><kbd>Enter</kbd></th>
<td>Closes the listbox.</td>
<td>Closes the listbox if it is displayed.</td>
</tr>
<tr data-test-id="textbox-key-escape">
<th><kbd>Escape</kbd></th>
Expand Down
7 changes: 1 addition & 6 deletions examples/combobox/combobox-autocomplete-none.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -156,12 +156,7 @@ <h3 id="kbd_label_textbox">Textbox</h3>
</tr>
<tr data-test-id="textbox-key-enter">
<th><kbd>Enter</kbd></th>
<td>
<ul>
<li>Sets the textbox value to the content of the selected option.</li>
<li>Closes the listbox if it is displayed.</li>
</ul>
</td>
<td>Closes the listbox if it is displayed.</td>
</tr>
<tr data-test-id="standard-single-line-editing-keys">
<th>Standard single line text editing keys</th>
Expand Down
2 changes: 1 addition & 1 deletion examples/combobox/grid-combo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -370,7 +370,7 @@ <h3 id="rps_label_popup">Grid Popup</h3>
<td><code>div</code></td>
<td>
<ul>
<li>Specified on a row in the grid when it is visually indicated as selected.</li>
<li>Specified on a cell when the row containing the cell is visually indicated as selected.</li>
<li>Occurs only when a cell in the grid is referenced by <code>aria-activedescendant</code>.</li>
</ul>
</td>
Expand Down
58 changes: 37 additions & 21 deletions examples/dialog-modal/alertdialog.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,15 +35,14 @@ <h1>Alert Dialog Example</h1>
<p>To use this example:</p>
<ul>
<li>
Activate the "discard" button to trigger a confirmation dialog.
Activate the "discard" button to trigger a confirmation dialog that has the <code>alertdialog</code> role.
<ul>
<li>Activating the "yes" button removes the contents of both the "Notes" text area and local storage of the notes.</li>
<li>Activating the "yes" button in the confirmation dialog removes the contents of both the "Notes" text area and local storage of the notes.</li>
<li>Activating the "no" button or pressing <kbd>escape</kbd> closes the dialog.</li>
<li>The "discard" button is disabled if the notes text area does not contain any text.</li>
</ul>
</li>
<li>
Activate the "save" button to trigger an alert when it saves the contents of the "Notes" text area to <a href="https://www.w3.org/TR/webstorage/#the-localstorage-attribute">local storage</a>.
<li>Activate the "save" button to trigger an alert when the contents of the "Notes" text area is saved to <a href="https://www.w3.org/TR/webstorage/#the-localstorage-attribute">local storage</a>.
<ul>
<li>A successful save triggers a short alert to notify the user that the notes have been saved.</li>
<li>The "save" button is disabled if the user's local storage value is the same as the "Notes" field.</li>
Expand All @@ -68,9 +67,17 @@ <h2 id="ex_label">Example</h2>
<div id="ex_alertdialog">
<label for="notes">Notes</label>
<textarea class="notes" name="notes" id="notes" rows="7">This is an example text box, which unsurprisingly contains text. The user is given the option to save this text - which triggers a basic alert - or to discard the text - which triggers an alert dialog that prompts the user for confirmation.</textarea>
<button type="button" aria-controls="notes" id="notes_save">Save</button>
<button type="button" aria-controls="notes" id="notes_discard" onclick="openAlertDialog('alert_dialog', this)">Discard</button>
<div role="alert" id="alert_toast" class="toast hidden">Nothing to discard.</div>
<div class="visually-hidden" id="notes_save_status" role="alert"></div>
<button type="button" id="notes_save">
Save
<svg class="icon spinner" viewBox="0 0 32 32" aria-hidden="true">
<path d="M16 32c-4.274 0-8.292-1.664-11.314-4.686s-4.686-7.040-4.686-11.314c0-3.026 0.849-5.973 2.456-8.522 1.563-2.478 3.771-4.48 6.386-5.791l1.344 2.682c-2.126 1.065-3.922 2.693-5.192 4.708-1.305 2.069-1.994 4.462-1.994 6.922 0 7.168 5.832 13 13 13s13-5.832 13-13c0-2.459-0.69-4.853-1.994-6.922-1.271-2.015-3.066-3.643-5.192-4.708l1.344-2.682c2.615 1.31 4.824 3.313 6.386 5.791 1.607 2.549 2.456 5.495 2.456 8.522 0 4.274-1.664 8.292-4.686 11.314s-7.040 4.686-11.314 4.686z"></path>
</svg>
<svg class="icon check" viewBox="0 0 32 32" aria-hidden="true">
<path d="M27 4l-15 15-7-7-5 5 12 12 20-20z"></path>
</svg>
</button>
<button type="button" data-textbox="notes" id="notes_discard" onclick="openAlertDialog('alert_dialog', this)">Discard</button>
<div class="dialog-backdrop no-scroll">
<div id="alert_dialog" role="alertdialog" aria-modal="true" aria-labelledby="dialog_label" aria-describedby="dialog_desc" class="hidden">
<h2 id="dialog_label" class="dialog_label">Confirmation</h2>
Expand All @@ -79,7 +86,7 @@ <h2 id="dialog_label" class="dialog_label">Confirmation</h2>
</div>
<div class="dialog_form_actions">
<button type="button" onclick="closeDialog(this)">No</button>
<button type="button" aria-controls="notes" id="notes_confirm" onclick="discardInput(this)">Yes</button>
<button type="button" id="notes_confirm" onclick="discardInput(this)">Yes</button>
</div>
</div>
</div>
Expand All @@ -88,14 +95,18 @@ <h2 id="dialog_label" class="dialog_label">Confirmation</h2>
</section>
<section>
<h2>Accessibility Features</h2>
<ol>
<li>The accessible label for the alert dialog is set to its heading ("Confirmation").</li>
<ul>
<li>The accessible name of the alert dialog is set to its heading ("Confirmation").</li>
<li>The dialog's prompt ("Are you sure...?") is referenced via <code>aria-describedby</code> to ensure that the user is immediately aware of the prompt.</li>
<li>
Focus is automatically set to the first focusable element inside the dialog, which is the "No" <code>button</code>.
This is the least destructive action, so focusing "No" helps prevent users from accidentally confirming the destructive "Discard" action, which cannot be undone.
</li>
</ol>
<li>
When the buttons are disabled, <code>aria-disabled</code> is used instead of the HTML <code>disabled</code> attribute so the buttons will remain in the page <kbd>Tab</kbd> sequence.
This makes it easier for screen reader users to discover the buttons and discern how the interface works.
</li>
</ul>
</section>
<section>
<h2 id="kbd_label">Keyboard Support</h2>
Expand Down Expand Up @@ -162,23 +173,23 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
</tr>
<tr>
<td></td>
<th scope="row"><code>aria-labelledby=<q>IDREF</q></code></th>
<th scope="row"><code>aria-labelledby="ID_REFERENCE"</code></th>
<td><code>div</code></td>
<td>
Gives the alert dialog an accessible name by referring to the element that provides the alert dialog title.
</td>
</tr>
<tr>
<td></td>
<th scope="row"><code>aria-describedby=<q>IDREF</q></code></th>
<th scope="row"><code>aria-describedby="ID_REFERENCE"</code></th>
<td><code>div</code></td>
<td>
Gives the alert dialog an accessible description by referring to the alert dialog content that describes the primary message or purpose of the alert dialog.
</td>
</tr>
<tr>
<td></td>
<th scope="row"><code>aria-modal=<q>true</q></code></th>
<th scope="row"><code>aria-modal="true"</code></th>
<td><code>div</code></td>
<td>
Tells assistive technologies that the windows underneath the current alert dialog are not available for interaction (inert).
Expand All @@ -192,26 +203,31 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
Identifies the element that serves as the alert notification.
</td>
</tr>
<tr>
<td></td>
<th scope="row"><code>aria-disabled="true"</code></th>
<td><code>button</code></td>
<td>Tells assistive technology users the button cannot be activated.</td>
</tr>
</tbody>
</table>
<h3>Notes on <code>aria-modal</code> and <code>aria-hidden</code></h3>
<ol>
<ul>
<li>
The <code>aria-modal</code> property was introduced in ARIA 1.1.
As a new property, screen reader users may experience varying degrees of support for it.
As a relatively new property, screen reader users may experience varying degrees of support for it.
</li>
<li>
Applying the <code>aria-modal</code> property to the <code>dialog</code> element
replaces the technique of using <code>aria-hidden</code> on the background for informing assistive technologies that content outside a dialog is inert.
Applying the <code>aria-modal</code> property to the <code>dialog</code> element replaces the technique of using <code>aria-hidden</code> on the background for informing assistive technologies that content outside a dialog is inert.
</li>
<li>
In legacy dialog implementations where <code>aria-hidden</code> is used to make content outside a dialog inert for assistive technology users, it is important that:
<ol>
<ul>
<li><code>aria-hidden</code> is set to <code>true</code> on each element containing a portion of the inert layer.</li>
<li>The dialog element is not a descendant of any element that has <code>aria-hidden</code> set to <code>true</code>.</li>
</ol>
</ul>
</li>
</ol>
</ul>
</section>
<section>
<h2 id="src_label">Javascript and CSS Source Code</h2>
Expand Down
56 changes: 42 additions & 14 deletions examples/dialog-modal/css/dialog.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -146,20 +146,48 @@
width: 33%;
}

.toast {
background-color: rgb(0 0 0 / 90%);
color: #fff;
padding: 1rem;
border: none;
border-radius: 0.25rem;
box-shadow: 0 3px 6px rgb(0 0 0 / 16%), 0 3px 6px rgb(0 0 0 / 23%);
position: fixed;
top: 1rem;
right: 1rem;
transform: translateY(-150%);
transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1);
.visually-hidden {
border: 0;
clip: rect(0 0 0 0);
height: auto;
margin: 0;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
white-space: nowrap;
}

#notes_save {
display: inline-flex;
align-items: center;
gap: 0.5rem;
}

.toast.active {
transform: translateY(0);
#notes_save svg {
display: block;
width: 0.75rem;
}

#notes_save .icon {
display: none;
}

@keyframes rotate {
0% {
transform: rotate(0deg);
}

100% {
transform: rotate(360deg);
}
}

#notes_save.loading .spinner {
display: block;
animation: rotate 2s linear infinite;
}

#notes_save.saved .check {
display: block;
}
Loading

0 comments on commit f9441af

Please sign in to comment.