[Radio Button]: Read only state not announced by screen readers
Bug Description
When Radio Button has "readonly" attribute, its state is not announced by screen readers. Reading is the same as normal state: "Option A, radio button, group"
https://github.com/user-attachments/assets/0fcdc46a-5e9f-4fc4-8df6-bec9ea0aefe7
In addition disabled states is read as "dimmed", can it read "disabled"?
Affected Component
ui5-radio-button
Expected Behaviour
When accessing component in read only mode, it's state should be announced by screen reader. For example, reading should announce "Option A, read only, radio button, group"
Isolated Example
https://sap.github.io/ui5-webcomponents/v1/play/#eyJpbmRleC5odG1sIjp7Im5hbWUiOiJpbmRleC5odG1sIiwiY29udGVudCI6IjwhLS0gcGxheWdyb3VuZC1mb2xkIC0tPlxuPCFET0NUWVBFIGh0bWw-XG48aHRtbCBsYW5nPVwiZW5cIj5cblxuXG5cblxuXG48aGVhZD5cbiAgICBcbiAgICA8c3R5bGU-XG4gICAgICAqOm5vdCg6ZGVmaW5lZCkge1xuICAgICAgICBkaXNwbGF5OiBub25lO1xuICAgICAgfVxuICAgIDwvc3R5bGU-XG5cbiAgICBcbiAgICA8c3R5bGU-XG4gICAgICAqOm5vdCg6ZGVmaW5lZCkge1xuICAgICAgICBkaXNwbGF5OiBub25lO1xuICAgICAgfVxuICAgIDwvc3R5bGU-XG5cbiAgICBcbiAgICA8c3R5bGU-XG4gICAgICAqOm5vdCg6ZGVmaW5lZCkge1xuICAgICAgICBkaXNwbGF5OiBub25lO1xuICAgICAgfVxuICAgIDwvc3R5bGU-XG5cbiAgICBcbiAgICA8c3R5bGU-XG4gICAgICAqOm5vdCg6ZGVmaW5lZCkge1xuICAgICAgICBkaXNwbGF5OiBub25lO1xuICAgICAgfVxuICAgIDwvc3R5bGU-XG5cbiAgICA8bWV0YSBjaGFyc2V0PVwiVVRGLThcIj5cbiAgICA8bWV0YSBuYW1lPVwidmlld3BvcnRcIiBjb250ZW50PVwid2lkdGg9ZGV2aWNlLXdpZHRoLCBpbml0aWFsLXNjYWxlPTEuMFwiPlxuICAgIDx0aXRsZT5TYW1wbGU8L3RpdGxlPlxuPC9oZWFkPlxuXG48Ym9keSBzdHlsZT1cImJhY2tncm91bmQtY29sb3I6IHZhcigtLXNhcEJhY2tncm91bmRDb2xvcilcIj5cbiAgICA8IS0tIHBsYXlncm91bmQtZm9sZC1lbmQgLS0-XG5cblxuICAgIDx1aTUtcmFkaW8tYnV0dG9uIG5hbWU9XCJteUdyb3VwXCIgIHJlYWRvbmx5IHRleHQ9XCJPcHRpb24gQVwiPjwvdWk1LXJhZGlvLWJ1dHRvbj5cbiAgICA8dWk1LXJhZGlvLWJ1dHRvbiBjaGVja2VkIG5hbWU9XCJteUdyb3VwXCIgZGlzYWJsZWQgdGV4dD1cIk9wdGlvbiBCXCI-PC91aTUtcmFkaW8tYnV0dG9uPlxuICAgIDx1aTUtcmFkaW8tYnV0dG9uIG5hbWU9XCJteUdyb3VwXCIgdGV4dD1cIk9wdGlvbiBDXCI-PC91aTUtcmFkaW8tYnV0dG9uPlxuXG4gICAgPCEtLSBwbGF5Z3JvdW5kLWZvbGQgLS0-XG4gICAgPHNjcmlwdCB0eXBlPVwibW9kdWxlXCIgc3JjPVwibWFpbi5qc1wiPjwvc2NyaXB0PlxuPC9ib2R5PlxuXG48L2h0bWw-XG48IS0tIHBsYXlncm91bmQtZm9sZC1lbmQgLS0-XG4ifSwibWFpbi5qcyI6eyJuYW1lIjoibWFpbi5qcyIsImNvbnRlbnQiOiIvKiBwbGF5Z3JvdW5kLWhpZGUgKi9cbmltcG9ydCBcIi4vcGxheWdyb3VuZC1zdXBwb3J0LmpzXCI7XG4vKiBwbGF5Z3JvdW5kLWhpZGUtZW5kICovXG5pbXBvcnQgXCJAdWk1L3dlYmNvbXBvbmVudHMvZGlzdC9SYWRpb0J1dHRvbi5qc1wiOyJ9fQ
Steps to Reproduce
- Open UI5 Radio Button documentation and set 'readonly' property on a component
- Open a Screen Reader
- Navigate to Read Only radio button
- Screen reader doesn't read "read only" state
Log Output, Stack Trace or Screenshots
No response
Priority
None
UI5 Web Components Version
1.24.8, 2.3.0
Browser
Chrome
Operating System
MacOS
Additional Context
UDEx components bug reported:
https://github.tools.sap/sapudex/digital-design-system/issues/938
Organization
SAP / UDEx components team
Declaration
- [X] I’m not disclosing any internal or sensitive information.
HI colleagues fro @SAP/ui5-webcomponents-topic-rd , can you, please, check how required property, when set, should be read out on the radio button. Maybe you should add aria-required and aria-disabled attributes, similar to other components. Best regards, Petya Markova. (UI5 Web Components Dispatcher)
Hello @PlutaKatarzyna ,
In the video you shared, I noticed that you are testing using the mouse, which is not the proper method. The testing should be done using the keyboard (such as the "tab" key, arrow keys, etc.). Nonetheless, your issue report was helpful, and I observed two problems with the read-only radio buttons:
- They cannot be focused using the keyboard.
- They lack the aria-disabled attribute.
I will address and rectify these issues.
Best Regards, Lidiya
:tada: This issue has been resolved in version v2.5.0-rc.2 :tada:
The release is available on v2.5.0-rc.2
Your semantic-release bot :package::rocket:
:tada: This issue has been resolved in version v1.24.14 :tada:
The release is available on v1.24.14
Your semantic-release bot :package::rocket: