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

[Tokenizer]: Screen reader reads "Tokenizer" twice, inside focusable wrapper #10361

Open
1 task done
PlutaKatarzyna opened this issue Dec 11, 2024 · 2 comments
Open
1 task done
Labels
ACC bug This issue is a bug in the code Low Prio SAP UDEx TOPIC RL

Comments

@PlutaKatarzyna
Copy link

Bug Description

Hi UI5 team,
We faced the issue while trying to use UI5 Tokenizer in UDEx Select Box component.
It is used to display selected values from dropdown list. For that purpose, there is a ui5-tokenizer wrapper - div element that has tabindex="0". Focusing on that wrapper cause reading relevant information, like label, but also it cause reading "Tokeniser" twice.

Sometimes it happens that when you focus on the field fot the first time, it reads it only once, but then when you move out and focus again, it is alredy read twice.

Affected Component

ui5-tokenizer , udex-select-box

Expected Behaviour

We seek for the way to avoid "Tokeniser" being read twice.

Isolated Example

https://sap.github.io/ui5-webcomponents/v1/play/#eyJpbmRleC5odG1sIjp7Im5hbWUiOiJpbmRleC5odG1sIiwiY29udGVudCI6IjwhLS0gcGxheWdyb3VuZC1mb2xkIC0tPlxuPCFET0NUWVBFIGh0bWw-XG48aHRtbCBsYW5nPVwiZW5cIj5cblxuXG48aGVhZD5cbiAgICBcbiAgICA8c3R5bGU-XG4gICAgICAqOm5vdCg6ZGVmaW5lZCkge1xuICAgICAgICBkaXNwbGF5OiBub25lO1xuICAgICAgfVxuICAgIDwvc3R5bGU-XG5cbiAgICBcbiAgICA8c3R5bGU-XG4gICAgICAqOm5vdCg6ZGVmaW5lZCkge1xuICAgICAgICBkaXNwbGF5OiBub25lO1xuICAgICAgfVxuICAgIDwvc3R5bGU-XG5cbiAgICA8bWV0YSBjaGFyc2V0PVwiVVRGLThcIj5cbiAgICA8bWV0YSBuYW1lPVwidmlld3BvcnRcIiBjb250ZW50PVwid2lkdGg9ZGV2aWNlLXdpZHRoLCBpbml0aWFsLXNjYWxlPTEuMFwiPlxuICAgIDx0aXRsZT5TYW1wbGU8L3RpdGxlPlxuICA8c3R5bGU-XG4gICAgLnVkZXgtd3JhcHBlciB7XG4gICAgYm9yZGVyOiAxcHggc29saWQgIzAwMDtcbiAgICBib3JkZXItcmFkaXVzOiAzcHg7XG4gICAgfVxuICAgIC51ZGV4LXdyYXBwZXI6Zm9jdXMge1xuICAgIGJvcmRlci13aWR0aDogM3B4O1xuICAgIGJvcmRlci1jb2xvcjogYmx1ZTtcbiAgICB9XG4gICAgLnVpNS1tdWx0aS1pbnB1dC10b2tlbml6ZXIge1xuICAgIGJvcmRlcjogMDtcbiAgICB9XG4gIDwvc3R5bGU-XG48L2hlYWQ-XG48Ym9keSBzdHlsZT1cImJhY2tncm91bmQtY29sb3I6IHZhcigtLXNhcEJhY2tncm91bmRDb2xvcik7aGVpZ2h0OiAzNTBweDtcIj5cbjwhLS0gcGxheWdyb3VuZC1mb2xkLWVuZCAtLT5cbiAgPHVpNS1idXR0b24-c29tZSBmb2N1c2FibGUgLyBub3QgcmVsZXZhbnQ8L3VpNS1idXR0b24-XG4gIDxici8-PGJyLz5cbiAgPGRpdiBjbGFzcz1cInVkZXgtd3JhcHBlclwiIHRhYmluZGV4PVwiMFwiPlxuICBcdDx1aTUtdG9rZW5pemVyXG5cdFx0Y2xhc3M9XCJ1aTUtbXVsdGktaW5wdXQtdG9rZW5pemVyXCJcblx0ICA-XG4gICAgICA8dWk1LXRva2VuIHRleHQ9XCJncmVlblwiPjwvdWk1LXRva2VuPlxuICAgICAgPHVpNS10b2tlbiB0ZXh0PVwiaGVhbHRoeVwiIHNlbGVjdGVkID48L3VpNS10b2tlbj5cbiAgICAgIDx1aTUtdG9rZW4gdGV4dD1cInZlZ2FuXCIgPjwvdWk1LXRva2VuPlxuICAgICAgPHVpNS10b2tlbiB0ZXh0PVwibG93IGZhdFwiID48L3VpNS10b2tlbj5cblx0PC91aTUtdG9rZW5pemVyPlxuPC9kaXY-XG48IS0tIHBsYXlncm91bmQtZm9sZCAtLT5cbiAgICA8c2NyaXB0IHR5cGU9XCJtb2R1bGVcIiBzcmM9XCJtYWluLmpzXCI-PC9zY3JpcHQ-XG48L2JvZHk-XG48L2h0bWw-XG48IS0tIHBsYXlncm91bmQtZm9sZC1lbmQgLS0-XG5cbiJ9LCJtYWluLmpzIjp7Im5hbWUiOiJtYWluLmpzIiwiY29udGVudCI6Ii8qIHBsYXlncm91bmQtaGlkZSAqL1xuaW1wb3J0IFwiLi9wbGF5Z3JvdW5kLXN1cHBvcnQuanNcIjtcbi8qIHBsYXlncm91bmQtaGlkZS1lbmQgKi9cbmltcG9ydCBcIkB1aTUvd2ViY29tcG9uZW50cy9kaXN0L011bHRpSW5wdXQuanNcIjtcbmltcG9ydCBcIkB1aTUvd2ViY29tcG9uZW50cy9kaXN0L1Rva2VuLmpzXCI7XG5cbmNvbnN0IG11bHRpSW5wdXQgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZChcIm11bHRpLWlucHV0XCIpXG5cbmNvbnN0IGNyZWF0ZVRva2VuRnJvbVRleHQgPSAodGV4dCkgPT4ge1xuICAgIGxldCB0b2tlbiA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoXCJ1aTUtdG9rZW5cIik7XG4gICAgdG9rZW4uc2V0QXR0cmlidXRlKFwidGV4dFwiLCB0ZXh0KTtcbiAgICB0b2tlbi5zZXRBdHRyaWJ1dGUoXCJzbG90XCIsIFwidG9rZW5zXCIpO1xuICAgIHJldHVybiB0b2tlbjtcbn07XG5cbm11bHRpSW5wdXQuYWRkRXZlbnRMaXN0ZW5lcihcImNoYW5nZVwiLCAoZXZlbnQpID0-IHtcblx0Y29uc3QgaW5wdXRWYWx1ZSA9IGV2ZW50LnRhcmdldC52YWx1ZTtcblxuICAgIGlmIChpbnB1dFZhbHVlKSB7XG5cdFx0bXVsdGlJbnB1dC5hcHBlbmRDaGlsZChjcmVhdGVUb2tlbkZyb21UZXh0KGlucHV0VmFsdWUpKTtcblx0XHRtdWx0aUlucHV0LnZhbHVlID0gXCJcIjtcbiAgICB9XG59KTtcblxubXVsdGlJbnB1dC5hZGRFdmVudExpc3RlbmVyKFwidG9rZW4tZGVsZXRlXCIsIChldmVudCkgPT4ge1xuICAgIGNvbnN0IHRva2VuID0gZXZlbnQuZGV0YWlsPy50b2tlbjtcbiAgICB0b2tlbiAmJiB0b2tlbi5yZW1vdmUoKTtcbn0pOyJ9fQ

Steps to Reproduce

  1. Run screen reader to read focused items
  2. Focus on element that is direct wrapper of ui5-tokenizer and has tabindex=0 .
  3. As example also you can use UDEx component https://pages.github.tools.sap/sapudex/digital-design-system/?path=/docs/components-actions-select-box--docs&globals=theme:Horizon+Brand . If used ui5 component, first select any item from dropdown list, for tokens to be added into the field
  4. Reading contains "Tokeniser" twice

Simple source code to reproduce:

Log Output, Stack Trace or Screenshots

Screen.Recording.2024-12-11.at.10.47.02.mov
Screen.Recording.2024-12-11.at.14.30.14.mov

Priority

None

UI5 Web Components Version

1.24.13

Browser

Chrome

Operating System

MacOS , Windows

Additional Context

Used screen readers: Mac VoiceOver, Windows JAWS
UDEx bug ticket: https://github.tools.sap/sapudex/digital-design-system/issues/955

Organization

SAP / UDEx components team

Declaration

  • I’m not disclosing any internal or sensitive information.
@PlutaKatarzyna PlutaKatarzyna added the bug This issue is a bug in the code label Dec 11, 2024
@dmitrykostenko
Copy link

I have done an investigation in the browser and it helped me solve the problem to changing the aria-labelledby to aria-describedby
image
image

@plamenivanov91
Copy link
Contributor

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

I can confirm that Tokenizer is being read twice in the provided sapudex link following the steps. I used JAWS 2024.

There is also a suggestion how to fix the issue in the previous comment.

Is this supposed to be fixed on Tokenizer side? Could you please take over?

Regards,
Plamen Ivanov

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 Low Prio SAP UDEx TOPIC RL
Projects
Status: New Issues
Development

No branches or pull requests

3 participants