calcite-input: ensure that the cross icon that appears at the end of the input field when adding the clearable attribute is keyboard operable

[sakship2204]

Check existing issues

• [X] I have checked for existing issues to avoid duplicates

Summary

When we add the clearable attribute to the calcite-input component, we get a cross icon to clear the text that we enter in the field. This clearable icon is not keyboard operable. We want to make it accessible using tab key for the specially abled users.

Actual Behavior

The clear button at the end of the calcite-input is not keyboard operable.

Expected Behavior

The clear button should be keyboard operable.

Reproduction Sample

--

Reproduction Steps

1. Enter any text in the calcite-input component
2. Press Tab repeatedly to navigate through the focusable elements on the page.
3. Notice that the links are never focused.

Reproduction Version

--

Working W3C Example/Tutorial

No response

Relevant Info

No response

Regression?

No response

Priority impact

impact - p1 - need for current milestone

Calcite package

• [X] @esri/calcite-components
• [ ] @esri/calcite-components-angular
• [ ] @esri/calcite-components-react
• [ ] @esri/calcite-design-tokens
• [ ] @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Enterprise

[macandcheese]

This is an intentional decision. Discussion: https://github.com/Esri/calcite-design-system/issues/2381