feat(polyfill): add basic aom support

Author: calebdwilliams

Diff for: README.md

@@ -57,4 +57,5 @@ The currently-supported features of `ElementInternals` for form-associated custo
 
 ## Current limitations
 
-Right now providing a cross-browser compliant version of `ElementInternals.reportValidity` is not supported. The method essentially behaves as a proxy for `ElementInternals.checkValidity`.
+- Right now providing a cross-browser compliant version of `ElementInternals.reportValidity` is not supported. The method essentially behaves as a proxy for `ElementInternals.checkValidity`.
+- The polyfill does support the outcomes of the [Accessibility Object Model](https://wicg.github.io/aom/explainer.html#) for applying accessibility rules on the DOM object. However, the spec states that updates using AOM will not be reflected by DOM attributes, but only on the element's accesibility object. However, to emulate this behavior before it is fully supported, it is necessary to use the attributes. If you choose to use this feature, please note that behavior in polyfilled browsers and non-polyfilled browsers will be different; however, the outcome for users will be the same.

Diff for: src/aom.js

@@ -0,0 +1,62 @@
+import { upgradeMap } from './maps.js';
+
+export const aom = {
+  ariaAtomic: 'aria-atomic',
+  ariaAutoComplete: 'aria-autocomplete',
+  ariaBusy: 'aria-busy',
+  ariaChecked: 'aria-checked',
+  ariaColCount: 'aria-colcount',
+  ariaConIndex: 'aria-colindex',
+  ariaColSpan: 'aria-colspan',
+  ariaCurrent: 'aria-current',
+  ariaDisabled: 'aria-disabled',
+  ariaExpanded: 'aria-expanded',
+  ariaHasPopup: 'aria-haspopup',
+  ariaHidden: 'aria-hidden',
+  ariaKeyShortcuts: 'aria-keyshortcuts',
+  ariaLabel: 'aria-label',
+  ariaLevel: 'aria-level',
+  ariaLive: 'aria-live',
+  ariaModal: 'aria-modal',
+  ariaMultiLine: 'aria-multiline',
+  ariaMultiSelectable: 'aria-multiselectable',
+  ariaOrientation: 'aria-orientation',
+  ariaPlaceholder: 'aria-placeholder',
+  ariaPosInSet: 'aria-posinset',
+  ariaPressed: 'aria-pressed',
+  ariaReadOnly: 'aria-readonly',
+  ariaRelevant: 'aria-relevant',
+  ariaRequired: 'aria-required',
+  ariaRoleDescription: 'aria-roledescription',
+  ariaRowCount: 'aria-rowcount',
+  ariaRowIndex: 'aria-rowindex',
+  ariaRowSpan: 'aria-rowspan',
+  ariaSelected: 'aria-selected',
+  ariaSort: 'aria-sort',
+  ariaValueMax: 'aria-valuemax',
+  ariaValueMin: 'aria-valuemin',
+  ariaValueNow: 'aria-valuenow',
+  ariaValueText: 'aria-valuetext'
+};
+
+export const initAom = (ref, internals) => {
+  for (let key in aom) {
+    internals[key] = null;
+
+    let closureValue = null;
+    const attributeName = aom[key];
+    Object.defineProperty(internals, key, {
+      get() {
+        return closureValue;
+      },
+      set(value) {
+        closureValue = value;
+        if (ref.isConnected) {
+          ref.setAttribute(attributeName, value);
+        } else {
+          upgradeMap.set(ref, internals);
+        }
+      }
+    });
+  }
+};

Diff for: src/element-internals.js

@@ -7,6 +7,7 @@ import {
   formElementsMap,
   refValueMap
 } from './maps.js';
+import { aom, initAom } from './aom.js';
 import { getHostRoot, initRef, initLabels, initForm, findParentForm } from './utils.js';
 import { ValidityState, reconcileValidty, setValid } from './ValidityState.js';
 import { observerCallback, observerConfig } from './mutation-observers.js';
@@ -21,6 +22,7 @@ class ElementInternals {
     validityMap.set(this, validity);
     internalsMap.set(ref, this);
     const { labels, form } = this;
+    initAom(ref, this);
     Object.seal(this);
 
     initRef(ref);

Diff for: src/maps.js

@@ -27,3 +27,10 @@ export const formElementsMap = new WeakMap();
  * @type {WeakMap<HTMLElement, any>}
  */
 export const refValueMap = new WeakMap();
+
+
+/**
+ * Elements that need to be upgraded once added to the DOM
+ * @type {WeakMap<HTMLElement, ElemntInternals>}
+ */
+export const upgradeMap = new WeakMap();

Diff for: src/mutation-observers.js

@@ -1,4 +1,5 @@
-import { internalsMap, shadowHostsMap } from './maps.js';
+import { internalsMap, shadowHostsMap, upgradeMap } from './maps.js';
+import { aom } from './aom.js';
 import { initForm } from './utils.js';
 
 export function observerCallback(mutationList) {
@@ -11,6 +12,18 @@ export function observerCallback(mutationList) {
 
         initForm(node, form, internals);
       }
+
+      if (upgradeMap.has(node)) {
+        const internals = upgradeMap.get(node);
+        const aomKeys = Object.keys(aom);
+        aomKeys
+          .filter(key => internals[key] !== null)
+          .forEach(key => {
+            console.log({key})
+            node.setAttribute(aom[key], internals[key]);
+          });
+        upgradeMap.delete(node);
+      }
     });
 
     Array.from(removedNodes).forEach(node => {

Diff for: static/scripts/foo-bar.js

@@ -9,6 +9,7 @@ export class FooBar extends HTMLElement {
       delegatesFocus: true
     });
     this.internals_ = this.attachInternals();
+    this.internals_.ariaChecked = true;
     this._handleChanges = this._handleChanges.bind(this);
   }