search

SAP / ui5-webcomponents

UI5 Web Components - the enterprise-flavored sugar on top of native APIs! Build SAP Fiori user interfaces with the technology of your choice.
https://sap.github.io/ui5-webcomponents/
Apache License 2.0
1.51k stars 262 forks source link

Growing List component screen reader announcement is incorrect #6021

Closed lateefsofi closed 6 months ago

lateefsofi commented 1 year ago

Bug Description

Growing list screen reader announcement is not correct. If there are 100 items which we need to show in the list and we try to load 10(in each page) then announcement is like 1 of 10, 2 of 10 and so on, while navigating between list items. When we load the next page in the list(now list is with 20 items) and announce will be like 1 of 20, 2 of 20 etc. Announcement changes each time we load a new page.

Expected Behavior

Ideally announcement should be based on the total number of items in our case 100 rather than the items currently available in the list. example: 1 of 100, 2 of 100 and so on. List should expose a property like count for growing list.

Steps to Reproduce

  1. Go to 'https://codesandbox.io/s/mutable-forest-2tot5e?file=/src/index.js'
  2. Turn on screen reader
  3. Navigate through the list with arrow keys and listen announcement
  4. When you reach last item in the list, new page will be loaded and announcement will change.

Isolated Example

CodeSandbox.

Context

Priority

The priority indicates the severity of the issue. To set the appropriate priority consider the following criteria:

Note: The priority might be re-evaluated by the issue processor.

Stakeholder Info (if applicable)

unazko commented 1 year ago

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

The current behavior is as explained by the author. The list item count is announced based on the currently loaded items and not on all available items that could be loaded. I've tested the same in the openui5 project and the result is also the same. Not sure what should be the proper announcement here. There is a visual indication for how many items could be loaded in some of the openui5 samples however.

Could you please check this requirement with the accessibility experts.

Best Regards, Boyan

dobrinyonkov commented 1 year ago

Internal Reference: BGSOFUIPIRIN-5979

don-obrien commented 1 year ago

we raised this in open office hours today with SAP experts. Imagine a list with 500 rows, and you show 100 at a time, if you are looking at the 1st "page" of 100 we should not hear "row 5 of 100", instead... The conclusion was : Scenario 1: if we know the total number of records, then as you arrow through the rows, the user should hear the row 5 of 500 Scenario 2: if we do not know the total number of rows, then the component should set the aria-setsize to -1 https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-setsize

related information :https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-posinset

don-obrien commented 1 year ago

@dobrinyonkov @unazko , Based on the above information, can we please treat this as a defect, rather than a feature request, , and get this taken care of with relevant priority?

dobrinyonkov commented 6 months ago

Hello @don-obrien, you can now use the accessibilityAttributes property and change the ariaSetsize and ariaPosinset values. https://github.com/SAP/ui5-webcomponents/pull/7187

listItem.accessibilityAttributes = {
    ariaSetsize: 200,
    ariaPosinset: 3,
};