[A11y]: component elements do not have programmatically determinable name for announcements

## Case №1
### Description
There is no announcement of role and state and changed state of Accordions

### Precondition
Screen Reader is **ON**

### Steps to Reproduce
1. Open [Accordion component](https://uui.epam.com/documents?id=accordion&mode=doc&skin=UUI4_promo&category=components).
2. Using `Tab` focus any of the presented Accordions examples.
3. Using `Enter`/`Space` key expand or collapse the section and note the announcement.

### Actual Result
"[Name], group" is announced (e.g. Accordion block mode, group). There is no announcement of role and state. There is no announcement of changed state after pressing Enter/Space key.

https://github.com/epam/UUI/assets/57751283/37b1b2f4-142d-4d11-9561-fdafc066ec0c

### Expected Result
Screen reader should announce accordion header name, role "button" and current state "collapsed" or "expanded" (e.g. Accordion block mode, collapsed, button).
After pressing `Space`/`Enter` key screen reader should announce the changed state "collapsed" or "expanded".
Reference for implementation: https://www.w3.org/WAI/ARIA/apg/patterns/accordion/examples/accordion/
**Failed WCAG Checkpoint:** 4.1.2 Name, Role, Value (Level A)
https://www.w3.org/TR/WCAG21/#name-role-value

## Case №2
### Description
Plain text "Employee" on Custom accordion is announced as a button by screen reader

### Precondition
Screen Reader is **ON**

### Steps to Reproduce
1. Open [Accordion component](https://uui.epam.com/documents?id=accordion&mode=doc&skin=UUI4_promo&category=components).
2. Use the `down arrow` key to navigate to "Employee" text on "Custom accordion" and note the announcement.

### Actual Result
Plain text "Employee" on "Custom accordion" is announced as a button by screen reader.

### Expected Result
Plain text "Employee" on "Custom accordion" should not be announced as an interactive element button by screen reader.

**Failed WCAG Checkpoint:** 4.1.2 Name, Role, Value (Level A)
https://www.w3.org/TR/WCAG21/#name-role-value

## Case №3
### Description
Close [X] button has no accessible name.

### Precondition
Screen Reader is **ON**

### Steps to Reproduce
1. Open [Alert](https://uui.epam.com/documents?id=alert&mode=doc&skin=UUI4_promo&category=components) component.
2. Use the Tab key to navigate to [X] buttons and note the announcement.

### Actual Result
Close [X] button is announced without accessible name just as "button".

### Expected Result
Close [X] button should be announced with accessible name that clearly describes its purpose.

**Failed WCAG Checkpoint:** 4.1.2 Name, Role, Value (Level A)
https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html

## Case №4
### Description
Role of "In Progress" dropdown is incorrectly determined.

### Precondition
Screen Reader is **ON**

### Steps to Reproduce
1. Open [Badge](https://uui.epam.com/documents?id=badge&mode=doc&skin=UUI4_promo&category=components) component.
2. Use the `Tab` key to navigate to the "In Progress" dropdown and note announcement.

### Actual Result
"In Progress, button" is announced.

### Expected Result
Screen reader should announce role "combobox" (e.g. In Progress, combobox).
**Reference for implementation:** https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/
**Failed WCAG Checkpoint:** 4.1.2 Name, Role, Value (Level A)
https://www.w3.org/TR/WCAG21/#name-role-value

## Case №5
### Description
Role of "Video" text badge is incorrectly announced as a button

### Precondition
Screen Reader is **ON**

### Steps to Reproduce
1. Open [Badge](https://uui.epam.com/documents?id=badge&mode=doc&skin=UUI4_promo&category=components) component.
2. Use the `Down` arrow key to navigate to the "Video" text badge and note announcement.

### Actual Result
Role of "Video" text badge is announced by screen reader as a button: "button Video".
**NOTE 1:** reproducible for "Ready" text badge, "Java" text badge, "Projects" text badge, to all text badges.

**Expected Result:**
Since "Video" text badge is plain text it should not be announced as a button by screen reader.
**Failed WCAG Checkpoint:** 4.1.2 Name, Role, Value (Level A)
https://www.w3.org/TR/WCAG21/#name-role-value

## Case №6
### Description
Icon-button [View] has no accessible name.

### Precondition
Screen Reader is **ON**

### Steps to Reproduce
1. Open [Button](https://uui.epam.com/documents?id=button&mode=doc&skin=UUI3_loveship&category=components) component.
2. Use the Tab key to navigate to Icon-buttons [View] and note the announcement.

### Actual Result
Icon-buttons [View] are announced without accessible name just as "button".

### Expected Result
Icon-buttons [View] should be announced with accessible name that clearly describe its purpose, e.g., View button or View button.

**Failed WCAG Checkpoint:** 4.1.2 Name, Role, Value (Level A)
https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html

## Case №7
### Description
State and changed state of Dropdown button is not announced by screen reader

### Precondition
Screen Reader is **ON**

### Steps to Reproduce
1. Open [Button](https://uui.epam.com/documents?id=button&mode=doc&skin=UUI3_loveship&category=components) component.
2. Use the TAB key to navigate to collapsed Dropdown button and note the announcement.
3. Using Enter/Space key expand or collapse Dropdown button and note the announcement.

### Actual Result
There is no announcement of collapsed state. There is no announcement of changed state (expanded) after pressing Enter/Space key.

https://github.com/epam/UUI/assets/57751283/22e67c7e-999b-41cc-b312-4f462628450c

### Expected Result
Screen reader should announce the current state "collapsed" or "expanded".
After pressing `Space`/`Enter` key screen reader should announce the changed state "collapsed" or "expanded".
**Failed WCAG Checkpoint:** 4.1.2 Name, Role, Value (Level A)
https://www.w3.org/TR/WCAG21/#name-role-value

## Case №8
### Description
Role of Picker combobox is incorrectly announced as button, collapsed state is not indicated to screen reader users

### Precondition
Screen Reader is **ON**

### Steps to Reproduce
1. Open [Button](https://uui.epam.com/documents?id=button&mode=doc&skin=UUI3_loveship&category=components} component.
2. Use the `Tab` key to navigate to collapsed Picker combobox and note the announcement.

### Actual Result
Role of Picker combobox is announced as button. There is no announcement of collapsed state.

### Expected Result
Screen reader should announce the role as combobox. The current state should be announced as "collapsed". Alternative solution: role "button" state "collapsed".

**Failed WCAG Checkpoint:** 4.1.2 Name, Role, Value (Level A)
https://www.w3.org/TR/WCAG21/#name-role-value

## Case №9
### Description
Screen reader doesn't announce the availability of options that appears after the user starts typing and "No records found" status message

### Precondition
Screen Reader is **ON**

### Steps to Reproduce
1. Open [Button](https://uui.epam.com/documents?id=button&mode=doc&skin=UUI3_loveship&category=components).
2. Use the `Tab` key to navigate to Picker combobox, press `Enter`key to expand it.
3. Enter any symbol, e.g., "c" in Search field > list of related options is displayed, note the announcement
4. Enter any symbol, e.g., "e" in Search field > list of related options is displayed, note the announcement
5. Enter symbols, e.g., "cennn" in Search field > "No records found" status message is displayed, note the announcement.

### Actual Result
Availability of options that appears after user enters each symbol is not announced by screen reader. "No records found" status message is not announced by screen reader.

https://github.com/epam/UUI/assets/57751283/04addae9-6eb8-4eb8-a39c-0064e01510f0

### Expected Result
Availability of options that appears after user enters each symbol should be announced by screen reader, e.g., "3 options available". "No records found" status message should be announced by screen reader when appears.
**Failed WCAG Checkpoint:** 4.1.3 Status Messages (Level AA)
https://www.w3.org/WAI/WCAG21/Understanding/status-messages.html

## Case №10
### Description
Changed name of the "Select All" button and status message are not announced by screen reader

### Precondition
Screen Reader is **ON**

### Steps to Reproduce:
1. Open [Button](https://uui.epam.com/documents?id=button&mode=doc&skin=UUI3_loveship&category=components) component.
2. Use the `Tab` key to navigate to Picker combobox, press Enter key to expand it.
3. Use the `Tab` key to navigate to "Select All" button.
4. Press `Enter` key to activate "Select All" button -> all options are selected and name of the button is changed to "Clear All", note the announcement.
5. Press `Enter` key to activate "Clear All" button -> all options are unselected and name of the button is changed to "Select All", note the announcement.

### Actual Result
Changed name of the "Select All" button and status message are not announced by screen reader.

https://github.com/epam/UUI/assets/57751283/d4865a2b-2ed7-4e11-ac8f-db0ca463aeba

### Expected Result
When "Select All" button is activated screen reader should announce status message, e.g., "All options have been selected" and current name of the button "Clear All" button. When "Clear All" button is activated screen reader should announce status message, e.g., "All options have been unselected" and current name of the button "Show All" button
**Failed WCAG Checkpoint:** 4.1.2 Name, Role, Value (Level A) https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html
4.1.3 Status Messages (Level AA) https://www.w3.org/WAI/WCAG21/Understanding/status-messages.html

## Case №11
### Description
Mobile: "x" Close button in "Person" dialog has no accessible name

### Precondition
Screen Reader (VoiceOver on iOS) is **ON** - Mobile iOS

### Steps to Reproduce
1. Open [Button](https://uui.epam.com/documents?id=button&mode=doc&skin=UUI3_loveship&category=components) components.
2. Use the swipe gesture to navigate to Picker combobox, double tap to expand it > "Person" dialog with options is opened.
3. Use the swipe gesture to navigate to "x" Close button and note the announcement.

### Actual Result
Close "x" button is announced without accessible name just as "button".

https://github.com/epam/UUI/assets/57751283/236a1d4b-1519-4802-8346-50f3e470aa16

### Expected Result
Close "x" button should be announced with accessible name that clearly describe its purpose.
**Failed WCAG Checkpoint:** 4.1.2 Name, Role, Value (Level A)
https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html

## Case №12 - fixed (see [comment](https://github.com/epam/UUI/issues/1553#issuecomment-3591796117) below)
### Description
Name, numbering and selected state of options in Picker combobox are not announced by screen reader

### Precondition
Screen Reader is **ON**

### Steps to Reproduce
1. Open [Button](https://uui.epam.com/documents?id=button&mode=doc&skin=UUI3_loveship&category=components) component.
2. Use the `Tab` key to navigate to Picker combobox, press Enter key to expand it and note the announcement.
3. Press down arrow to focus any option and note the announcement.
4. Press Enter key when any option is focused to select/unselect it and note the announcement.

### Actual Result
Screen reader announces only "blank". Name, numbering and state of options in Picker combobox are not announced by screen reader.

https://github.com/epam/UUI/assets/57751283/f237cf52-cf1b-4cc6-a7d8-e31e64af24d1

NOTE1: when any symbols are entered in Search field, they are announced by NVDA when each option is focused.
NOTE2: on MacOS+VoiceOverit not possible to select any option using down arrow key from the keyboard. Please see MacOS.mov screencast.

https://github.com/epam/UUI/assets/57751283/a0358628-9da1-4fc3-b81c-c5d7f1d014f7

NOTE3: on iOS+VoiceOver state and change of state of options is not announced. Please see iOS.MOV screencast.

https://github.com/epam/UUI/assets/57751283/a53a38ab-5ed8-4c63-8b40-fc2676d02322

NOTE4: on Android+TalkBack name of option is not announced, each option receives focus twice. Please see Android.mp4 screencast.

https://github.com/epam/UUI/assets/57751283/62b7bedb-6685-43af-a894-5e0dd16183a6

### Expected Result
When listbox is opened, Seach field and first option are focused and screen reader should announce and numbering <1 of ...> of the first focused option, Search field as "Search has autocomplete edit blank". When any option is focused screen reader should announce current state of the option (selected or not selected) and after selection changed state.
**Failed WCAG Checkpoint:** 4.1.2 Name, Role, Value (Level A)
https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html

## Case №13
### Description
Mobile only: "Person" heading is not announced as a heading by screen reader

### Precondition
Screen Reader (VoiceOver on iOS) is **ON**

### Steps to Reproduce

1. Open [Button](https://uui.epam.com/documents?id=button&mode=doc&skin=UUI3_loveship&category=components) component.
2. Use the swipe gesture to navigate to Picker combobox, double tap to expand it > "Person" dialog with options is opened.
3. Use the swipe gesture to navigate to the "Person" heading and note the announcement.

### Actual Result
"Person" heading is not indicated as a heading to screen reader users.

https://github.com/epam/UUI/assets/57751283/ac9c1857-e81a-498a-b3e6-b5c16fc683d5

### Expected Result
"Person" heading should be announced as a heading by screen reader. Like in this example:

**Failed WCAG Checkpoint:** 1.3.1 Info and Relationships (Level A)
https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html

## Case №14
### Description
There is no announcement of role (combobox) and state (collapsed) of Multi select combobox

### Precondition
Screen Reader is **ON**

Steps to Reproduce
1. Open [Picker Input](https://uui.epam.com/documents?id=pickerInput&mode=doc&skin=UUI4_promo&category=components) component.
2. Use the `Tab` key to navigate to the Multi select combobox and note the announcement.
3. Select any option/options, use the `Tab` key to navigate to the Multi select combobox and note the announcement.

### Actual Result
Role "combobox" and current state "collapsed" is not announced by screen reader. When options are selected, name, role and current state is not announced by screen reader.

**Note:** On Android 13 + TalkBack combobox receives focus twice using swipe gesture: first time is not announced at all, second time is incorrectly announced as "edit box disabled".

https://github.com/epam/UUI/assets/57751283/0c6f01ab-add1-4a12-ae9c-84a9e2b49831

### Expected Result
Name "Language level", role "combobox" and current state "collapsed" should be announced by screen reader when combobox is focused.
**Failed WCAG Checkpoint:** 4.1.2 Name, Role, Value (Level A)
https://www.w3.org/TR/WCAG21/#name-role-value

## Case №15
### Description
Selected option in opened single select combobox is not indicated as such to screen reader users

### Precondition
Screen Reader is **ON**

### Steps to Reproduce
1. Proceed [Picker Input](https://uui.epam.com/documents?id=pickerInput&mode=doc&skin=UUI4_promo&category=components) component.
2. Use the `Tab` key to navigate to the Single select combobox with selected option.
3. Press `Enter` key to expand Single select combobox.
4. Use down arrow key to navigate to selected option and note the announcement.

### Actual Result
Selected option in opened single select combobox is visually indicated as such using checkmark icon, but is not announced as selected by screen reader.

https://github.com/epam/UUI/assets/57751283/5b321457-36f9-4662-8384-6b656340143d

### Expected Result
Screen reader should announce selected option as "selected" or "checked".

**Failed WCAG Checkpoint:** 4.1.2 Name, Role, Value (Level A)
https://www.w3.org/TR/WCAG21/#name-role-value

## Case №16
### Description
Role, name and state is not announced for Single select combobox

### Precondition
Screen Reader is **ON**

### Steps to Reproduce
1. Proceed [Picker Input](https://uui.epam.com/documents?id=pickerInput&mode=doc&skin=UUI4_promo&category=components) component.
2. Use the `Tab` key to navigate to the Single select combobox and note the announcement.
3. Press `Enter` key to expand Single select combobox and note the announcement.

### Actual Result
Role "combobox" and current state "collapsed" is not announced by screen reader. When combobox is expanded changed state is not announced by screen reader.

https://github.com/epam/UUI/assets/57751283/2fb730ff-5c75-4901-a9e3-642b34481e31

### Expected Result
Name "Language level", role "combobox" and current state "collapsed" should be announced by screen reader when combobox is focused. When combobox is expanded, first option in listbox and input field are focused and screen reader should announce and numbering <1 of ...> of the first focused option, input field as "Language level has autocomplete edit blank".
#### Alternative solution: reference for implementation https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list/
**Failed WCAG Checkpoint:** 4.1.2 Name, Role, Value (Level A)
https://www.w3.org/TR/WCAG21/#name-role-value

## Case №17
### Description
Down arrow icon is focused and announced as "clickable" by screen reader

### Precondition
Screen Reader is **ON**

### Steps to Reproduce
1. Proceed [Picker Input](https://uui.epam.com/documents?id=pickerInput&mode=doc&skin=UUI4_promo&category=components) component.
2. Use down arrow key to navigate to Down arrow icon of Multi select combobox and note the announcement.

### Actual Result
Down arrow icon receives focus and is annouced as "clickable" by screen reader.

### Expected Result
Down arrow icon should be hidden and should not receive focus using down arrow key. Reference for implementation https://dequelabs.github.io/combobo/demo/
#### Alternative solution: Down arrow icon receives focus using down arrow key only (not using `Tab` key and is announced as " button collapsed" by screen reader. Reference for implementation https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list/
**Failed WCAG Checkpoint:** 4.1.2 Name, Role, Value (Level A)
https://www.w3.org/TR/WCAG21/#name-role-value

## Case №18
### Description
State and changed state of listbox options in tree list is not announced by screen reader

### Precondition
Screen Reader is **ON**

### Steps to Reproduce
1. Proceed [Picker Input](https://uui.epam.com/documents?id=pickerInput&mode=doc&skin=UUI4_promo&category=components) component.
2. Use the `Tab` key to navigate to the combobox and press `Enter` key to expand it.
3. Use the down arrow key to navigate to collapsed option and note the announcement.
4. Press `Enter` key to expand it and note the announcement.
5. Use the down arrow key to navigate to any option, press `Enter` key to select it and note the announcement.
6. Use the up arrow key to navigate to expanded selected option and note the announcement.

### Actual Result
Current state "collapsed/expanded" "selected/not selected" is not announced by screen reader when corresponding option is focused. Change of state is not announced by screen reader.

https://github.com/epam/UUI/assets/57751283/f6b365e7-bfcd-47b4-8c2e-9126f3d2a4a2

**NOTE:** on Android + TalkBack it is not possible to expand collapsed listbox item. Double-tap gesture only select checkbox, but not expand collapsed item.

https://github.com/epam/UUI/assets/57751283/db4226d8-bfe5-4bb3-917f-9a1cd27fab4a

### Expected Result
Current state "collapsed/expanded" "selected/not selected" should be announced by screen reader when corresponding option is focused. Change of state should be announced by screen reader.
**Failed WCAG Checkpoint:** 4.1.2 Name, Role, Value (Level A)
https://www.w3.org/TR/WCAG21/#name-role-value

## Case №19
### Description
"Language Levels according to the CEFR scale" is not announced by screen reader when combobox is expanded

### Precondition
Screen Reader is **ON**

### Steps to Reproduce
1. Proceed [Picker Input](https://uui.epam.com/documents?id=pickerInput&mode=doc&skin=UUI4_promo&category=components) component.
2. Use the `Tab` key to navigate to the combobox in Custom picker footer section.
3. Press `Enter` key to expand it and note the announcement.

### Actual Result
"Language Levels according to the CEFR scale" is not announced by screen reader when combobox is expanded.

https://github.com/epam/UUI/assets/57751283/3ba2dfba-248e-4b42-a084-fd13edcfd3f9

### Expected Result
"Language Levels according to the CEFR scale" should be announced by screen reader when combobox is expanded.
**Failed WCAG Checkpoint:** 4.1.2 Name, Role, Value (Level A)
https://www.w3.org/TR/WCAG21/#name-role-value

## Case №20
### Description
Aria-disabled="true" attribute is missing for disabled options

### Precondition
Screen Reader is **OFF**

### Steps to Reproduce
1. Proceed [Picker Input](https://uui.epam.com/documents?id=pickerInput&mode=doc&skin=UUI4_promo&category=components) component.
2. Expand Products combobox in Setting row options section.
3. Right click on the disabled option, select "Inspect" and observe the way disabled option is implemented.

### Actual Result
Disabled option is not indicated as such to screen reader users: aria-disabled="true" attribute is missing.

### Expected Result
Aria-disabled="true" attribute should be added to disabled options.
Reference for implementation: https://citizensadvice.github.io/react-combo-boxes/combo_box/disabled_option/index.html
Failed WCAG Checkpoint: 4.1.2 Name, Role, Value (Level A)
https://www.w3.org/TR/WCAG21/#name-role-value

## Case №21
### Description
Role, state, selected option is not announced for combobox with autocomplete behavior

### Precondition
Screen Reader is **ON**

### Steps to Reproduce
1. Proceed [Picker Input](https://uui.epam.com/documents?id=pickerInput&mode=doc&skin=UUI4_promo&category=components) component.
2. Use the `Tab` key to navigate to the "Start type city name for search" combobox with autocomplete behavior (in Linked pickers section) and note the announcement.
3. Type 3 character, e.g., "eur" > combobox is expanded, note the announcement.
4. Use down arrow key to focus any option, press `Enter` key to select it > combobox is collapsed, note the announcement.
5. Use the `Tab` key to focus "Start type city name for search" combobox with selected option and note the announcement.

### Actual Result
Role "combobox", current state "collapsed", autocomplete behavior "has auto complete" is not announced by screen reader when combobox is focused. When combobox is expanded changed state is not announced by screen reader. After selecting an option and combobox collapsing role, state, autocomplete behavior and selected option are not announced by screen reader. When combobox with selected option is focused role, state, autocomplete behavior and selected option are not announced by screen reader.

https://github.com/epam/UUI/assets/57751283/ae0f7ae0-6fe7-4634-adb4-45af0e463d9e

### Expected Result
Role "combobox", current state "collapsed", autocomplete behavior "has auto complete" should be announced by screen reader. When combobox is expanded changed state should be announced by screen reader. After selecting an option and combobox collapsing, role, state, autocomplete behavior and selected option should be announced by screen reader. When combobox with selected option is focused, role, state, autocomplete behavior and selected option should be announced by screen reader.
Reference for implementation https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list/
**Failed WCAG Checkpoint:** 4.1.2 Name, Role, Value (Level A)
https://www.w3.org/TR/WCAG21/#name-role-value

## Case №22
### Description
Name and role of "Please select persons" dialog is not announced by screen reader

### Precondition
Screen Reader is **ON**

### Steps to Reproduce
1. Proceed [Picker Input](https://uui.epam.com/documents?id=pickerInput&mode=doc&skin=UUI4_promo&category=components) component.
2. Use the `Tab` key to navigate to "Please select persons" combobox in Open picker in modal section.
3. Press `Enter` key to expand it, note the announcement and focus placement.

### Actual Result
Once the dialog opens, focus moves to the "Type text for quick search" field and screen reader users are not notified that the context changed: instead of being on the main page they were taken into a dialog window.

https://github.com/epam/UUI/assets/57751283/a2a870dd-1429-477c-a1cb-b7392d99e517

### Expected Result
Once the dialog opens, focus should be set to the first interactive element "x" Close button and screen reader should announce "Please select persons, modal dialog, Close, button".
**Recommendation:** replace role="modal" with role="dialog". Provide an accessible name for the dialog using aria-labelledby attribute by referring to the "Please select persons" heading.
**Reference for implementation:** https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/dialog/
**Failed WCAG Checkpoint:** 4.1.2 Name, Role, Value (Level A)
https://www.w3.org/TR/WCAG21/#name-role-value

## Case №23
### Description
Close [x] button in "Please select persons" dialog has no accessible name

### Precondition
Screen Reader is **ON**

### Steps to Reproduce
1. Proceed [Picker Input](https://uui.epam.com/documents?id=pickerInput&mode=doc&skin=UUI4_promo&category=components) component.
2. Use the `Tab` key to navigate to "Please select persons" combobox in Open picker in modal section and Press `Enter` key to expand it.
3. Use the `Tab` key to navigate to Close "x" button and note the announcement.

### Actual Result
Close [x] button is announced without accessible name just as "button".

### Expected Result
Close [x] button should be announced with accessible name that clearly describe its purpose as "Close" button.

**Failed WCAG Checkpoint:** 4.1.2 Name, Role, Value (Level A)
https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html

## Case №24
### Description
Visible label of comboboxes is not announced by screen reader

### Precondition
Screen Reader is **ON**

### Steps to Reproduce
1. Proceed [Picker Input](https://uui.epam.com/documents?id=pickerInput&mode=doc&skin=UUI4_promo&category=components) component.
2. Use the `Tab` key to navigate to "Select country" combobox and note the announcement.
3. Select any country from "Select country" combobox, e.g., Angola, use the `Tab` key to navigate to "Select country" and "Select city from Angola" comboboxes, note the announcement.

### Actual Result
Visible label "Select country" is not announced by screen reader when "Select country" combobox is focused. Visible label "Select city from <>" is not announced by screen reader when "Select city from <>" combobox is focused.

**NOTE:** reproducible for "Reporting to" combobox in dialog opened after activation "Click to open" button.

### Expected Result
Visible label should be announced by screen reader when combobox is focused.
**Failed WCAG Checkpoint:** 4.1.2 Name, Role, Value (Level A)
https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html

## Case №25
### Description
Collapsed state of "Click to open" button is not announced by screen reader

### Precondition
Screen Reader is **ON**

### Steps to Reproduce
1. Proceed [Picker Input](https://uui.epam.com/documents?id=pickerInput&mode=doc&skin=UUI4_promo&category=components) component.
2. Use the `Tab` key to navigate to "Click to open" button and note the announcement.

### Actual Result
Screen reader doesn't announce collapsed state of "Click to open" button.

### Expected Result
Screen reader should announce collapsed state of "Click to open" button as "collapsed".
**Failed WCAG Checkpoint:** 4.1.2 Name, Role, Value (Level A)
https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html

## Case №26
### Description
Decorative images are not hidden from screen reader

### Precondition
Screen Reader is **OFF**

### Steps to Reproduce
1. Proceed [Picker Input](https://uui.epam.com/documents?id=pickerInput&mode=doc&skin=UUI4_promo&category=components) omponent.
2. Expand Persons combobox in Custom picker row section.
3. Right click on the image, select "Inspect" and observe the alt text of .

### Actual Result
Decorative avatar image does not have an empty alt atribute (alt ="") and is not hidden from screen readers.

### Expected Result
Information the about user is available in text next to the image, so decorative image should be hidden from screen readers using empty alt atribute (alt =""). In case avatar image convey additional information it should have informative alt text.
**Failed WCAG Checkpoint:** 1.1.1 Non-text Content (Level A)
https://www.w3.org/WAI/WCAG21/Understanding/non-text-content.html

## Case №27
### Description
"Please select persons" heading is not announced as a heading by screen reader

### Precondition
Screen Reader is **ON**

### Steps to Reproduce
1. Proceed [Picker Input](https://uui.epam.com/documents?id=pickerInput&mode=doc&skin=UUI4_promo&category=components) component.
2. Use the `Tab` key to navigate to "Please select persons" combobox in Open picker in modal section and Press `Enter` key to expand it.
3. Use down/up arrow key to navigate to "Please select persons" heading and note the announcement.

### Actual Result
"Please select persons" heading is not indicated as a heading to screen reader users.

### Expected Result
"Please select persons" heading should be announced as a heading by screen reader.
**Failed WCAG Checkpoint:** 1.3.1 Info and Relationships (Level A)
https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html

## Case №28
### Description
Waiting state is not conveyed to screen reader users.

### Precondition
Screen Reader is **OFF**

## Steps to Reproduce
1.Open [Blocker](https://uui.epam.com/documents?category=components&id=blocker&mode=doc&skin=UUI3_loveship) component.
2. Right click on a loading icon, click Inspect and observe the implementation.

### Actual Result
Waiting state is not conveyed to screen reader users.

### Expected Result
Waiting state should be conveyed to screen reader users. Status message should be announced by screen reader once it appears on the screen. For this purpose add aria-live="polite" or role="status" to the container that would hold the invisible status message (e.g., downloading, calculation, etc.).
**Reference for implementation:** https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA22
**Note:** The same issue with Spinner component.
**Failed WCAG Checkpoint:** 4.1.3 Status Messages (Level AA)
https://www.w3.org/WAI/WCAG21/Understanding/status-messages.html#dfn-status-message

## Case №29
### Description
iOS only: Role and state of "Show only selected" switch is not announced by screen reader

### Precondition
Screen Reader (VoiceOver on iOS) is **ON**

### Steps to Reproduce
1. Open [Button](https://uui.epam.com/documents?id=button&mode=doc&skin=UUI3_loveship&category=components) component.
2. Use the swipe gesture to navigate to Picker combobox, double tap to expand it > "Person" dialog with options is opened.
3. Use the swipe gesture to navigate to any option and select it.
4. Use the swipe gesture to navigate to "Show only selected" switch and note the announcement.

### Actual Result
"Show only selected" switch is announced without role, simple as a plain text "Show only selected".

https://github.com/epam/UUI/assets/57751283/0076b828-2c2b-4b4b-b147-3f45be038753

### Expected Result
Role and state of "Show only selected" switch should be announced by screen reader.
**Reference for implementation:** https://www.w3.org/WAI/ARIA/apg/patterns/switch/
**Failed WCAG Checkpoint:** 4.1.2 Name, Role, Value (Level A)
https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html

## Case №30
### Description
Collapsed state of "Dropdown" field is not announced by screen reader

### Precondition
Screen Reader is **ON**

Steps to Reproduce:
1. Proceed [Text Input](https://uui.epam.com/documents?category=components&id=textInput&mode=doc&skin=UUI3_loveship) component.
2. Use `Tab` key to navigate to "Dropdown" field and note the announcement.

### Actual Result
Screen reader doesn't announce collapsed state of "Dropdown" field.

### Expected Result
Screen reader should announce collapsed state of "Dropdown" field as "collapsed".

**Reference for implementation:** https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list/
**Failed WCAG Checkpoint:** 4.1.2 Name, Role, Value (Level A)
https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html

## Case №31
### Description
[Main Menu]: Accessible name of “Main Menu Logo” link doesn’t match its visible label “Telescope AI Learn”, the purpose of the link is not clear

### Precondition
Screen Reader is **ON**

### Steps to Reproduce:
1. Proceed [MainMenu](https://uui.epam.com/documents?category=components&id=mainMenu&mode=doc&skin=UUI4_promo) component.
2. Use `Tab` key to navigate to “Telescope AI Learn” link and note the announcement.

### Actual Result
Screen reader announces the name of the link as “Main Menu Logo” instead of its visual label “Telescope AI Learn”. Moreover the purpose of the link is not to open the Main Menu but to redirect to the Home page.
**Note:** applickable to differentGrow, UUI logo-links.

### Expected Result
Accessible name of the link should match its visual label and the purpose of the link should be clear. The name of the link should be announced as “Telescope AI Learn Home”.
**Failed WCAG Checkpoint:** 4.1.2 Name, Role, Value (Level A)
https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html

## Case №32
### Description
[Main Menu]: State and change of state of "More" button is not announced by screen reader

### Precondition
Screen Reader is **ON**

### Steps to Reproduce
1. Proceed [Main Menu](https://uui.epam.com/documents?category=components&id=mainMenu&mode=doc&skin=UUI4_promo) component.
2. Use `Tab` key to navigate to collapsed "More" button and note the announcement.
3. Press `Enter` key to expand "More" button and note the announcement.

### Actual Result
Current state (collapsed) and change of state (expanded/collapsed) of "More" button is not announced by screen reader.

https://github.com/epam/UUI/assets/57751283/9d873e52-4fc8-4ea9-abd1-caf3ae3dbab5

### Expected Result
Current state and change of state should be announced by screen reader.

**Recommendation:** To indicate the expanded/collapsed state of the button provide aria-expanded="false" attribute when button is collapsed and aria-expanded="true" when button is expanded.

**Failed WCAG Checkpoint:** 4.1.2 Name, Role, Value (Level A)
https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html

## Case №33
### Description
[Main Menu]: Changed name of "Main menu" button is not announced by screen reader

### Precondition
Screen Reader is **ON**

### Steps to Reproduce
1. Open [Main Menu](https://uui.epam.com/documents?category=components&id=mainMenu&mode=doc&skin=UUI4_promo) component.
2. Zoom in the page so that the Main Menu (hamburger) button is displayed.
3. Use down arrow key (since currently button is not reachable using `Tab` key) to navigate to Main menu (hamburger) button.
4. Press `Enter` key > Main Menu (hamburger) button changed to "x" close button, note the announcement.

### Actual Result
Visually Main Menu (hamburger) button changed to "x" close button but changed name is not announced by screen reader.

https://github.com/epam/UUI/assets/57751283/8acef4aa-9225-45b1-9d99-95aa052f088d

### Expected Result
Changed name of "Main menu" button should be announced by screen reader, e.g., as "Close Main Menu" button.
**Failed WCAG Checkpoint:** 4.1.2 Name, Role, Value (Level A)
https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html

## Case №34
### Description
[Main Menu]: “My profile” menu button is not implemented as a menu button semantically

### Precondition
Screen Reader is **ON**

### Steps to Reproduce
1. Open [Main Menu](https://uui.epam.com/documents?category=components&id=mainMenu&mode=doc&skin=UUI4_promo) component.
2. Use `Tab` key to navigate to My profile menu button and note the announcement.
3. Press `Enter` key observe the focus placement and note the announcement.
4. Use `down`/`up` arrow keys to navigate between menu itens and note that decorative "separator" receives focus.
5. Press `Esc` key to collapse menu and observe.
6. Press `Tab` key and observe the focus placement.

### Actual Result
Name and state of My profile menu button is not announced by screen reader, only "button" is announced. After opening the menu keyboard focus is lost and screen reader announces a lot of redundant information. Decorative "separator" is not hidden from screen reader. Pressing Esc key doesn't close menu. Pressing `Tab` key moves focus out of the menu and goes from the beginning of the page.

https://github.com/epam/UUI/assets/57751283/b6085a99-3b03-4891-b5cd-3457e5c2eac9

### Expected Result
Name (e.g., "My profile" or "") and state (e.g., "collapsed" or "menu button subMenu" should be announced by screen reader. After opening the menu keyboard focus should be placed on the first menu item or remains on expanded menu button. Decorative "separator" should be hidden from screen reader using aria-hidden="true attribute. Pressing `Esc` key should close menu and place focus on collapsed Menu button. If focus goes out of the menu using `Tab` key, menu should collapse? and focus should move to the next interactive element.

**Reference for implementation:** https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/
https://opensource.ebay.com/mindpatterns/navigation/fake-menu-button/index.html
**Failed WCAG Checkpoint:**
4.1.2 Name, Role, Value (Level A)
https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html
1.1.1 Non-text Content (Level A)
https://www.w3.org/WAI/WCAG21/Understanding/non-text-content.html
2.4.3 Focus Order (Level A)
https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html

## Case №35
### Description
[Main Menu]: Accessible name of "?" graphic link is not descriptive

### Precondition
Screen Reader is **ON**

### Steps to Reproduce
1. Open [Main Menu](https://uui.epam.com/documents?category=components&id=mainMenu&mode=doc&skin=UUI4_promo) component.
2. Use `Tab` key to navigate to the first element in Main Manu “Telescope AI Learn” link and note the announcement.
3. Use `Tab` key to navigate to "?" graphic link and note the announcement.

### Actual Result
Screen reader announces url "support.epam.com" instead of descriptive name for "?" graphic link.

### Expected Result
URL should not be announced by screen reader, the purpose of the "?" graphic link should be clear and should be announced by screen reader, for example, as "Support, link".

**Recommendation:** add aria-label="Support" attribute to the element.
https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA8
**Failed WCAG Checkpoint:** 2.4.4 Link Purpose (In Context)
https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-in-context.html

## Case №36
### Description
[Demo: Form]: Error messages are not announced by screen reader each time when field with active error receives focus

### Precondition
Screen Reader is **ON**

### Steps to Reproduce
1. Open [Demo: Form](https://uui.epam.com/demo?id=form).
2. Leave required fields empty.
3. Use `Tab` key to navigate to the Save button, press `Enter` key to activate it.
4. Use `Shift`+`Tab` key to navigate to any field with active error and note the announcement.

### Actual Result
Error messages should be announced by screen reader.

https://github.com/epam/UUI/assets/57751283/3cd7d906-650b-4725-ad67-e576dd0e5129

### Expected Result
Error messages are not announced by screen reader
**Failed WCAG Checkpoint:** 4.1.2 Name, Role, Value (Level A)
https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html

## Case №37 - out of scope UUI. Please see the [comment](https://github.com/epam/UUI/issues/1553#issuecomment-2598104780) below for clarification.
### Description
[Main Menu]: All elements in Main Menu are incorrectly marked as Navigation region instead of Header, related links are not grouped programmatically

### Precondition
Screen Reader is **ON**

### Steps to Reproduce
1. Open [Main Menu](https://uui.epam.com/documents?category=components&id=mainMenu&mode=doc&skin=UUI4_promo) component.
2. Use `Tab` key to navigate to the first element in Main Manu “Telescope AI Learn” link and note the announcement.
3. Use `Tab` key to navigate to the first navigation link "People" in a list of navigation links and note the announcement.
4. Inspect the code.

### Actual Result
“Telescope AI Learn” logo link incorrectly included in navigation section. Set of related links in major block of navigation links are not grouped in a list. Main Menu component semantically is a Header, but incorrectly indicated as Navigation region to screen reader users.

https://github.com/epam/UUI/assets/57751283/863194af-b4bc-44d7-94ad-cf949d84302a

### Expected Result
All Main Menu component should be marked as a Header (using `` or role="banner"), not as a Navigation. Set of related links (in this case starting from "People" and ending with "More") should be grouped in a list using `` and `

`.
https://www.w3.org/WAI/WCAG21/Techniques/html/H97
**Failed WCAG Checkpoint: 1.3.1** Info and Relationships (Level A)
https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html

## Case №38
### Description
[Main Menu]: Name and state of Global Menu button is not announced by screen reader

### Precondition
Screen Reader is **ON**

### Steps to Reproduce
1. Open [Main Menu](https://uui.epam.com/documents?category=components&id=mainMenu&mode=doc&skin=UUI4_promo) component.
2. Use `Tab` key to navigate to Global Menu button and note the announcement.

### Actual Result
Name and state of Global Menu button is not announced by screen reader, only "button" is announced.


### Expected Result
Name "Global Menu" and state "collapsed" of Global Menu button should be announced by screen reader.
**Failed WCAG Checkpoint:** 4.1.2 Name, Role, Value (Level A)
https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html

## Case №39
### Description
[Main Menu]: Set of related links in navigation menu are not organized in a list

### Precondition
Screen Reader is **ON**

### Steps to Reproduce
1. Open [Main Menu](https://uui.epam.com/documents?category=components&id=mainMenu&mode=doc&skin=UUI4_promo) component.
2. Set the size of the adaptive panel so that the Main Menu (hamburger) button is displayed and click on it.
3. Use `Tab` key to navigate to the first link in navigation menu and note the announcement.
4. Inspect the code.

### Actual Result
Set of related links in navigation menu are not organized in a list.

https://github.com/epam/UUI/assets/57751283/29caf207-bd2e-442e-b1ba-e620910c0197


### Expected Result
Set of related links in navigation menu should be organized in a list and screen reader should announce "list with items".
**Failed WCAG Checkpoint:** 1.3.1 Info and Relationships (Level A)
https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html

## Case №40
### Description
[Demo: Form]: "T-Shirt Size" component works as a radio group, but is not implemented as a radio group semantically

### Precondition
Screen Reader is **ON**

### Steps to Reproduce
1. Open [Demo-> Form](https://uui.epam.com/demo?id=form).
2. Use `Tab` key to navigate to "T-Shirt Size" component and note the announcement.

### Actual Result
"T-Shirt Size" component is implemented and is announced as a tab panel by screen reader, but the component doesn't display any panel of content.

https://github.com/epam/UUI/assets/57751283/c14dee95-1ff8-4b2a-8ea5-66a4af1592ea

### Expected Result
Since only one option can be selected the "T-Shirt Size" component should be implemented as announced by screen reader as a radio group.
**Reference for implementation:** https://webaim.org/techniques/forms/controls#radio
https://www.w3.org/WAI/ARIA/apg/patterns/radio/
**Failed WCAG Checkpoint:** 4.1.2 Name, Role, Value (Level A)
https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html

## Case №41
### Description
[Demo: Form]: Visually marked as required fields are not indicated as such to screen reader users

### Precondition
Screen Reader is **ON**

Steps to Reproduce
1. Open [Demo-> Form](https://uui.epam.com/demo?id=form).
2. Use `Tab` key to navigate to required "Date of Birth" and "Country" fields and note the announcement.

### Actual Result
"Date of Birth" and "Country" fields are visually marked as required but are not indicated as such to screen reader users.

### Expected Result
Required "Date of Birth" and "Country" fields should be announced as "required" by screen reader.
**Failed WCAG Checkpoint:** 4.1.2 Name, Role, Value (Level A)
https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html

## Case №42
### Description
[Demo: Form]: Name, state and role of Date of Birth combobox is not announced by screen reader

### Precondition
Screen Reader is **ON**

Steps to Reproduce
1. Open [Demo-> Form](https://uui.epam.com/demo?id=form).
2. Use `Tab` key to navigate to Date of Birth combobox and note the announcement.

### Actual Result
Name "Date of Birth", state (expanded/collapsed) and role "combobox" of Date of Birth element is not announced by screen reader.

### Expected Result
Name "Date of Birth", state and role "combobox" should be announced by screen reader when "Date of Birth" combobox is focused.
Reference for implementation: https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-datepicker/
**Failed WCAG Checkpoint:** 4.1.2 Name, Role, Value (Level A)
https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html

## Case №43
### Description
[Android]: Listbox items in Single select comboboxes are not accessible using swipe gesture

### Precondition
Screen Reader (TalkBack) is **ON**

### Steps to Reproduce
1. Proceed [Picker Input](https://uui.epam.com/documents?id=pickerInput&mode=doc&skin=UUI4_promo&category=components) component.
2. Navigate using swipe gesture to the Single select combobox in Basic section, double tap to activate it
3. Navigate using swipe gesture to the options in listbox and observe

### Actual Result
Each listbox item in Single select combobox cannot be focused using swipe gesture.

https://github.com/epam/UUI/assets/57751283/7af9e35a-3956-4613-9caf-0b84daecbc28

### Expected Result
Each listbox item in Single select combobox should be focused using swipe gesture.
**Failed WCAG Checkpoint:** 2.1.1 Keyboard (Level A)
https://www.w3.org/WAI/WCAG21/Understanding/keyboard.html

## Case №44
### Description
Reading order with screen reader doesn't match visual order

### Precondition
Screen Reader is **ON**

### Steps to Reproduce
1. Open [AvatarStack](https://uui.epam.com/documents?category=components&id=avatarStack&mode=doc&skin=UUI4_promo) component.
2. Use the `Down` arrow key to navigate to the image avatars and observe.

### Actual Result
Reading order with screen reader doesn't match visual order: starts from the last avatar and ends with the first one.

https://github.com/epam/UUI/assets/57751283/de35811e-cccf-4431-9d7a-a3cd829617ee

### Expected Result
Reading order with screen reader should match visual order.
**Failed WCAG Checkpoint:** 1.3.2 Meaningful Sequence (Level A)
https://www.w3.org/WAI/WCAG21/Understanding/meaningful-sequence.html

### **Case №45**
**Description**
[File Card]: Name and state of 'delete file' button is not announced by screen reader

**Precondition**
Screen Reader is ON

**Steps to Reproduce**
1. Open [File Upload](https://uui.epam.com/documents?id=fileUpload&mode=doc&category=components&theme=loveship) component.
2. Upload any file.
3. Use Tab key to navigate to X button in the File Card and note the announcement.

**Actual Result**
Name of the button is not announced by screen reader, only "button" is announced.


**Expected Result**
Name (e.g. "delete file") of the button should be announced by screen reader.
Failed WCAG Checkpoint: 4.1.2 Name, Role, Value (Level A)
https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html