From e32a070cbd6c04fe8a82090abeb4d022ecc8a557 Mon Sep 17 00:00:00 2001
From: Domenic Denicola <d@domenic.me>
Date: Thu, 22 Aug 2019 14:55:52 -0400
Subject: [PATCH] Update examples

---
 source | 96 +++++++++++++++++++++++++++++-----------------------------
 1 file changed, 48 insertions(+), 48 deletions(-)

diff --git a/source b/source
index 5fa6e280e7e..a56fb3eae93 100644
--- a/source
+++ b/source
@@ -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
@@ -66449,11 +66450,11 @@ 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));
   }
 
@@ -66461,14 +66462,16 @@ document.body.appendChild(flagIcon)</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);
+  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>
@@ -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';
@@ -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>
@@ -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
@@ -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
@@ -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
@@ -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, {
@@ -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>