Implement a selection state that is distinct from focus visibility.

[edschema]

Description
Currently, there is no visible styling to indicate an object is selected. When an object is clicked, a focus style is applied. When you click out of the object, it is still selected, but the focus styling (border) disappears.

Proposed solution
Designs in progress by @sdaitzman. The proposed solution should follow the latest WCAG.

[sdaitzman]

Proposed Design

[Figma link]

This is an incremental proposed change to fix this usability bug. Longer-term, we plan to revisit and enhance selection/focus styles.

Spec

Selection Definition

A component is selected if (and only if) its sidebar is open, and it has the selected visual state. This connection is mutually overlapping, i.e. every component is either A. not selected, with no sidebar open, and no selected visual state, or B. selected, with its sidebar open, and with the selected visual state.

Component selection is also linked to the URL slug (in other words, the URL slug should include the selected object at the end when it is selected, and should not include it when it is not selected).

Selection Mechanism

Clicking a component card or component list item in the main view should select a component

Clicking “edit” or “add to collection” from the overflow menu should select a component

Opening any other sidebar (page level sidebar or a different component) should:

• de-select the previously selected component
• select the component for which the sidebar is open

If using tab navigation, hitting enter on a focused component should select the component

Selection Style Must Be Clear

Selection status should be visible by looking at the component within a grid

Whenever a component is selected, the sidebar for that component should be open

Selection style must be distinct from focus style

Selection Style is Distinct from Focus Style

Component objects have independent visual states that can overlap:

• Hovering increases shadow
• Selection adds a medium border
• Focus adds a thin, lighter outer border; when overlapping with selection, this thin outer border matches the selection border color

[pomegranited]

@sdaitzman @edschema This is ready for AC testing on the sandbox

[sdaitzman]

Thanks @pomegranited! I see the new selection behavior live in unit pages on the sandbox, and it looks fantastic. I'm still seeing the same selection/focus behavior on all other pages; has a change been pushed to card selection on the Library Browse page?

Screen.Recording.2025-05-13.at.11.07.31.PM.mov