Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
1 task done
PlutaKatarzyna opened this issue Oct 15, 2024 · 4 comments · Fixed by #10111
Closed
1 task done

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

PlutaKatarzyna opened this issue Oct 15, 2024 · 4 comments · Fixed by #10111
Assignees
Labels
ACC bug This issue is a bug in the code released SAP UDEx TOPIC RD

Comments

@PlutaKatarzyna
Copy link

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"

Screen.Recording.2024-10-15.at.11.58.26.mov

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

  • I’m not disclosing any internal or sensitive information.
@PetyaMarkovaBogdanova
Copy link
Contributor

PetyaMarkovaBogdanova commented Oct 15, 2024

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 PetyaMarkovaBogdanova removed their assignment Oct 15, 2024
@LidiyaGeorgieva LidiyaGeorgieva self-assigned this Oct 30, 2024
@LidiyaGeorgieva
Copy link
Contributor

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 added a commit that referenced this issue Oct 30, 2024
…adio buttons

This pull request fixes two issues:
1. radio buttons cannot be focused using the keyboard
2. radio buttons lack the aria-disabled attribute
and the screen reader doesn't announce that they
can't be selected

fixes: #10025
LidiyaGeorgieva added a commit that referenced this issue Nov 26, 2024
…adio buttons (#10111)

* fix(ui5-radio-button): fix aria-disabled and focus of the read-only radio buttons

This pull request fixes two issues:
1. radio buttons cannot be focused using the keyboard
2. radio buttons lack the aria-disabled attribute
and the screen reader doesn't announce that they
can't be selected

fixes: #10025
@github-project-automation github-project-automation bot moved this from New Issues to Completed in Maintenance - Topic RD Nov 26, 2024
LidiyaGeorgieva added a commit that referenced this issue Nov 26, 2024
…adio buttons

This pull request fixes two issues:
1. radio buttons cannot be focused using the keyboard
2. radio buttons lack the aria-disabled attribute
and the screen reader doesn't announce that they
can't be selected

fixes: #10025
downport of: #10111
@ui5-webcomponents-bot
Copy link
Collaborator

🎉 This issue has been resolved in version v2.5.0-rc.2 🎉

The release is available on v2.5.0-rc.2

Your semantic-release bot 📦🚀

LidiyaGeorgieva added a commit that referenced this issue Nov 29, 2024
…adio buttons (#10257)

This pull request fixes two issues:
1. radio buttons cannot be focused using the keyboard
2. radio buttons lack the aria-disabled attribute
and the screen reader doesn't announce that they
can't be selected

fixes: #10025
downport of: #10111
@ui5-webcomponents-bot
Copy link
Collaborator

🎉 This issue has been resolved in version v1.24.14 🎉

The release is available on v1.24.14

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
ACC bug This issue is a bug in the code released SAP UDEx TOPIC RD
Projects
Status: Completed
5 participants