Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ARIAMixin #2001

Merged
merged 16 commits into from
Feb 25, 2021
Merged

ARIAMixin #2001

Show file tree
Hide file tree
Changes from 12 commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
a957748
ARIAMixin
rachelandrew Feb 2, 2021
f73a6da
Update files/en-us/web/api/element/arialive/index.html
rachelandrew Feb 3, 2021
651d3cc
more aria properties
rachelandrew Feb 4, 2021
006719f
more aria properties
rachelandrew Feb 4, 2021
a12f122
last batch of attributes.
rachelandrew Feb 5, 2021
28dc355
Update files/en-us/web/api/element/ariaatomic/index.html
rachelandrew Feb 9, 2021
d394aeb
Update files/en-us/web/api/element/ariaautocomplete/index.html
rachelandrew Feb 9, 2021
ff9f545
Update files/en-us/web/api/element/ariaautocomplete/index.html
rachelandrew Feb 9, 2021
c97b9c5
Update files/en-us/web/api/element/ariaatomic/index.html
rachelandrew Feb 9, 2021
0f29bb0
Update files/en-us/web/api/element/ariaexpanded/index.html
rachelandrew Feb 9, 2021
8c50fc9
Update files/en-us/web/api/element/ariahidden/index.html
rachelandrew Feb 9, 2021
9bd51ed
fixes post review
rachelandrew Feb 9, 2021
f18a660
Update files/en-us/web/api/element/ariaatomic/index.html
rachelandrew Feb 10, 2021
dec92f1
Update files/en-us/web/api/element/ariahidden/index.html
rachelandrew Feb 10, 2021
d67c60c
putting things back that got messed up in git.
rachelandrew Feb 10, 2021
22ca37b
Merge branch 'main' into AriaMixin
rachelandrew Feb 19, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
63 changes: 63 additions & 0 deletions files/en-us/web/api/element/ariaatomic/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
---
title: Element.ariaAtomic
slug: Web/API/Element/ariaAtomic
tags:
- API
- Property
- Reference
- ariaAtomic
- AriaAttributes
- AriaMixin
- Element
---
<div>{{DefaultAPISidebar("DOM")}}</div>

<p class="summary">The <strong><code>ariaAtomic</code></strong> property of the {{domxref("Element")}} interface reflects the value of the <code>aria-atomic</code> attribute.</p>
jpmedley marked this conversation as resolved.
Show resolved Hide resolved
rachelandrew marked this conversation as resolved.
Show resolved Hide resolved

<h2 id="Syntax">Syntax</h2>

<pre class="syntaxbox notranslate">var <var>ariaAtomic</var> = element.ariaAtomic;
<var>element</var>.ariaAtomic = <var>ariaAtomic</var></pre>

<h3>Value</h3>
<p>A {{domxref("DOMString")}} with one of the following values:</p>
<dl>
<dt><code>"false"</code></dt>
<dd>Assistive technologies will present only the changed node or nodes.</dd>
<dt><code>true</code></dt>
rachelandrew marked this conversation as resolved.
Show resolved Hide resolved
<dd>Assistive technologies will present the entire changed region as a whole, including the author-defined label if one exists.</dd>
</dl>

<h2 id="Examples">Examples</h2>

<p>In this example the <code>aria-atomic</code> attribute on the element with an ID of <code>"clock"</code> is set to "true". Using <code>ariaAtomic</code> we update the value to "false".</p>

<pre class="brush: html">&lt;div id="clock" role="timer" aria-live="polite" aria-atomic="true"&gt;&lt;/div&gt;</pre>

