Skip to content

[EuiButton] Implement focusable disabled state behavior #9098

@mgadewoll

Description

@mgadewoll

Description

To improve the usability of disabled buttons without breaking accessibility, we want to update EUI buttons to use the aria-disabled attribute instead of the native disabled attribute to indicate disabled button states.

aria-disabled will ensure the semantic markup while keeping the button element focusable. This comes with additional manual work though: We need to manually handle unsetting mouse/keyboard events to ensure a similar experience to the native disabled attribute.

Acceptance criteria

This task will implement the base setup for the required changes:

  • provide re-useable functionality to apply aria-disabled over disabled
  • implement a theme feature flag to support rolling out the changes as opt-in "Beta" changes
  • update base button components to use the new disabled utility (EuiButton, EuiButtonEmpty, EuiButtonIcon and automatically any other component using these button components)
    • updates usages of :disabled CSS selector where needed
  • provide test helpers to ensure we test for both aria-disabled and disabled attributes (jest, cypress, enzyme)
  • update tests for button components using the new test helpers
  • test the changes against an example usage in Kibana and Cloud-UI

Metadata

Metadata

Assignees

Type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions