Description

This task describes the Storybook implementation for the sd-expandable component as part of the A11y improvements outlined in Epic #1465.

A11y improvements for sd-checkbox can be found here: sd-expandable Notes.

Comment

I don't know what to do with this pattern. There are two issues that I don't know how to solve with the current implementation:

1. Content is only visually hidden, meaning screen reader users will always have access to the entire content.
2. The button is useless for most screen reader users because it only controls the visual rather than the semantic visibility of the content.

Some thoughts:

• Setting aria-hidden=true on the button is not an option because aria-hidden interactive elements are still accessible to screen reader users who use the Tab key.
  You could split the content slot into two slots, one that contains the visible portion and another that includes the entire (probably easier than the remaining) content. You swap them when the user clicks the button.
• That would eliminate the need for --component-expandable-max-block-size.
• You would have to add and toggle aria-expanded on the button.
• That makes animation trickier if you decide to add a transition.

Best Practices

• Only hide non-critical content
• Avoid generic summaries like “show more”

Solution

We move the button element before the content which is hidden for screen readers until the user clicks the button. The button should also receive an explanatory screen reader information about the possibility to show the expandable content.

Pls also change the button text to something more specific and add a11y hints like mentioned in the best practices above.

NOTE: pls also have a look into the template in order to make it work properly and descriptions and labels match the content shown in the template.

DoR

• Item has been estimated by the team
• Item dependencies have been identified and documented

DoD

• Documentation has been created/updated (if applicable)
• Migration Guide has been created/updated (if applicable)
• Relevant E2E tests (Features, A11y, Bug fixes) are created/updated
• Relevant stories (Features, A11y) are created/updated
• Implementation works successfully on feature branch