Closed lv-sap closed 8 months ago
Thanks for reporting! I'll forward this issue to our UI5 Web Components Colleagues as the affected component is developed in their repository.
Hello @lv-sap ,
Please check again and answer the questions. Thank you in advance!
Best Regards, Lidiya
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
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"
Please give a statement is this an ACC issue?
Best Regards, Lidiya
@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.
@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.
@unazko please add labels in the test page for the two inputs to avoid confusion in future.
Describe the bug
TimePicker causes unit test failure due to A11y (AXE) violations:
"ARIA attributes must conform to valid values (aria-valid-attr-value)"
Fix all of the following: Invalid ARIA attribute value: aria-controls="ui5wc_1-responsive-popover"
────────
"Form elements must have labels (label)"
Fix any of the following: aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Form element does not have an implicit (wrapped)
────────
Isolated Example
No response
Reproduction steps
Prerequisite: To better identify the issues, you need the AXE Dev Tool extension installed in you Chrome browser.
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