ui5-webcomponents icon indicating copy to clipboard operation
ui5-webcomponents copied to clipboard

[Radio Button]: Read only state not announced by screen readers

Open PlutaKatarzyna opened this issue 1 year ago • 1 comments

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

  1. Open UI5 Radio Button documentation and set 'readonly' property on a component
  2. Open a Screen Reader
  3. Navigate to Read Only radio button
  4. 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.

PlutaKatarzyna avatar Oct 15 '24 10:10 PlutaKatarzyna

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)

PetyaMarkovaBogdanova avatar Oct 15 '24 15:10 PetyaMarkovaBogdanova

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:

  1. They cannot be focused using the keyboard.
  2. They lack the aria-disabled attribute.

I will address and rectify these issues.

Best Regards, Lidiya

LidiyaGeorgieva avatar Oct 30 '24 13:10 LidiyaGeorgieva

: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:

ui5-webcomponents-bot avatar Nov 28 '24 08:11 ui5-webcomponents-bot

: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:

ui5-webcomponents-bot avatar Dec 13 '24 17:12 ui5-webcomponents-bot