@spectrum-web-components/tray

Overview

elements are typically used to portray information on mobile device or smaller screens.

$3


``zsh
yarn add @spectrum-web-components/tray
`

Import the side effectful registration of via:

`js
import '@spectrum-web-components/tray/sp-tray.js';
`

When looking to leverage the Tray base class as a type and/or for extension purposes, do so via:

`js
import { Tray } from '@spectrum-web-components/tray';
`

$3

A tray has a single default slot. Expected content typically includes dialogs and their content, plain text, forms and/or form elements, and some native HTML elements. Always ensure that your tray's content is accessible according to WCAG standards.

`html

Toggle tray




New Messages


You have 5 new messages.



`

$3

presents a page blocking experience and should be opened with the Overlay API using the modal interaction to ensure that the content appropriately manages the presence of other content in the tab order of the page and the availability of that content for a screen reader.

#### Auto-detection behavior

By default, automatically detects whether its slotted content includes keyboard-accessible dismiss buttons (like , , or HTML elements). When no dismiss buttons are found, the tray renders visually hidden dismiss buttons before and after its content to support mobile screen readers, particularly VoiceOver on iOS where users navigate through interactive elements sequentially.

These built-in dismiss buttons:

- Are visually hidden but accessible to screen readers
- Allow mobile screen reader users to easily dismiss the tray from either the beginning or end of the content
- Are labeled "Dismiss" for clear screen reader announcements

This dismiss helper pattern is also implemented in the component, which uses the same approach when rendering menu content in a tray on mobile devices.


Content has no buttons


This example shows the default behavior where the tray automatically detects that the content lacks dismiss buttons and renders visually hidden helpers. Screen readers will announce them as "Dismiss, button" and these helpers are keyboard accessible.

`html


Toggle tray content




Custom content that doesn't have dismiss functionality, so the
tray detects it needs the visually-hidden dismiss buttons.

What's your favorite Super Mario character?
name="favorite-characters"
style="margin-block-start: 8px;"
>

Choose your favorite Super Mario character.

Mario
Luigi
Toad
Bowser




`

Content has buttons

This example shows auto-detection recognizing that the dialog has its own dismiss functionality, so no additional helpers are rendered.

`html


Toggle dialog content





New messages


You have 5 new messages.



`

Manual override

Set has-keyboard-dismiss (or has-keyboard-dismiss="true") to prevent the tray from rendering visually hidden dismiss helpers, even when no buttons are detected. You are then responsible for ensuring that your tray content has keyboard-accessible dismiss functionality.

`html


Toggle without helpers





Custom content that should have custom dismiss functionality, even
though the tray didn't detect buttons in this slot.





``