[Sourcing][Accessibility][x] Focus not moving to first interactive element in dynamic page

[Sayandeep-123]

Is this a bug, enhancement, or feature request?

Bug

Briefly describe your proposal.

On clicking the tab, page gets scroll to the selected section but the focus stays on that tab. The focus should move to the first interactive element of the selected section.

https://github.com/SAP/fundamental-ngx/assets/71999626/a7c3c3c3-984f-4b10-8310-9faa840e7142

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

@angular/cli - 15.2.8 @fundamental-ngx/cdk - 0.41.0-rc.3 @fundamental-ngx/core - 0.41.0-rc.3 @fundamental-ngx/platform - 0.41.0-rc.3

If this is a bug, please provide steps for reproducing it.

In dynamic page with stacked tabs, click on the tab -> the focus stays on the tab itself and doesn't move to first interactive element in particular section.

Please provide relevant source code if applicable.

https://stackblitz.com/edit/angular-t6seax

Is there anything else we should know?

[I543348]

This is for implementing responsiveness in Sourcing

[fkolar]

@Sayandeep-123 , I am not really sure if I understand the problem. What do you mean by first interactive element? Can you be more concrete? Also I see you made a video based on some stackblitz example but I don't see any link to test.

[Sayandeep-123]

@fkolar @skaquib123 , in the below video, there are 3 tabs(Tab 1 , Tab 2 , Tab 3). On clicking any tab, let's say "Tab 3". The focus should move to the "First button in Tab 3 panel" button which is present inside Tab 3's tabpanel (as it is the first element the user will interactive with inside Tab 3's tabpanel) similar to the implementtion in UI5 - https://ui5.sap.com//#/entity/sap.uxap.ObjectPageSection/sample/sap.uxap.sample.ObjectPageSection.

https://github.com/SAP/fundamental-ngx/assets/71999626/e37b5103-889b-4ab5-9d23-e80dd97fbd3c

The stackblitz application link is already added in description.

Stackblitz application link - https://angular-t6seax.stackblitz.io Stackblitz editor link - https://stackblitz.com/edit/angular-t6seax?file=src%2Fapp%2Fdynamic-page-tabs-example.component.html

Please let me know for any further queries.

[fkolar]

It seems there is a issue, or more this part is not implemented in the TablePanel, once expanded (opened). Or it can be done also on the app level,

On the app level you can use the selectedTabChange to listen when the tab is open/changed and you can manually focus on the first element.

[I543348]

Hi @skaquib123 , Can you please help with a tentative ETA for this issue?

[skaquib123]

Hi @I543348, Frank has provided one solution for app level. Can you please confirm whether that is working or not?

[fkolar]

It seems we are looking at permanent fix instead of some temporary solution.

1. We need to check what to fix Core DynamicPage or Platform Dynamic Page
2. Suggest the fix to F-NGX (I believe it is going to be in CORE)
3. Fix

[fkolar]

Found the problem is with browser .

Test this in safari vs chrome: https://fkolar.github.io/dynamic-page-focus/?v-1

[fkolar]

I believe this should be handled by F-NGX. I can confirm that turning on Full Accessibility keyboard support it works:

But then Mac is hard to use as everything highlights

https://stackoverflow.com/questions/67901731/cannot-focus-button-using-tab-key-navigation-on-safari

[Sayandeep-123]

The issue is still reproducible. The focus doesn't move to the first interactive element of selected tab. So, could we please get it open?

[Sayandeep-123]

Checked with latest version. It's working as expected. Thanks.