Skip to content

Tooltips for disabled elements #1894

@jgiardino

Description

@jgiardino

For a tooltip to be accessible for keyboard-only users, the element with the tooltip needs to be able to receive keyboard focus. Elements like <button> that support the disabled attribute cannot receive keyboard focus.

To continue to render these elements as disabled but enable keyboard focus, the following changes are needed:

  • Remove disabled
  • Add aria-disabled="true"
  • Make sure the pf-m-disabled class or similar is included on the element to apply the disabled styling.
  • If the element is a link, remove tabindex="-1"

We should update all interactive elements to include a prop that allows the consumer to make the element disabled but focusable so the element can be used with the Tooltip component. This prop should apply the appropriate attributes and classes for the given element.

Unless someone has a better suggestion, the prop could be named isDisabledFocusable (totally open to suggestions on this one)

Components that should be updated are:

  • Application launcher
  • Button (see note above about links, which are supported in the Button)
  • Checkbox
  • Context selector
  • Dropdown (DropdownToggle, KebabToggle)
  • FormSelect
  • Options menu
  • Radio
  • Select
  • Switch
  • Text area
  • Text input

We could simplify this list if there are any components here that we think are less likely to be disabled and with a tooltip.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions