Optionally support focusable disabled elements

[MarvinPerry]

Check existing issues

• I have checked for existing issues to avoid duplicates

Description

At the moment, calcite-components use the native disabled attribute, which makes elements non-interactive as expected, but that also removes them from the focus order, which makes them inaccessible to users that rely on screen readers or that navigate by keyboard.

We’re proposing a change to how we handle “disabled” states for interactive elements (buttons, menu items and such) both visually and functionally. Instead we’d like these elements to be styled with a .disabled class (with pointer-events: none) and use aria-disabled="true" for accessibility. This would allow elements to remain focusable, so that users can still access tooltips or other contextual guidance explaining why the element is unavailable.

Acceptance Criteria

A .disabled class is added that visually matches our current disabled styling.

• Elements using .disabled should:
  • have pointer-events: none or a similar technique to prevent interaction.
  • have aria-disabled="true" to indicate the disabled state to assistive tech.
  • remain keyboard focusable and not use the disabled attribute, so they remain in the dom

Relevant Info

This change supports accessibility improvements, specifically for screen reader and keyboard-only users that can't currently access tooltips associated with the disabled elements.

Which Component

N/A

Example Use Case

An extremely simple example of our ask:
https://codepen.io/MarvinPerry/pen/qEObOob

Current disabled button

<calcite-button id="my-button" disabled title="with disable attribute">Click me</calcite-button>

<calcite-tooltip reference-element="my-button"> <span>screen readers won't read this</span> </calcite-tooltip>

Proposed disabled button

<calcite-button id="my-button" class="disabled" aria-disabled="true" title="with disabled class">Click me</calcite-button>

<calcite-tooltip reference-element="my-button"> <span>screen readers will read this</span> </calcite-tooltip>


### Priority impact

impact - p3 - not time sensitive

### Calcite package

- [x] @esri/calcite-components
- [x] @esri/calcite-components-react
- [ ] @esri/calcite-design-tokens
- [ ] @esri/calcite-ui-icons
- [ ] @esri/eslint-plugin-calcite-components

### Esri team

ArcGIS Hub

[geospatialem]

@MarvinPerry Calcite follows native disabled functionality, however the above could be achieved preventing the default behavior and some context provided both visually and to assistive technologies.

Would setting different attributes/properties work for the use case, where the button isn't disabled, but context is provided visually and through assistive technologies using the component's kind, label, preventing the default behavior, and toggling the tooltip's hidden attributes?: https://codepen.io/geospatialem/pen/xbwZrNV