<pre class="brush: js">let el = document.getElementById('clock');
console.log(el.ariaAtomic); // true
el.ariaAtomic = "false"
console.log(el.ariaAtomic); // false</pre>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('ARIA 1.2','#dom-ariamixin-ariaatomic','ariaAtomic')}}</td>
<td>{{Spec2('ARIA 1.2')}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>

<p>{{Compat("api.Element.ariaAtomic")}}</p>
75 changes: 75 additions & 0 deletions files/en-us/web/api/element/ariaautocomplete/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
---
title: Element.ariaAutoComplete
slug: Web/API/Element/ariaAutoComplete
tags:
- API
- Property
- Reference
- ariaAutoComplete
- AriaAttributes
- AriaMixin
- Element
---
<div>{{DefaultAPISidebar("DOM")}}</div>

<p class="summary">The <strong><code>ariaAutoComplete</code></strong> property of the {{domxref("Element")}} interface reflects the value of the <code>aria-autocomplete</code> attribute, which indicates whether inputting text could trigger display of one or more predictions of the user's intended value for a combobox, searchbox, or textbox and specifies how predictions would be presented if they were made.</p>

<h2 id="Syntax">Syntax</h2>

<pre class="syntaxbox notranslate">var <var>ariaAutoComplete</var> = element.ariaAutoComplete;
<var>element</var>.ariaAutoComplete = <var>ariaAutoComplete</var></pre>

<h3>Value</h3>
<p>A {{domxref("DOMString")}} with one of the following values:</p>
<dl>
<dt><code>"inline"</code></dt>
<dd>When a user is providing input, text suggesting one way to complete the provided input may be dynamically inserted after the caret.</dd>
<dt><code>"list"</code></dt>
<dd>When a user is providing input, an element containing a collection of values that could complete the provided input may be displayed.</dd>
<dt><code>"both"</code></dt>
<dd>When a user is providing input, an element containing a collection of values that could complete the provided input may be displayed. If displayed, one value in the collection is automatically selected, and the text needed to complete the automatically selected value appears after the caret in the input.</dd>
<dt><code>"none"</code></dt>
<dd>When a user is providing input, there is no display of an automatic suggestion that attempts to predict how the user intends to complete the input.</dd>
</dl>

<h2 id="Examples">Examples</h2>

<p>In this example the <code>aria-autocomplete</code> attribute on the element with an ID of <code>animal</code> is set to "list". Using <code>ariaAutoComplete</code> we update the value to "inline".</p>

<pre class="brush: html">&lt;div class="animals-combobox"&gt;
&lt;label for="animal"&gt;Animal&lt;/label&gt;
&lt;input id="animal" type="text" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-haspopup="true"&gt;
&lt;button id="animals-button" tabindex="-1" aria-label="Open"&gt;&#9661;&lt;/button&gt;
&lt;ul id="animals-listbox" role="listbox" aria-label="Animals"&gt;
&lt;li id="animal-cat" role="option">Cat&lt;/li&gt;
&lt;li id="animal-dog" role="option">Dog&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;</pre>

<pre class="brush: js">let el = document.getElementById('animal');
console.log(el.ariaAutoComplete); // list
el.ariaAutoComplete = "inline";
console.log(el.ariaAutoComplete); // inline</pre>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('ARIA 1.2','#dom-ariamixin-ariaautocomplete','ariaAutoComplete')}}</td>
<td>{{Spec2('ARIA 1.2')}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>

<p>{{Compat("api.Element.ariaAutoComplete")}}</p>
64 changes: 64 additions & 0 deletions files/en-us/web/api/element/ariabusy/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
---
title: Element.ariaBusy
slug: Web/API/Element/ariaBusy
tags:
- API
- Property
- Reference
- ariaBusy
- AriaAttributes
- AriaMixin
- Element
---
<div>{{DefaultAPISidebar("DOM")}}</div>

<p class="summary">The <strong><code>ariaBusy</code></strong> property of the {{domxref("Element")}} interface reflects the value of the <code>aria-busy</code> attribute, which indicates whether an element is being modified, as assistive technologies may want to wait until the modifications are complete before exposing them to the user.</p>

<h2 id="Syntax">Syntax</h2>

<pre class="syntaxbox notranslate">var <var>ariaBusy</var> = element.ariaBusy;
<var>element</var>.ariaBusy = <var>ariaBusy</var></pre>

<h3>Value</h3>
<p>A {{domxref("DOMString")}} with one of the following values:</p>

<dl>
<dt><code>"true"</code></dt>
<dd>There are no expected updates for the element.</dd>
<dt><code>"false"</code></dt>
<dd>The element is being updated.</dd>
</dl>

<h2 id="Examples">Examples</h2>

<p>In this example the <code>aria-busy</code> attribute on the element with an ID of <code>clock</code> is set to "false". Using <code>ariaBusy</code> we update the value to "true".</p>

<pre class="brush: html">&lt;div id="clock" role="timer" aria-live="polite" aria-atomic="true" aria-busy="false"&gt;&lt;/div&gt;</pre>

<pre class="brush: js">let el = document.getElementById('clock');
console.log(el.ariaBusy); // false
el.ariaBusy = "true"
console.log(el.ariaBusy); // true</pre>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('ARIA 1.2','#dom-ariamixin-ariabusy','ariaBusy')}}</td>
<td>{{Spec2('ARIA 1.2')}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>

<p>{{Compat("api.Element.ariaBusy")}}</p>
80 changes: 80 additions & 0 deletions files/en-us/web/api/element/ariachecked/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
---
title: Element.ariaChecked
slug: Web/API/Element/ariaChecked
tags:
- API
- Property
- Reference
- ariaChecked
- AriaAttributes
- AriaMixin
- Element
---
<div>{{DefaultAPISidebar("DOM")}}</div>

<p class="summary">The <strong><code>ariaChecked</code></strong> property of the {{domxref("Element")}} interface reflects the value of the <code>aria-checked</code> attribute, which indicates the current "checked" state of checkboxes, radio buttons, and other widgets that have a checked state.</p>

<h2 id="Syntax">Syntax</h2>

<pre class="syntaxbox notranslate">var <var>ariaChecked</var> = element.ariaChecked;
<var>element</var>.ariaChecked = <var>ariaChecked</var></pre>

<h3>Value</h3>
<p>A {{domxref("DOMString")}} with one of the following values:</p>

<dl>
<dt><code>"true"</code></dt>
<dd>The element is checked.</dd>
<dt><code>"mixed"</code></dt>
<dd>Indicates a mixed mode value for a tri-state checkbox or menuitemcheckbox.</dd>
<dt><code>"false"</code></dt>
<dd>The element supports being checked but is not currently checked.</dd>
<dt><code>"undefined"</code></dt>
<dd>The element does not support being checked.</dd>
</dl>

<h2 id="Examples">Examples</h2>

<p>In this example the <code>aria-checked</code> attribute on the element with an ID of <code>checkBoxInput</code> is set to "false" indicating that this input is currently unchecked. Using <code>ariaChecked</code> we update the value to "true".</p>

<pre class="brush: html">&lt;span role="checkbox" id="checkBoxInput" aria-checked="false" tabindex="0" aria-labelledby="chk1-label"&gt;
&lt;/span&gt; &lt;label id="chk1-label"&gt;Remember my preferences&lt;/label&gt;</pre>

<pre class="brush: js">let el = document.getElementById('checkBoxInput');
console.log(el.ariaChecked); // "false"
el.ariaChecked = "true"
console.log(el.ariaChecked); // "true"</pre>

<div class="notecard note">
<h3>Note</h3>
<p>Where possible use an HTML {{htmlelement("input")}} element with <code>type="checkbox"</code> as this element has built in semantics and does not require ARIA attributes.</p>
</div>
rachelandrew marked this conversation as resolved.
Show resolved Hide resolved

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('ARIA 1.2','#dom-ariamixin-ariachecked','ariaChecked')}}</td>
<td>{{Spec2('ARIA 1.2')}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>

<p>{{Compat("api.Element.ariaChecked")}}</p>

<h2 id="See_also">See also</h2>

<ul>
<li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/checkbox_role">ARIA: checkbox role</a></li>
</ul>
87 changes: 87 additions & 0 deletions files/en-us/web/api/element/ariacolcount/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
---
title: Element.ariaColCount
slug: Web/API/Element/ariaColCount
tags:
- API
- Property
- Reference
- ariaColCount
- AriaAttributes
- AriaMixin
- Element
---
<div>{{DefaultAPISidebar("DOM")}}</div>

<p class="summary">The <strong><code>ariaColCount</code></strong> property of the {{domxref("Element")}} interface reflects the value of the <code>aria-colcount</code> attribute, which defines the number of columns in a table, grid, or treegrid.</p>

<h2 id="Syntax">Syntax</h2>

<pre class="syntaxbox notranslate">var <var>ariaColCount</var> = element.ariaColCount;
<var>element</var>.ariaColCount = <var>ariaColCount</var></pre>

<h3>Value</h3>
<p>A {{domxref("DOMString")}}.</p>

<h2 id="Examples">Examples</h2>

<p>In this example the <code>aria-colcount</code> attribute on the element with an ID of <code>semantic-table</code> is set to "2". Using <code>ariaColCount</code> we update the value to "3".</p>

<pre class="brush: html">&lt;table id="semantic-table" role="table" aria-label="Semantic Elements" aria-describedby="semantic_elements_table_desc" aria-rowcount="100" aria-colcount="2"&gt;
&lt;caption id="semantic_elements_table_desc"&gt;Semantic Elements to use instead of ARIA's roles&lt;/caption&gt;
&lt;thead role="rowgroup"&gt;
&lt;tr role="row"&gt;
&lt;th role="columnheader" aria-sort="none" aria-rowindex="1"&gt;ARIA Role&lt;/th&gt;
&lt;th role="columnheader" aria-sort="none" aria-rowindex="1"&gt;Semantic Element&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody role="rowgroup"&gt;
&lt;tr role="row"&gt;
&lt;td role="cell" aria-rowindex="11"&gt;header&lt;/td&gt;
&lt;td role="cell" aria-rowindex="11"&gt;h1&lt;/td&gt;
&lt;/tr&gt;
&lt;tr role="row"&gt;
&lt;td role="cell" aria-rowindex="16"&gt;header&lt;/td&gt;
&lt;td role="cell" aria-rowindex="16"&gt;h6&lt;/td&gt;
&lt;/tr&gt;
&lt;tr role="row"&gt;
&lt;td role="cell" aria-rowindex="18"&gt;rowgroup&lt;/td&gt;
&lt;td role="cell" aria-rowindex="18"&gt;thead&lt;/td&gt;
&lt;/tr&gt;
&lt;tr role="row"&gt;
&lt;td role="cell" aria-rowindex="24"&gt;term&lt;/td&gt;
&lt;td role="cell" aria-rowindex="24"&gt;dt&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;</pre>

<pre class="brush: js">let el = document.getElementById('semantic-table');
console.log(el.ariaColCount); // 2
el.ariaColCount = "3"
console.log(el.ariaColCount); // 3</pre>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('ARIA 1.2','#dom-ariamixin-ariacolcount','ariaColCount')}}</td>
<td>{{Spec2('ARIA 1.2')}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>

<p>{{Compat("api.Element.ariaColCount")}}</p>

<ul>
<li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Table_Role">ARIA: table role</a></li>
</ul>
Loading