Skip to content

Commit

Permalink
Update examples
Browse files Browse the repository at this point in the history
  • Loading branch information
@domenic
domenic committed Aug 22, 2019
1 parent 8dfa54f commit e32a070
Showing 1 changed file with 48 additions and 48 deletions.
96 changes: 48 additions & 48 deletions source
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4014,6 +4014,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
<p>Finally, the following terms are defined <cite>ARIA</cite>: <ref spec=ARIA></p>

<ul class="brief">
<li><dfn data-x-href="https://w3c.github.io/aria/#dfn-role">role</dfn></li>
<li><dfn data-x-href="https://w3c.github.io/aria/#dfn-accessible-name" data-x="concept-accessible-name">accessible name</dfn></li>
<li>The <dfn data-x-href="https://w3c.github.io/aria/#ARIAMixin"><code>ARIAMixin</code></dfn> interface, with its associated
<dfn data-x-href="https://w3c.github.io/aria/#dfn-get-the-accessibility-idl-attribute">get the accessibility IDL attribute</dfn> and
Expand Down Expand Up @@ -66449,26 +66450,28 @@ document.body.appendChild(flagIcon)</code></pre>

<pre><code class="js" data-x="">class MyCheckbox extends HTMLElement {
static get formAssociated() { return true; }
static get observedAttributes() { return ['checked']; }

constructor() {
super();
this._internals = this.attachInternals();
this._checked = false;
this.addEventListener('click', this._onClick.bind(this));
}

get form() { return this._internals.form; }
get name() { return this.getAttribute('name'); }
get type() { return this.localName; }

get checked() { return this._checked; }
set checked(flag) {
this._checked = !!flag;
this._internals.setFormValue(this._checked ? 'on' : null);
get checked() { return this.getAttribute('checked'); }
set checked(flag) { this.toggleAttribute('checked', Boolean(flag)); }

attributeChangedCallback(name, oldValue, newValue) {
// name will always be "checked" due to observedAttributes
this._internals.setFormValue(this.checked ? 'on' : null);
}

_onClick(event) {
this.checked = !this._checked;
this.checked = !this.checked;
}
}
customElements.define('my-checkbox', MyCheckbox);</code></pre>
Expand Down Expand Up @@ -66496,11 +66499,11 @@ customElements.define('my-checkbox', MyCheckbox);</code></pre>

<pre><code class="js" data-x="">class MyCheckbox extends HTMLElement {
static get formAssociated() { return true; }
static get observedAttributes() { return ['checked']; }

constructor() {
super();
this._internals = this.attachInternals();
this._checked = false;
this.addEventListener('click', this._onClick.bind(this));

<mark> this._internals.role = 'checkbox';
Expand All @@ -66511,15 +66514,17 @@ customElements.define('my-checkbox', MyCheckbox);</code></pre>
get name() { return this.getAttribute('name'); }
get type() { return this.localName; }

get checked() { return this._checked; }
set checked(flag) {
this._checked = !!flag;
this._internals.setFormValue(this._checked ? 'on' : null);
<mark> this._internals.ariaChecked = this._checked;</mark>
get checked() { return this.getAttribute('checked'); }
set checked(flag) { this.toggleAttribute('checked', Boolean(flag)); }

attributeChangedCallback(name, oldValue, newValue) {
// name will always be "checked" due to observedAttributes
this._internals.setFormValue(this.checked ? 'on' : null);
<mark> this._internals.ariaChecked = this.checked;</mark>
}

_onClick(event) {
this.checked = !this._checked;
this.checked = !this.checked;
}
}
customElements.define('my-checkbox', MyCheckbox);</code></pre>
Expand All @@ -66529,12 +66534,10 @@ customElements.define('my-checkbox', MyCheckbox);</code></pre>
data-x="attr-aria-*">aria-*</code> attributes:</p>

<pre class="bad"><code class="html" data-x="">&lt;!-- This markup is non-conforming -->
&lt;input type="checkbox" checked role="button" aria-checked="false">
&lt;input type="checkbox" checked role="button" aria-checked="false"></code></pre>

&lt;my-checkbox role="button" aria-checked="false">
&lt;script>
document.querySelector('my-checkbox').checked = true;
&lt;/script></code></pre>
<pre class="bad"><code class="html" data-x="">&lt;!-- This markup is probably not what the custom element author intended -->
&lt;my-checkbox role="button" checked aria-checked="false"></code></pre>

<p>Custom element authors are encouraged to state what aspects of their accessibility semantics
are strong native semantics, i.e., should not be overriden by users of the custom element. In our
Expand Down Expand Up @@ -66658,16 +66661,16 @@ console.log(plasticButton.outerHTML); // will output '&lt;button is="plastic-but
<code data-x="">taco-button</code> were to become logically disabled, the <code
data-x="attr-tabindex">tabindex</code> attribute would need to be removed.</p></li>

<li><p>The addition of various ARIA attributes helps convey semantics to accessibility
technology. For example, setting the <code data-x="attr-aria-role">role</code> attribute to
"<code data-x="attr-aria-role-button">button</code>" will convey the semantics that this is a
button, enabling users to successfully interact with the control using usual button-like
interactions in their accessibility technology. Setting the <code
data-x="attr-aria-label">aria-label</code> attribute is necessary to give the button an
<span data-x="concept-accessible-name">accessible name</span>, instead of having accessibility
technology traverse its child text nodes and announce them. And setting <code
data-x="attr-aria-disabled">aria-disabled</code> to "<code data-x="">true</code>" when the button
is logically disabled conveys to accessibility technology the button's disabled state.</p></li>
<li><p>The addition of an ARIA role and various ARIA states and properties helps convey semantics
to accessibility technology. For example, setting the <span>role</span> to "<code
data-x="attr-aria-role-button">button</code>" will convey the semantics that this is a button,
enabling users to successfully interact with the control using usual button-like interactions in
their accessibility technology. Setting the <code data-x="attr-aria-label">aria-label</code>
property is necessary to give the button an <span data-x="concept-accessible-name">accessible
name</span>, instead of having accessibility technology traverse its child text nodes and
announce them. And setting the <code data-x="attr-aria-disabled">aria-disabled</code> state to
"<code data-x="">true</code>" when the button is logically disabled conveys to accessibility
technology the button's disabled state.</p></li>

<li><p>The addition of event handlers to handle commonly-expected button behaviors helps convey
the semantics of the button to Web browser users. In this case, the most relevant event handler
Expand All @@ -66691,9 +66694,11 @@ console.log(plasticButton.outerHTML); // will output '&lt;button is="plastic-but

constructor() {
super();
this._internals = this.attachInternals();
this._internals.role = "button";

this.addEventListener("keydown", e => {
if (e.keyCode === 32 || e.keyCode === 13) {
if (e.code === "Enter" || e.code === "Space") {
this.dispatchEvent(new MouseEvent("click", {
bubbles: true,
cancelable: true
Expand All @@ -66704,17 +66709,16 @@ console.log(plasticButton.outerHTML); // will output '&lt;button is="plastic-but
this.addEventListener("click", e => {
if (this.disabled) {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
}
});

this._observer = new MutationObserver(() => {
this.setAttribute("aria-label", this.textContent);
this._internals.ariaLabel = this.textContent;
});
}

connectedCallback() {
this.setAttribute("role", "button");
this.setAttribute("tabindex", "0");

this._observer.observe(this, {
Expand All @@ -66731,33 +66735,29 @@ console.log(plasticButton.outerHTML); // will output '&lt;button is="plastic-but
get disabled() {
return this.hasAttribute("disabled");
}

set disabled(v) {
if (v) {
this.setAttribute("disabled", "");
} else {
this.removeAttribute("disabled");
}
set disabled(flag) {
this.toggleAttribute("disabled", Boolean(flag));
}

attributeChangedCallback() {
// only is called for the disabled attribute due to observedAttributes
attributeChangedCallback(name, oldValue, newValue) {
// name will always be "disabled" due to observedAttributes
if (this.disabled) {
this.removeAttribute("tabindex");
this.setAttribute("aria-disabled", "true");
this._internals.ariaDisabled = "true";
} else {
this.setAttribute("tabindex", "0");
this.setAttribute("aria-disabled", "false");
this._internals.ariaDisabled = "false";
}
}
}</code></pre>

<p>Even with this rather-complicated element definition, the element is not a pleasure to use for
consumers: it will be continually "sprouting" <code data-x="attr-tabindex">tabindex</code> and
<code data-x="attr-aria-*">aria-*</code> attributes of its own volition. This is because as of now
there is no way to specify default accessibility semantics or focus behavior for custom elements,
forcing the use of these attributes to do so (even though they are usually reserved for allowing
the consumer to override default behavior).</p>
consumers: it will be continually "sprouting" <code data-x="attr-tabindex">tabindex</code>
attributes of its own volition, and its choice of <code data-x="">tabindex="0"</code> focusability
behavior may not match the <code>button</code> behavior on the current platform. This is because
as of now there is no way to specify default focus behavior for custom elements, forcing the use
of the <code data-x="attr-tabindex">tabindex</code> attribute to do so (even though it is usually
reserved for allowing the consumer to override default behavior).</p>

<p>In contrast, a simple <span>customized built-in element</span>, as shown in the previous
section, would automatically inherit the semantics and behavior of the <code>button</code>
Expand Down

0 comments on commit e32a070

Please sign in to comment.