[Switch, Select, List]: [Accessibility issues]

[jinnatan]

Describe the bug

Getting accessibility issue when testing with Tool Access Continuum for Switch, List(ListItemStandard), Select, SegmentedButton(SegmentedButtonItem).

Select, SegmentedButton(SegmentedButtonItem):

Accessibility Concern: This DIV (role=combobox) must have all of the following attributes: aria-controls | aria-expanded

But if I tried to add the attribute: e.g aria-expanded, i got another error: 
Accessibility Concern: The aria-expanded attribute is not allowed on this UI5-SELECT

Switch (aria-required attribute is not added as property of Switch)

Accessibility Concern: The aria-required attribute is not allowed on this DIV

List(ListItemStandard)

Accessibility Concern: This LI does not have a ul element (without an ARIA-assigned role); ol element (without an ARIA-assigned role); an element with a role set to the value: list as a parent; or a ul element (without an ARIA-assigned role), ol element (without an ARIA-assigned role) or element with a role set to the value 'list' with an aria-owns attribute set to the ID of the element in the same DOM

Isolated Example

No response

Reproduction steps

Just use the controls, the accessibility test failed. This happens in "@ui5/webcomponents-react": "1.29.4" and "@ui5/webcomponents-react": "2.1.0"

 <Switch onChange={function _s() { }} />

        <Select
          valueState="None"
          accessibleName="Select"
        >
          <Option>
            Option 1
          </Option>
        </Select>

        <List
          growing="None"
          headerText="List with ListItemStandard"
          selectionMode="None"
          separators="All"
        >
          <ListItemStandard additionalText="3" >
            List Item 1
          </ListItemStandard>
        </List>

Expected Behaviour

No response

Screenshots or Videos

No response

UI5 Web Components for React Version

1.29.10

UI5 Web Components Version

1.24.6

Browser

Chrome

Operating System

No response

Additional Context

No response

Relevant log output

No response

Organization

No response

Declaration

• [X] I’m not disclosing any internal or sensitive information.

[MarcusNotheis]

Thanks for reporting! I'll forward this issue to our UI5 Web Components Colleagues as the affected component is developed in their repository.

[IlianaB]

Hello @jinnatan , Switch have "required" property - when set to "true", aria-required is also set. Regarding the Select - when the picker is opened, it has aria-expanded. Regarding the List - could you please share some more information, as I cannot understand what is the warning here. Also the recommended testing tool is Access Assistant. Please, check with it and share the results.

Regards, Iliana

[jinnatan]

@IlianaB Thanks for the quick reply. The violation of the switch is that The aria-required attribute is not allowed on this DIV. Even I added required=false, it still complains about it. For the select, there also should not be accessibility issue when the picker is Not open. I understood that we may use different accessibility tool. But finding from other accessibility tool should also be addressed. Attached is the screen shot of the explanation from the accessibility tool. Hope it clarify the issue more

[IlianaB]

Hello @ui5-webcomponents-topic-p , please check out this ACC issue for ui5-select. According to Access Assistant tool: This DIV (role=combobox) must have all of the following attributes: aria-controls | aria-expanded

Example: https://stackblitz.com/edit/github-qgw27d-nln9nx?file=index.html,main.js

I cannot find any issue for ui5-list. For ui5-switch I will create another issue, as it is for another component.

Regards, Iliana