[Bug]: Safari: Picker component cannot be tabbed into

[Rajdeepc]

Code of conduct

• I agree to follow this project's code of conduct.

Impacted component(s)

Picker

Expected behavior

• Tab key should focus the Picker component
• Shift+Tab should also work for reverse navigation
• Picker should be accessible via keyboard navigation

Actual behavior

Safari

• Tab key skips over the Picker component
• No focus indication when attempting to tab to the Picker
• Component is not accessible via keyboard navigation

Chrome/Other Browsers

• Tab key properly focuses the Picker component ✅
• Shift+Tab works correctly ✅
• Component is fully accessible via keyboard ✅

Screenshots

No response

What browsers are you seeing the problem in?

Safari

How can we reproduce this issue?

1. Go to https://opensource.adobe.com/spectrum-web-components/storybook/index.html?path=/story/picker--default
2. try to tab on to the Picker component
3. There is no tab stop

Sample code or abstract reproduction which illustrates the problem

if (!isSafari) {
    await sendKeys({ press: 'Tab' });
    expect(document.activeElement).to.equal(input);
    await sendKeys({ press: 'Shift+Tab' });
}

Solution

Add explicit tabindex="0" to the button element in the Picker component:

<button
    tabindex="0"
    aria-controls=${ifDefined(this.open ? 'menu' : undefined)}
    aria-describedby="tooltip ${DESCRIPTION_ID}"
    aria-expanded=${this.open ? 'true' : 'false'}
    aria-haspopup="true"
    aria-labelledby="loader icon label applied-label"
    id="button"
    ...
>

Severity

SEV 2

Logs taken while reproducing problem

No response

Would you like to track this issue in Jira?

• Yes, please tell me the ticket number!

[Rajdeepc]

@caseyisonit for your eyes!