Skip to content

Commit

Permalink
feat: DAYL-88 Backdrop > Improve a11y docn (#5343)
Browse files Browse the repository at this point in the history
Adding Accessibility section and improving the intro text
  • Loading branch information
geurts authored Jan 24, 2025
1 parent ab08a88 commit c463e8b
Showing 1 changed file with 8 additions and 2 deletions.
10 changes: 8 additions & 2 deletions components/backdrop/README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Backdrops

The `d2l-backdrop` element displays a semi-transparent backdrop behind a specified sibling target element. It also hides elements other than the target from assistive technologies by applying `aria-hidden="true"`.
Use a backdrop to de-emphasize background elements and draw the user's attention to a dialog or other modal content.

## Backdrop [d2l-backdrop]

Expand Down Expand Up @@ -42,4 +42,10 @@ Elements with `aria-hidden` applied (as well as their descendants) are completel

**When showing a backdrop**: first move focus inside the target, then set the `shown` attribute on the backdrop.

**When hiding a backdrop**: first remove the `shown` attribute on the backdrop, then if appropriate move focus outside the target.
**When hiding a backdrop**: first remove the `shown` attribute on the backdrop, then if appropriate move focus outside the target.

## Accessibility

The backdrop hides background elements from screen reader users by setting `aria-hidden="true"` on all elements other than the target element specified in `for-target`.

Before showing the backdrop, focus should be moved inside the target element — see [Focus Management](#focus-management) for more details.

0 comments on commit c463e8b

Please sign in to comment.