[Custom Filter]:[When we click ‘XX’ column header, we get the filter Header Popover List name is not provided.]

[jadhavarjun]

Bug Description

When we click ‘XX’ column header, we get the custom filter Header Popover List in that list when you navigate using up down arrow key and when you focus on acceding and descending filter icon you get the proper meaningful but when your focus come to last filter name is not provided.

For your better understanding I have attached some screenshots here:

I have also mentioned story book link where you can check this issue:
Story Book Link: https://sap.github.io/ui5-webcomponents-react/?path=/story/data-display-analyticaltable--custom-filter

Steps:

1. Open Story Book Link and Speech Reader (JAWS)

2. After Opening Story Book Link you able to see table click on Age header you able to see Header Popover List
   

3. Navigate Header Popover List using arrow keys

4. When your focus come to
   
   you can see no meaningful name provided.

Affected Component

No response

Expected Behaviour

Every UI should have meaningful name here for button name should be provided and same should be conveyed by the screen reader.

Isolated Example

No response

Steps to Reproduce

...

Log Output, Stack Trace or Screenshots

No response

Priority

High

UI5 Web Components Version

^1.14.0

Browser

Chrome

Operating System

Windows

Additional Context

No response

Organization

No response

Declaration

• I’m not disclosing any internal or sensitive information.

[kgogov]

Hello @jadhavarjun,

Thank you for reporting this issue! I will forward it to our UI5 Web Components for React team, as the affected component is developed in their repository.

From my investigation, it appears that the <ListItemCustom> wrapper is being used in the column header popover without an accessibleName being set. According to the documentation, if an accessibleName is not provided, a default text alternative will be set, if present.

@SAP/ui5-webcomponents-react-team,
Could you please look into this issue on your end? Thank you!

Regards,
Konstantin Gogov
UI5 Web Components GitHub Dispatcher

[jadhavarjun]

Hi @kgogov , @MarcusNotheis ,

When can I expect a resolution for this issue? please.

[MarcusNotheis]

I'm currently looking into the specs of how the Filter within column header should look like.
When looking at the implementation of SAPUI5, it looks like there is a static text Filter included before the input, so I would assume if we switch to that approach it will resolve the screen reader issue:

[ui5-webcomponents-react-bot]

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

The release is available on v1.29.6

Your semantic-release bot 📦🚀

[jadhavarjun]

Hi @Lukas742 ,
I can see that you have fixed and closed the issue from your side. I want to know when will you release this version and what changes do I have to make in my code so that the issue gets resolved from my side, do I have to use any attribute or it will get solved automatically by version update.

[Lukas742]

Hi @jadhavarjun

please see the comment above your last one 😉

So, the fix is available with v1.29.6 and there's not further action required.

[ui5-webcomponents-react-bot]

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

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

Your semantic-release bot 📦🚀

[jadhavarjun]

Hi @Lukas742,

Now if we focus on the filter column, will all the element or filters within the filter column it be read, actually what happening when we fucus on that filter column the input filed is their within filter column is not being read, I have tried with everything i have added accessibleName, Placeholder attributes accissibleName attribute read only when our focus is directly on that particular input field.
**Expected behavior **: When we focus on the filter column within that filter column should read.

I have attached screenshot you can see here input field is not read.

[Lukas742]

Hi @jadhavarjun

You're using a custom implementation of the Filter, which we cannot reproduce without an isolated example. For the default implementation it's working as intended.
Also, it doesn't seem like you've updated to at least v1.29.6 as the "Filter" text is missing. (v1 Storybook)

To assist you further please add an isolated example by leveraging this StackBlitz template.

[jadhavarjun]

Hi @Lukas742,

that above stackblitz link you provided that version is 1.29.0 in that I am not able to check issue can you please provide me latest version stackblitz link

[Lukas742]

Hi @jadhavarjun

the linked StackBlitz uses the latest version (v1.29.8). Here you can find the same template just with a console.log that is showing the version number: https://stackblitz.com/edit/github-vpi3cr?file=src%2FApp.tsx

Also, you can update the dependencies yourself, by changing it in the package.json. Sometimes, you may have to refresh the page so StackBlitz reinstalls the dependencies, but apart from that you can use it in the same way as your app.