[Bug][a11y]: Tray component lacks visually hidden dismiss button to close the overlay on mobile

[majornista]

trafficstars

Code of conduct

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

Impacted component(s)

Tray

Expected behavior

Like a Picker or ActionMenu, Tray should include a Dismiss button before and after the menu or dialog content so that the overlay can be dismissed using a mobile screen reader.

See the following example from Picker:

https://github.com/adobe/spectrum-web-components/blob/8eb28c866c960b2cf27930cc1eab8f96e2c057d9/packages/picker/src/Picker.ts#L474C19-L521

Actual behavior

Tray examples lack visually hidden dismiss button to close the overlay on mobile.

Screenshots

No response

What browsers are you seeing the problem in?

No response

How can we reproduce this issue?

1. Go to '...'
2. Click on '....'
3. Scroll to '....'
4. Check console
5. See error

Sample code that illustrates the problem

No response

Logs taken while reproducing problem

No response

[Westbrook]

So, in the case where Picker leverages this interface, it does so within a Tray. It feels like most use cases would have a specialized approach to closing (whether these hidden buttons or an actual button, etc.) that would be more appropriate that having this approach baked into the component. Could you share some use cases that might help me see the path you've highlighted with this issue?

[majornista]

So, in the case where Picker leverages this interface, it does so within a Tray. It feels like most use cases would have a specialized approach to closing (whether these hidden buttons or an actual button, etc.) that would be more appropriate that having this approach baked into the component. Could you share some use cases that might help me see the path you've highlighted with this issue?

I noticed this as a problem in the Menu example for Tray at https://opensource.adobe.com/spectrum-web-components/components/tray/#menu.

We might simply add visually hidden dismiss buttons to this example with an explanation that the button is necessary so that a touch screen reader user can dismiss the Tray. Otherwise, developers will simply copy and paste this code without understanding that it includes no mechanism for closing the Tray with a screen reader.

[Westbrook]

I noticed this as a problem in the Menu example for Tray at https://opensource.adobe.com/spectrum-web-components/components/tray/#menu.

This makes sense. Thanks for the additional information.

For clarity on our end, expanding this demo to include the hidden close buttons would address this issue?