SAP / ui5-webcomponents

UI5 Web Components - the enterprise-flavored sugar on top of native APIs! Build SAP Fiori user interfaces with the technology of your choice.
https://sap.github.io/ui5-webcomponents/
Apache License 2.0
1.55k stars 266 forks source link

[SF][A11y][TimePicker]: Ensures all ARIA attributes have valid values #6931

Closed lv-sap closed 8 months ago

lv-sap commented 1 year ago

Describe the bug

TimePicker causes unit test failure due to A11y (AXE) violations:

Screenshot 2023-04-18 at 12 06 31 PM

Isolated Example

No response

Reproduction steps

Prerequisite: To better identify the issues, you need the AXE Dev Tool extension installed in you Chrome browser.

  1. Open https://sap.github.io/ui5-webcomponents-react/?path=/docs/inputs-timepicker--docs
  2. Open the Axe Dev tool extension in Chrome Dev Tools and scan the page
  3. It should show some issues similar (but not exactly the same) to the following: Screenshot 2023-04-18 at 12 06 31 PM

Expected Behaviour

No response

Screenshots or Videos

No response

UI5 Web Components for React Version

^1.10.0

UI5 Web Components Version

^1.11.0

Browser

Chrome, Edge, Firefox, Safari

Operating System

No response

Additional Context

No response

Relevant log output

No response

Declaration


Related Jira ticket: https://jira.successfactors.com/browse/WEF-118178

MarcusNotheis commented 1 year ago

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

LidiyaGeorgieva commented 1 year ago

Hello @lv-sap ,

Please check again and answer the questions. Thank you in advance!

Best Regards, Lidiya

lv-sap commented 1 year ago

Hi Lidya,

I'm sorry. There was a wrong statement in the description, and I corrected it. What I meant is that those are the messages raised after running an AXE Dev Tool analyzing on my page, the page I was working on. I also run the AXE Dev Tool analysis for the same component on your WebCopmponent demo page https://sap.github.io/ui5-webcomponents-react/?path=/docs/inputs-timepicker--docs, and indeed, it reported similar issues. The screenshot shows the errors on my page. I don't post screenshots from the demo page, because on the demo page you can run the Axe tool yourself, and see the actual errors.

-- L

LidiyaGeorgieva commented 1 year ago

Hello @lv-sap ,

Regarding the error: "Form elements must have labels (label)" On the test page you sent, this error is shown for select with id="control-valueState" This field is not part of the UI5 Web Components rather than the test page. I suggest you to check again your application and if needed to add labels.

Hello @SAP/ui5-webcomponents-topic-b ,

Regarding the error: "ARIA attributes must conform to valid values (aria-valid-attr-value)" - I checked the TimPicker test page and if the responsive popover is not opened its id is not in the HTML tree. I think this is the problem, that is reported. Example with id="ui5wc_11-responsive-popover"

image

Please give a statement is this an ACC issue?

Best Regards, Lidiya

lv-sap commented 1 year ago

@LidiyaGeorgieva ,

Yes. The AXE dev tool reported the same error, "ARIA attributes must conform to valid values (aria-valid-attr-value)", for the TimePicker on both TimPicker test page and on my page.

LidiyaGeorgieva commented 1 year ago

@lv-sap , Yes, this error can be seen for the TimPicker test page, but it is for the two helper inputs that count the "input" and "change" events on the ui5-time-picker. The error is not for the ui5-time-picker component. image

@unazko please add labels in the test page for the two inputs to avoid confusion in future.