fix(action-button,action-menu,picker,split-button): expand and update…

… application of aria-* attributes
adobe · Jul 11, 2023 · 52c0156 · 52c0156
1 parent 3239f46
commit 52c0156
Show file tree

Hide file tree

Showing 7 changed files with 111 additions and 4 deletions.
diff --git a/packages/action-button/src/ActionButton.ts b/packages/action-button/src/ActionButton.ts
@@ -210,7 +210,13 @@ export class ActionButton extends SizedMixin(ButtonBase, {
     protected override updated(changes: PropertyValues): void {
         super.updated(changes);
         const isButton = this.role === 'button';
-        const canBePressed = isButton && (this.selected || this.toggles);
+        const canBePressed =
+            isButton &&
+            (this.selected || this.toggles) &&
+            !(
+                this.hasAttribute('aria-haspopup') &&
+                this.hasAttribute('aria-expanded')
+            );
         if (changes.has('selected') || changes.has('role')) {
             // When role !== 'button' then the Action Button is within
             // an Action Group that manages selects which means the
@@ -224,6 +230,16 @@ export class ActionButton extends SizedMixin(ButtonBase, {
             } else {
                 // When !this.toggles the lack of "aria-pressed" is inconsequential.
                 this.removeAttribute('aria-pressed');
+                if (
+                    isButton &&
+                    this.toggles &&
+                    this.hasAttribute('aria-expanded')
+                ) {
+                    this.setAttribute(
+                        'aria-expanded',
+                        this.selected ? 'true' : 'false'
+                    );
+                }
             }
         }
     }

diff --git a/packages/action-button/test/action-button.test.ts b/packages/action-button/test/action-button.test.ts
@@ -235,4 +235,48 @@ describe('ActionButton', () => {
         expect(el.selected).to.be.true;
         expect(button.getAttribute('aria-pressed')).to.equal('true');
     });
+    it('toggles [aria-haspopup][aria-expanded]', async () => {
+        const el = await fixture<ActionButton>(
+            html`
+                <sp-action-button
+                    toggles
+                    aria-haspopup="true"
+                    aria-expanded="false"
+                >
+                    Button
+                </sp-action-button>
+            `
+        );
+
+        await elementUpdated(el);
+        const button = el.focusElement;
+
+        expect(el.toggles).to.be.true;
+        expect(el.selected).to.be.false;
+        expect(button).not.to.have.attribute('aria-pressed');
+        expect(button).to.have.attribute('aria-haspopup', 'true');
+        expect(button).to.have.attribute('aria-expanded', 'false');
+
+        el.focus();
+        await sendKeys({
+            press: 'Space',
+        });
+        await elementUpdated(el);
+
+        expect(el.toggles).to.be.true;
+        expect(el.selected).to.be.true;
+        expect(button).not.to.have.attribute('aria-pressed');
+        expect(button).to.have.attribute('aria-haspopup', 'true');
+        expect(button).to.have.attribute('aria-expanded', 'true');
+
+        el.addEventListener('change', (event: Event) => event.preventDefault());
+        el.click();
+        await elementUpdated(el);
+
+        expect(el.toggles).to.be.true;
+        expect(el.selected).to.be.true;
+        expect(button).not.to.have.attribute('aria-pressed');
+        expect(button).to.have.attribute('aria-haspopup', 'true');
+        expect(button).to.have.attribute('aria-expanded', 'true');
+    });
 });
diff --git a/packages/action-menu/src/ActionMenu.ts b/packages/action-menu/src/ActionMenu.ts
@@ -65,7 +65,7 @@ export class ActionMenu extends ObserveSlotText(PickerBase, 'label') {
                 ?quiet=${this.quiet}
                 ?selected=${this.open}
                 aria-haspopup="true"
-                aria-controls="popover"
+                aria-controls=${ifDefined(this.open ? 'menu' : undefined)}
                 aria-expanded=${this.open ? 'true' : 'false'}
                 aria-label=${ifDefined(this.label || undefined)}
                 id="button"

diff --git a/packages/action-menu/test/index.ts b/packages/action-menu/test/index.ts
@@ -275,6 +275,9 @@ export const testActionMenu = (mode: 'sync' | 'async'): void => {
             button.click();
             await elementUpdated(el);
             expect(el.open).to.be.true;
+            expect(button).to.have.attribute('aria-haspopup', 'true');
+            expect(button).to.have.attribute('aria-expanded', 'true');
+            expect(button).to.have.attribute('aria-controls', 'menu');
         });
         it('opens unmeasured with deprecated syntax', async () => {
             const el = await deprecatedActionMenuFixture();
@@ -290,6 +293,12 @@ export const testActionMenu = (mode: 'sync' | 'async'): void => {
             const el = await actionMenuFixture();
 
             await elementUpdated(el);
+
+            const button = el.button as HTMLButtonElement;
+            expect(button).to.have.attribute('aria-haspopup', 'true');
+            expect(button).to.have.attribute('aria-expanded', 'false');
+            expect(button).not.to.have.attribute('aria-controls');
+
             let items = el.querySelectorAll('sp-menu-item');
             const count = items.length;
             expect(items.length).to.equal(count);
@@ -299,6 +308,8 @@ export const testActionMenu = (mode: 'sync' | 'async'): void => {
             await opened;
 
             expect(el.open).to.be.true;
+            expect(button).to.have.attribute('aria-expanded', 'true');
+            expect(button).to.have.attribute('aria-controls', 'menu');
             items = el.querySelectorAll('sp-menu-item');
             expect(items.length).to.equal(0);
 
@@ -307,6 +318,8 @@ export const testActionMenu = (mode: 'sync' | 'async'): void => {
             await closed;
 
             expect(el.open).to.be.false;
+            expect(button).to.have.attribute('aria-expanded', 'false');
+            expect(button).not.to.have.attribute('aria-controls');
             items = el.querySelectorAll('sp-menu-item');
             expect(items.length).to.equal(count);
 
@@ -315,6 +328,8 @@ export const testActionMenu = (mode: 'sync' | 'async'): void => {
             await opened;
 
             expect(el.open).to.be.true;
+            expect(button).to.have.attribute('aria-expanded', 'true');
+            expect(button).to.have.attribute('aria-controls', 'menu');
             items = el.querySelectorAll('sp-menu-item');
             expect(items.length).to.equal(0);
 
@@ -323,6 +338,8 @@ export const testActionMenu = (mode: 'sync' | 'async'): void => {
             await closed;
 
             expect(el.open).to.be.false;
+            expect(button).to.have.attribute('aria-expanded', 'false');
+            expect(button).not.to.have.attribute('aria-controls');
             items = el.querySelectorAll('sp-menu-item');
             expect(items.length).to.equal(count);
         });

diff --git a/packages/picker/src/Picker.ts b/packages/picker/src/Picker.ts
@@ -458,6 +458,7 @@ export class PickerBase extends SizedMixin(Focusable) {
             ></span>
             <button
                 aria-haspopup="true"
+                aria-controls=${ifDefined(this.open ? 'menu' : undefined)}
                 aria-expanded=${this.open ? 'true' : 'false'}
                 aria-labelledby="icon label applied-label"
                 id="button"
@@ -539,7 +540,7 @@ export class PickerBase extends SizedMixin(Focusable) {
             return html`
                 <sp-tray
                     id="popover"
-                    role="dialog"
+                    role="presentation"
                     @sp-menu-item-added-or-updated=${this.updateMenuItems}
                     .overlayOpenCallback=${this.overlayOpenCallback}
                     .overlayCloseCallback=${this.overlayCloseCallback}
@@ -551,7 +552,7 @@ export class PickerBase extends SizedMixin(Focusable) {
         return html`
             <sp-popover
                 id="popover"
-                role="dialog"
+                role="presentation"
                 @sp-menu-item-added-or-updated=${this.updateMenuItems}
                 .overlayOpenCallback=${this.overlayOpenCallback}
                 .overlayCloseCallback=${this.overlayCloseCallback}

diff --git a/packages/split-button/src/SplitButton.ts b/packages/split-button/src/SplitButton.ts
@@ -150,6 +150,9 @@ export class SplitButton extends SizedMixin(PickerBase) {
                 <sp-button
                     aria-haspopup="true"
                     aria-expanded=${this.open ? 'true' : 'false'}
+                    aria-controls=${ifDefined(
+                        this.open ? this.optionsMenu.id : undefined
+                    )}
                     class="button trigger ${this.variant}"
                     @blur=${this.onButtonBlur}
                     @click=${this.onButtonClick}

diff --git a/packages/split-button/test/index.ts b/packages/split-button/test/index.ts
@@ -109,6 +109,11 @@ export function runSplitButtonTests(
         const el = test.querySelector('sp-split-button') as SplitButton;
 
         await elementUpdated(el);
+
+        const trigger = el.shadowRoot?.querySelector('.trigger');
+        expect(trigger).to.have.attribute('aria-expanded', 'false');
+        expect(trigger).not.to.have.attribute('aria-controls');
+
         let items = el.querySelectorAll('sp-menu-item');
         expect(items.length).to.equal(3);
 
@@ -117,6 +122,8 @@ export function runSplitButtonTests(
         await opened;
 
         expect(el.open).to.be.true;
+        expect(trigger).to.have.attribute('aria-expanded', 'true');
+        expect(trigger).to.have.attribute('aria-controls', 'menu');
         items = el.querySelectorAll('sp-menu-item');
         expect(items.length).to.equal(0);
 
@@ -125,6 +132,8 @@ export function runSplitButtonTests(
         await closed;
 
         expect(el.open).to.be.false;
+        expect(trigger).to.have.attribute('aria-expanded', 'false');
+        expect(trigger).not.to.have.attribute('aria-controls');
         items = el.querySelectorAll('sp-menu-item');
         expect(items.length).to.equal(3);
 
@@ -133,6 +142,8 @@ export function runSplitButtonTests(
         await opened;
 
         expect(el.open).to.be.true;
+        expect(trigger).to.have.attribute('aria-expanded', 'true');
+        expect(trigger).to.have.attribute('aria-controls', 'menu');
         items = el.querySelectorAll('sp-menu-item');
         expect(items.length).to.equal(0);
 
@@ -141,6 +152,8 @@ export function runSplitButtonTests(
         await closed;
 
         expect(el.open).to.be.false;
+        expect(trigger).to.have.attribute('aria-expanded', 'false');
+        expect(trigger).not.to.have.attribute('aria-controls');
         items = el.querySelectorAll('sp-menu-item');
         expect(items.length).to.equal(3);
     });
@@ -151,6 +164,11 @@ export function runSplitButtonTests(
         const el = test.querySelector('sp-split-button') as SplitButton;
 
         await elementUpdated(el);
+
+        const trigger = el.shadowRoot?.querySelector('.trigger');
+        expect(trigger).to.have.attribute('aria-expanded', 'false');
+        expect(trigger).not.to.have.attribute('aria-controls');
+
         let items = el.querySelectorAll('sp-menu-item');
         expect(items.length).to.equal(3);
 
@@ -159,6 +177,8 @@ export function runSplitButtonTests(
         await opened;
 
         expect(el.open).to.be.true;
+        expect(trigger).to.have.attribute('aria-expanded', 'true');
+        expect(trigger).to.have.attribute('aria-controls', 'menu');
         items = el.querySelectorAll('sp-menu-item');
         expect(items.length).to.equal(0);
 
@@ -167,6 +187,8 @@ export function runSplitButtonTests(
         await closed;
 
         expect(el.open).to.be.false;
+        expect(trigger).to.have.attribute('aria-expanded', 'false');
+        expect(trigger).not.to.have.attribute('aria-controls');
         items = el.querySelectorAll('sp-menu-item');
         expect(items.length).to.equal(3);
 
@@ -175,6 +197,8 @@ export function runSplitButtonTests(
         await opened;
 
         expect(el.open).to.be.true;
+        expect(trigger).to.have.attribute('aria-expanded', 'true');
+        expect(trigger).to.have.attribute('aria-controls', 'menu');
         items = el.querySelectorAll('sp-menu-item');
         expect(items.length).to.equal(0);
 
@@ -183,6 +207,8 @@ export function runSplitButtonTests(
         await closed;
 
         expect(el.open).to.be.false;
+        expect(trigger).to.have.attribute('aria-expanded', 'false');
+        expect(trigger).not.to.have.attribute('aria-controls');
         items = el.querySelectorAll('sp-menu-item');
         expect(items.length).to.equal(3);
     });