fix:(picker): add aria describedby action menu, picker, split button (#…

…3586)
adobe · Oct 18, 2023 · d05bdc9 · d05bdc9
1 parent 7b93724
commit d05bdc9
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 3 deletions.
diff --git a/packages/action-menu/src/ActionMenu.ts b/packages/action-menu/src/ActionMenu.ts
@@ -19,7 +19,7 @@ import {
 import { state } from '@spectrum-web-components/base/src/decorators.js';
 import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
 import { property } from '@spectrum-web-components/base/src/decorators.js';
-import { PickerBase } from '@spectrum-web-components/picker';
+import { DESCRIPTION_ID, PickerBase } from '@spectrum-web-components/picker';
 import '@spectrum-web-components/action-button/sp-action-button.js';
 import { ObserveSlotPresence } from '@spectrum-web-components/shared/src/observe-slot-presence.js';
 import { ObserveSlotText } from '@spectrum-web-components/shared/src/observe-slot-text.js';
@@ -87,6 +87,7 @@ export class ActionMenu extends ObserveSlotPresence(
     protected override render(): TemplateResult {
         return html`
             <sp-action-button
+                aria-describedby=${DESCRIPTION_ID}
                 ?quiet=${this.quiet}
                 ?selected=${this.open}
                 static=${ifDefined(this.static)}
@@ -109,7 +110,7 @@ export class ActionMenu extends ObserveSlotPresence(
             >
                 ${this.buttonContent}
             </sp-action-button>
-            ${this.renderMenu}
+            ${this.renderMenu} ${this.renderDescriptionSlot}
         `;
     }
 

diff --git a/packages/action-menu/test/index.ts b/packages/action-menu/test/index.ts
@@ -31,6 +31,7 @@ import {
 } from '../../../test/testing-helpers.js';
 import '@spectrum-web-components/dialog/sp-dialog-base.js';
 import { tooltipDescriptionAndPlacement } from '../stories/action-menu.stories';
+import { findDescribedNode } from '../../../test/testing-helpers-a11y.js';
 import type { Tooltip } from '@spectrum-web-components/tooltip';
 import { sendMouse } from '../../../test/plugins/browser.js';
 import type { TestablePicker } from '../../picker/test/index.js';
@@ -304,6 +305,22 @@ export const testActionMenu = (mode: 'sync' | 'async'): void => {
             expect(button).to.have.attribute('aria-expanded', 'true');
             expect(button).to.have.attribute('aria-controls', 'menu');
         });
+        it('has attribute aria-describedby', async () => {
+            const name = 'sp-picker';
+            const description = 'Rendering a Picker';
+
+            const el = await fixture(html`
+                <sp-action-menu label=${name}>
+                    <sp-menu-item>Select Inverse</sp-menu-item>
+                    <sp-menu-item>Feather...</sp-menu-item>
+                    <span slot="description">${description}</span>
+                </sp-action-menu>
+            `);
+
+            await elementUpdated(el);
+
+            await findDescribedNode(name, description);
+        });
         it('opens unmeasured with deprecated syntax', async () => {
             const el = await deprecatedActionMenuFixture();
 

diff --git a/packages/picker/src/Picker.ts b/packages/picker/src/Picker.ts
@@ -57,6 +57,7 @@ const chevronClass = {
     xl: 'spectrum-UIIcon-ChevronDown300',
 };
 
+export const DESCRIPTION_ID = 'option-picker';
 export class PickerBase extends SizedMixin(Focusable, { noDefaultSize: true }) {
     protected isMobile = new MatchMediaController(this, IS_MOBILE);
 
@@ -417,6 +418,13 @@ export class PickerBase extends SizedMixin(Focusable, { noDefaultSize: true }) {
         `;
     }
 
+    protected get renderDescriptionSlot(): TemplateResult {
+        return html`
+            <div id=${DESCRIPTION_ID}>
+                <slot name="description"></slot>
+            </div>
+        `;
+    }
     // a helper to throw focus to the button is needed because Safari
     // won't include buttons in the tab order even with tabindex="0"
     protected override render(): TemplateResult {
@@ -425,6 +433,7 @@ export class PickerBase extends SizedMixin(Focusable, { noDefaultSize: true }) {
                 id="focus-helper"
                 tabindex="${this.focused || this.open ? '-1' : '0'}"
                 @focus=${this.handleHelperFocus}
+                aria-describedby=${DESCRIPTION_ID}
             ></span>
             <button
                 aria-controls=${ifDefined(this.open ? 'menu' : undefined)}
@@ -447,7 +456,7 @@ export class PickerBase extends SizedMixin(Focusable, { noDefaultSize: true }) {
             >
                 ${this.buttonContent}
             </button>
-            ${this.renderMenu}
+            ${this.renderMenu} ${this.renderDescriptionSlot}
         `;
     }
 
@@ -686,6 +695,7 @@ export class PickerBase extends SizedMixin(Focusable, { noDefaultSize: true }) {
  * @element sp-picker
  *
  * @slot label - The placeholder content for the Picker
+ * @slot description - The description content for the Picker
  * @slot tooltip - Tooltip to to be applied to the the Picker Button
  * @slot - menu items to be listed in the Picker
  * @fires change - Announces that the `value` of the element has changed