Prepared Docs

Prepared Docs

⌘K

    Loading navigation…

User

  1. Components
  2. Modal
  3. Accessibility
  4. Disabled States

Modal

Disabled States

Disabled States

Communicate disabled button states clearly.

Disabled Confirm Button

Disabled confirm buttons are announced appropriately.

Screen readers announce: "Confirm, button, disabled" when the button is disabled, clearly indicating why users cannot proceed.

Destructive Actions

Ensure destructive modals are clearly communicated.

Destructive Styling

Destructive modals use visual and semantic indicators.

The destructive styling provides clear visual feedback, and screen readers can distinguish destructive actions from standard confirmations.

Long Content

Ensure modals with long content remain accessible.

Scrollable Content

Long content should be scrollable while maintaining accessibility.

Screen readers can navigate through long content, and keyboard users can scroll using standard scrolling methods.

Multiple Modals

Ensure multiple modals are properly managed for accessibility.

Modal Stacking

Multiple modals stack with proper focus management.

Focus moves to the most recently opened modal, and screen readers announce the current modal context clearly.

Screen Reader Testing

Test modals with screen readers to ensure proper announcements.

Expected Announcements

Expected sequence:

  1. Modal opens: "Test Modal, dialog"
  2. Content announced: "Test content"
  3. Buttons announced: "Cancel, button" and "Confirm, button"
  4. Focus on confirm button
  5. Modal closes: Focus returns to trigger

Destructive Announcements

Expected announcement: "Delete Item, dialog, This action cannot be undone., Delete, button, destructive"

Previous

Accessibility / Dismissal Accessibility

Next

Navbar / Usage

On this page

Disabled States
Disabled Confirm Button
Destructive Actions
Destructive Styling
Long Content
Scrollable Content
Multiple Modals
Modal Stacking
Screen Reader Testing
Expected Announcements
Destructive Announcements