element-internals-polyfill - npm Package Compare versions

Comparing version 0.0.14 to 0.0.15

CHANGELOG.md

@@ -5,2 +5,9 @@ # Changelog
 
+### [0.0.15](https://github.com/calebdwilliams/element-internals-polyfill/compare/v0.0.14...v0.0.15) (2020-04-28)
+
+
+### Features
+
+* **polyfill:** add basic aom support ([a2696c2](https://github.com/calebdwilliams/element-internals-polyfill/commit/a2696c2147237849ce165f42411c34adb924169c))
+
 ### [0.0.14](https://github.com/calebdwilliams/element-internals-polyfill/compare/v0.0.13...v0.0.14) (2020-04-27)
@@ -7,0 +14,0 @@

dist/element-internals.js

@@ -31,2 +31,70 @@ (function () {
 
+
+  /**
+   * Elements that need to be upgraded once added to the DOM
+   * @type {WeakMap<HTMLElement, ElemntInternals>}
+   */
+  const upgradeMap = new WeakMap();
+
+  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'
+  };
+
+  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);
+          }
+        }
+      });
+    }
+  };
+
   const observerConfig = { attributes: true };
@@ -263,2 +331,14 @@
         }
+
+        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);
+        }
       });
@@ -291,2 +371,3 @@
       const { labels, form } = this;
+      initAom(ref, this);
       Object.seal(this);
@@ -293,0 +374,0 @@

package.json

 {
   "name": "element-internals-polyfill",
-  "version": "0.0.14",
+  "version": "0.0.15",
   "description": "A polyfill for the element internals specification",
@@ -5,0 +5,0 @@ "main": "dist/element-internals.js",

README.md

@@ -60,2 +60,3 @@ # Element Internals Polyfill
 
-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.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

24276

increased by15.48%

Lines of code

442

increased by20.44%

Number of lines in readme file

61

increased by1.67%

No dependency changes