[A11y]: clickable elements inside controls are not available from keyboard

[vasilii-kovalev]

Description

• Make clear button and clickable icon accessible and operable via keyboard by turning them into IconButton-s. The following components are affected:
  • Date Picker
  • Range Date Picker
  • Search Input
  • Text Input
  • Time Picker
  • Picker Input
  • Tag (also covers tags in Picker Input with selectionMode="multiple")
• Assign ref to the input instead of its container in inputs (except Picker Input) (potential breaking change)
• Clear icon and clickable icon don't have .-clickable marker now, because the buttons do (potential breaking change)
• Add hover and focus styles to the clear button and clickable icon where necessary
• Add align-items: center to center the clear button (otherwise its height matches the wrapper's height, which makes the focus outline unpleasantly "tall")
• Change aria-label attribute's value for clear button to "Clear input" to match the one in TextInput
• Remove unnecessary paddings/margins for clear button and clickable icon
• Improvements in tests for TextInput component
  • Remove a duplicate test
  • Handle a null value in setupTextInput

Issue link

#2719

QA notes

[github-actions]

Generated by: track-bundle-size
Generated at: Wed, 03 Sep 2025 09:24:39 GMT
Bundle size diff (in kBytes). Not gzipped. Both CSS & JS included.
Baseline: v6.1.5-beta.1 (2025-07-15)
CI Status: ok

Module	Baseline Size (v6.1.5-beta.1)	Size	Diff	Within Threshold	Threshold (min - max)
templateApp	646.65	664.24	+17.59 js:+6.96 css:+10.63	🆗	581.98 - 711.31
@epam/app	5368.95	5541.84	+172.88 js:+163.48 css:+9.4	🆗	4832.06 - 5905.85
@epam/electric	5.03	5.04	+0.01 js:+0.01 css:0	🆗	4.53 - 5.54
@epam/promo	55.43	55.61	+0.19 js:+0.01 css:+0.18	🆗	49.89 - 60.97
@epam/uui-extra	0.21	0.21	0 js:0 css:0	🆗	0.19 - 0.23
@epam/loveship	92.62	92.8	+0.19 js:+0.01 css:+0.17	🆗	83.35 - 101.88
@epam/uui-components	251.75	250.97	-0.79 js:-0.83 css:+0.05	🆗	226.58 - 276.93
@epam/uui-core	325.46	326.47	+1.01 js:+1.01 css:0	🆗	292.92 - 358.01
@epam/uui-db	41.63	41.63	0 js:0 css:0	🆗	37.47 - 45.8
@epam/uui-docs	179.06	181.02	+1.96 js:+1.96 css:0	🆗	161.15 - 196.96
@epam/uui-editor	173.82	173.87	+0.06 js:+0.03 css:+0.02	🆗	156.44 - 191.2
@epam/uui-timeline	75.5	75.5	+0 js:+0 css:+0	🆗	67.95 - 83.04
@epam/uui	503.4	519.72	+16.32 js:+9.36 css:+6.96	🆗	453.06 - 553.74

new sizes (raw)

To set the sizes as a new baseline, you can copy/paste next content to the uui-build/config/bundleSizeBaseLine.json and commit the file.

{
  "version": "6.2.0",
  "timestamp": "2025-09-03",
  "sizes": {
    "templateApp": {
      "css": 243818,
      "js": 436363
    },
    "@epam/app": {
      "css": 705419,
      "js": 4969417
    },
    "@epam/electric": {
      "css": 2275,
      "js": 2886
    },
    "@epam/promo": {
      "css": 47803,
      "js": 9148
    },
    "@epam/uui-extra": {
      "css": 0,
      "js": 213
    },
    "@epam/loveship": {
      "css": 55372,
      "js": 39660
    },
    "@epam/uui-components": {
      "css": 23273,
      "js": 233715
    },
    "@epam/uui-core": {
      "css": 0,
      "js": 334310
    },
    "@epam/uui-db": {
      "css": 0,
      "js": 42633
    },
    "@epam/uui-docs": {
      "css": 2154,
      "js": 183211
    },
    "@epam/uui-editor": {
      "css": 12936,
      "js": 165114
    },
    "@epam/uui-timeline": {
      "css": 2202,
      "js": 75109
    },
    "@epam/uui": {
      "css": 199075,
      "js": 333119
    }
  }
}

---

Generated by: generate-components-api
CI Status: ok

Total amount of exported types/props without JSDoc comments

	Amount
Types	337 (+0) 🆗
Props	221 (+0) 🆗

[vasilii-kovalev]

Currently, when focus is set to the clear buttons via keyboard, their color doesn't change like it would on hover or click. Let me know if it should be changed.

[vasilii-kovalev]

As far as I understand, the best practice would be also adding a live region, which would announce the clear button's appearance/disappearance (with a combination of the input's state), for screen reader users. I started to implement this, but the possible combination of cases looks too much for the case. For example, a simple use case with an initially empty text input:

1. Initial state - not announcing anything
2. Text appeared, clear button appeared - announce that the button appeared
3. Text was cleared, clear button disappears - announce both facts
   To differ case 1 from 3, we would need a local state, and update it via useEffect.
   But what if the input has an initial value? The case 1 should be adjusted, and only the button's presence (not appearance, because it is initially there) should be announced.
   Plus, since it is necessary in two places (PickerToggler and TextInput), we'd better to move it to a separate component like ClearInputButtonLiveRegion, that would either accept input's value and contain the text management logic inside, or accept the appropriate text from outside, that should be managed in components, that use it. I wasn't able to find an appropriate spot in the project's structure for such a component.

If implementing of such a component is necessary, please let me know. But it will be necessary to decide, how to properly define its API and placement.

[vasilii-kovalev]

Should all the affected components be listed here?