fix(action menu): keyboard accessibility omnibus

.changeset/lemon-points-ring.md

@@ -0,0 +1,16 @@
+---
+'@spectrum-web-components/reactive-controllers': minor
+'@spectrum-web-components/action-menu': minor
+'@spectrum-web-components/picker': minor
+'@spectrum-web-components/menu': minor
+---
+
+Used WAI ARIA Authoring Practices Guide (APG) to make accessibility improvements for `<sp-action-menu>`, `<sp-menu>`, and `<sp-picker>`, including:
+ - Numpad keys now work with `<sp-picker>` and `<sp-action-menu>`
+ -`<sp-action-menu>`'s `<sp-menu-item>` elements can now be read by a screen reader ([#4556](https://github.com/adobe/spectrum-web-components/issues/4556))
+ - `<sp-menu-item>` href can now be clicked by a screen reader ([#4997](https://github.com/adobe/spectrum-web-components/issues/4997))
+ - Opening a `<sp-action-menu>`, `<sp-menu>`, and `<sp-picker>` with a keyboard now sets focus on an item within the menu. ([#4557](https://github.com/adobe/spectrum-web-components/issues/4557))
+
+ See the following APG examples for more information:
+ - [Navigation Menu Example](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/examples/menubar-navigation/)
+ - [Editor Menubar Example](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/examples/menubar-editor/)

packages/action-menu/src/ActionMenu.ts

@@ -135,4 +135,32 @@ export class ActionMenu extends ObserveSlotPresence(
         }
         super.update(changedProperties);
     }
+
+    protected override hasAccessibleLabel(): boolean {
+        return (
+            !!this.label ||
+            !!this.getAttribute('aria-label') ||
+            !!this.getAttribute('aria-labelledby') ||
+            !!this.appliedLabel ||
+            this.hasLabel ||
+            this.labelOnly
+        );
+    }
+
+    protected override warnNoLabel(): void {
+        window.__swc.warn(
+            this,
+            `<${this.localName}> needs one of the following to be accessible:`,
+            'https://opensource.adobe.com/spectrum-web-components/components/action-menu/#accessibility',
+            {
+                type: 'accessibility',
+                issues: [
+                    `an <sp-field-label> element with a \`for\` attribute referencing the \`id\` of the \`<${this.localName}>\`, or`,
+                    'value supplied to the "label" attribute, which will be displayed visually as placeholder text',
+                    'text content supplied in a <span> with slot="label", or, text content supplied in a <span> with slot="label-only"',
+                    'which will also be displayed visually as placeholder text.',
+                ],
+            }
+        );
+    }
 }

packages/action-menu/test/action-menu-groups.test.ts

@@ -24,11 +24,10 @@ describe('Action Menu - Groups', () => {
             groupsWithSelects({ onChange: () => {} })
         );
 
-        const firstGroup = el.querySelector('sp-menu-group') as HTMLElement;
         const firstItem = el.querySelector('sp-menu-item') as MenuItem;
 
         expect(firstItem.focused).to.be.false;
-        expect(document.activeElement === firstGroup).to.be.false;
+        expect(document.activeElement === firstItem).to.be.false;
 
         const opened = oneEvent(el, 'sp-opened');
         el.focus();
@@ -39,7 +38,7 @@ describe('Action Menu - Groups', () => {
 
         expect(firstItem.focused).to.be.true;
         expect(
-            document.activeElement === firstGroup,
+            document.activeElement === firstItem,
             document.activeElement?.localName
         ).to.be.true;
     });

packages/action-menu/test/index.ts

@@ -436,56 +436,6 @@ export const testActionMenu = (mode: 'sync' | 'async'): void => {
 
             expect(firstRect).to.deep.equal(secondRect);
         });
-        it('opens and selects in a single pointer button interaction', async () => {
-            const el = await actionMenuFixture();
-            const thirdItem = el.querySelector(
-                'sp-menu-item:nth-of-type(3)'
-            ) as MenuItem;
-            const boundingRect = el.button.getBoundingClientRect();
-
-            expect(el.value).to.not.equal(thirdItem.value);
-            const opened = oneEvent(el, 'sp-opened');
-            await sendMouse({
-                steps: [
-                    {
-                        type: 'move',
-                        position: [
-                            boundingRect.x + boundingRect.width / 2,
-                            boundingRect.y + boundingRect.height / 2,
-                        ],
-                    },
-                    {
-                        type: 'down',
-                    },
-                ],
-            });
-            await opened;
-
-            const thirdItemRect = thirdItem.getBoundingClientRect();
-            const closed = oneEvent(el, 'sp-closed');
-            let selected = '';
-            el.addEventListener('change', (event: Event) => {
-                selected = (event.target as ActionMenu).value;
-            });
-            await sendMouse({
-                steps: [
-                    {
-                        type: 'move',
-                        position: [
-                            thirdItemRect.x + thirdItemRect.width / 2,
-                            thirdItemRect.y + thirdItemRect.height / 2,
-                        ],
-                    },
-                    {
-                        type: 'up',
-                    },
-                ],
-            });
-            await closed;
-
-            expect(el.open).to.be.false;
-            expect(selected).to.equal(thirdItem.value);
-        });
         it('has attribute aria-describedby', async () => {
             const name = 'sp-picker';
             const description = 'Rendering a Picker';

packages/menu/menu-group.md

@@ -33,7 +33,7 @@ An `<sp-menu-group>` can be used to organize `<sp-menu-item>`s in an `<sp-memu>`
 <p>
     Your favorite park in New York is: <span id="group-1-value"></span>
     <br><br>
-    Your favorite park in San Fransisco is: <span id="group-2-value"></span>
+    Your favorite park in San Francisco is: <span id="group-2-value"></span>
 </p>
 <sp-popover open style="position: relative">
     <sp-menu
@@ -62,7 +62,7 @@ An `<sp-menu-group>` can be used to organize `<sp-menu-item>`s in an `<sp-memu>`
             id="group-2"
             selects="single"
         >
-            <span slot="header">San Fransisco</span>
+            <span slot="header">San Francisco</span>
             <sp-menu-item>
                 Golden Gate Park
             </sp-menu-item>

packages/menu/menu-item.md

@@ -95,12 +95,35 @@ Content assigned to the `value` slot will be placed at the end of the `<sp-menu-
 An `<sp-menu-item>` can also accept content addressed to its `submenu` slot. Using the `<sp-menu>` element with this slot name the options will be surfaced in flyout menu that can be activated by hovering over the root menu item with your pointer or focusing the menu item and pressing the appropriate `ArrowRight` or `ArrowLeft` key based on text direction to move into the submenu.
 
 ```html
-<sp-menu style="width: 200px;">
+<p>
+    Your favorite park in New York is:
+    <span id="group-1-value"></span>
+    <br />
+    <br />
+    Your favorite park in San Francisco is:
+    <span id="group-2-value"></span>
+</p>
+<sp-menu
+    style="width: 200px;"
+    onchange="this.parentElement
+        .previousElementSibling
+        .querySelector(`#${arguments[0].target.id}-value`)
+        .textContent = arguments[0].target.value"
+>
+    <sp-menu-item>
+        New York
+        <sp-menu slot="submenu" selects="single">
+            <sp-menu-item>Central Park</sp-menu-item>
+            <sp-menu-item>Flushing Meadows Corona Park</sp-menu-item>
+            <sp-menu-item>Prospect Park</sp-menu-item>
+        </sp-menu>
+    </sp-menu-item>
     <sp-menu-item>
-        Item with submenu
-        <sp-menu slot="submenu">
-            <sp-menu-item>Additional options</sp-menu-item>
-            <sp-menu-item>Available on request</sp-menu-item>
+        San Francisco
+        <sp-menu slot="submenu" selects="single">
+            <sp-menu-item>Golden Gate Park</sp-menu-item>
+            <sp-menu-item>John McLaren Park</sp-menu-item>
+            <sp-menu-item>Lake Merced Park</sp-menu-item>
         </sp-menu>
     </sp-menu-item>
 </sp-menu>