SAP / fundamental-ngx

Fundamental Library for Angular is SAP Design System Angular component library
https://sap.github.io/fundamental-ngx
Apache License 2.0
263 stars 126 forks source link

[Sourcing][P2][Accessibility][P13 dialog]: Unable to operate Move buttons using keyboard and focus is not moving to these buttons #12014

Closed I543348 closed 1 month ago

I543348 commented 2 months ago

Is this a bug, enhancement, or feature request?

Bug

Describe your proposal.

When the buttons : Move down , move to bottom, move to top and move up are activated in p13 dialog they are not operable using keyboard. The buttons immediately get disabled when keyboard comes into picture

Can you handle that on the application side

No

Which versions of Angular and Fundamental Library for Angular are affected? Please, specify the exact version. (If this is a feature request, use current version.)

Angular : 15 platform: 0.43.34

If this is a bug, please provide steps for reproducing it; the exact components you are using;

1) access https://ng-15-downport--fundamental-ngx.netlify.app/#/platform/table/basic#p13-table-columns 2) open settings icon 3) check or uncheck few columns 4) try to move focus to arrow icons beside search box

https://github.com/SAP/fundamental-ngx/assets/88182358/c2a63899-0da3-4091-bdc5-68a2da9f7a7c

Please provide relevant source code (if applicable).

replicable on ng-15 site : https://ng-15-downport--fundamental-ngx.netlify.app/#/platform/table/basic#p13-table-columns

Please provide stackblitz example(s).

https://ng-15-downport--fundamental-ngx.netlify.app/#/platform/table/basic#p13-table-columns

In case this is Accessibility related topic, did you consult with an accessibility expert? If not, please do so and share their recommendations.

reported by accessibility test lab team

Did you check the documentation and the API?

Did you search for similar issues?

Is there anything else we should know?

IMPORTANT: Please refrain from providing links or screenshots of SAP's internal information, as this project is open-source, and its contents are accessible to anyone.

mikerodonnell89 commented 1 month ago

This one is interesting because you can't focus two elements at the same time (the element for the column you wish to rearrange, then the button for up/down). Our implementation here does match the Horizon designs but I'm seeing UI5 handle this differently:

Screenshot 2024-07-23 at 3 01 47 PM
mikerodonnell89 commented 1 month ago

When we initially developed this feature we were following the UX guidelines here: https://experience.sap.com/fiori-design-web/table-personalization-dialog/ Screenshot 2024-07-24 at 11 23 08 AM

However, it looks like the new design matches that of ui5 that I mentioned in my previous comment. As this will be a new feature, we won't be implementing it for the ng15 downport releases. However for ng15 downport, I can enable the move up/move down buttons so they work with the previously focused item from the list. https://github.com/SAP/fundamental-ngx/pull/12174

I543348 commented 1 month ago

Thanks @mikerodonnell89 , I see the PR is merged , Can you please confirm if we have any release version?

I543348 commented 1 month ago

Thanks @mikerodonnell89 , Can you please confirm release version for this issue? i see PR is already merged.

mikerodonnell89 commented 1 month ago

Thanks @mikerodonnell89 , Can you please confirm release version for this issue? i see PR is already merged.

@I543348 it's published now on 0.43.40