fix: add role to aom

calebdwilliams · Oct 11, 2021 · 16a1f6c · 16a1f6c
1 parent d1dae8c
commit 16a1f6c
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 1 deletion.
diff --git a/src/aom.ts b/src/aom.ts
@@ -37,7 +37,8 @@ export const aom: IAom = {
   ariaValueMax: 'aria-valuemax',
   ariaValueMin: 'aria-valuemin',
   ariaValueNow: 'aria-valuenow',
-  ariaValueText: 'aria-valuetext'
+  ariaValueText: 'aria-valuetext',
+  role: 'role'
 };
 
 export const initAom = (ref: Element, internals: IElementInternals) => {

diff --git a/src/element-internals.ts b/src/element-internals.ts
@@ -60,6 +60,7 @@ export class ElementInternals implements IElementInternals {
   ariaValueMin: string;
   ariaValueNow: string;
   ariaValueText: string;
+  role: string;
 
   states: CustomStateSet;
 

diff --git a/src/types.ts b/src/types.ts
@@ -38,6 +38,7 @@ export interface IAom {
   ariaValueMin: string;
   ariaValueNow: string;
   ariaValueText: string;
+  role: string;
 }
 
 export interface IElementInternals extends IAom {

diff --git a/test/polyfilledBrowsers.test.js b/test/polyfilledBrowsers.test.js
@@ -98,5 +98,34 @@ describe('ElementInternals polyfill behavior', () => {
         expect(el.hasAttribute('internals-disabled')).to.be.false;
       }
     });
+
+    it('will reflect internals.role', async () => {
+      if (ElementInternals.isPolyfilled) {
+        el.internals.role = 'button';
+        await aTimeout();
+        expect(el.getAttribute('role')).to.equal('button');
+      }
+    });
+  });
+
+  describe('CustomStateSet', () => {
+    let el;
+    let states;
+
+    class StateSetElement extends HTMLElement {
+      constructor() {
+        super();
+
+        this.internals = this.attachInternals();
+      }
+    }
+
+    customElements.define('state-set-element', StateSetElement);
+
+    beforeEach(async () => {
+      el = await fixture(html`<state-set-element></state-set-element>`);
+      console.log({el})
+      states = el.internals.states;
+    });
   });
 });