[SF][A11y][ui5-table]: interactive elements can't be focused in responsive layout

[GongRichard]

Bug Description

interactive elements can't be focused when table is in responsive layout for small screen size.

Please fix this issue in 1.7.X.

Expected Behavior

all interactive elements should can be focused

Steps to Reproduce

1. Go to 'https://codesandbox.io/s/table-actions-focus-ptyir3?file=/src/App.js'
2. use small size for right window
3. use tab to access all interactive elements, you will find you can't access to Dimensions and Weight input.

Context

• UI5 Web Components version: {1.6.0}
• OS/Platform: {...}
• Browser: {Chrome/Edge}
• Affected component: {ui5-table}

Log Output / Stack Trace / Screenshots

Priority

• [ ] Low
• [x] Medium
• [ ] High
• [ ] Very High

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

• Breaks entire application or system - High or Very High
• Accessibility issue - Medium or High
• Functional issue - Medium or High
• Visual issue - Low or Medium

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

Stakeholder Info (if applicable)

• Organization: {SAP SuccessFactors}
• Business impact: {...}

[ndeshev]

Hello @GongRichard

The way you should focus the next row if the focus is currently in interactive element inside of a table cell is navigating the focus back withSHIFT+TAB until it is on the row and then pressing the ARROW DOWN key.

You can check our Help Portal for complete list of keyboard shortcuts and handling for the responsive table: https://help.sap.com/docs/SAPUI5/bc5a64aac808463baa95b4230f221716/f0170e631d654943a7fb928197ea5999.html

[GongRichard]

Hi @ndeshev, Please check the video, I used SHIFT and ARROW DOWN key. But can't access to Dimensions and Weight input.

https://user-images.githubusercontent.com/13098801/187867208-e4425f48-ddfb-4c5f-8561-b2449e5d05e9.mp4

Thanks, Richard

[GongRichard]

Hi @ilhan007 and @ndeshev ,

Please reopen this issue.

Thanks, Richard

[ndeshev]

Hello @GongRichard in my previous answer I described how you are able to focus an interactive element in the next row of a table, when the focus is currently on interactive element (in your case - the input).

I will try to explain it with more details

Because the width of the screen is small the responsive mechanism of the table is activated - this leads to that the "Product", "Dimensions" and "Weight" inputs are all in their separate row.

Step by step actions to focus the second input when it is on a separate row:

1. Focus the first row then the first input.
2. When the focus is in the first input press SHIFT+TAB to move the focus back to the row
3. Now press ARROW DOWN key to focus the row below
4. Press TAB to focus the second input

The table keyboard handling in that case is implemented according to our Accessibility Keyboard Specifications that I posted a link to in my previous response and it is also the same in UI5 Classic (OpenUI5).

[GongRichard]

Hi @anuvenkatesh1, Please see the above comments from @ndeshev, and to see if you can focus on Dimensions and Weight input in responsive screen size. Thanks, Richard

[anuvenkatesh1]

@ndeshev Could you please check the recording blow

https://user-images.githubusercontent.com/32471459/189774821-03ea00ee-1245-4cb9-8e10-7f37fa928483.mp4

I have followed your steps but in "responsive" mode, am unable to focus on some of the fields of the row which have shifted down

[GongRichard]

Hi @ndeshev and @ilhan007 , Please see @anuvenkatesh1 's comment and reopen this issue. Thanks, Richard

[ndeshev]

Hello @GongRichard, @anuvenkatesh1, thank you for your detailed explanation of the issue.

Hello @SAP/ui5-webcomponents-topic-rl , could you please look at this problem. It is a specific use case of the ui5-table component keyboard navigation but it has a big usability/accessibility impact when that case exists.

It is only reproducible when: -- we have ui5-table with popin cells -- the last cell of the row is not a popin one -- viewport is small enough so that the popin responsive mechanism is triggered -- there is an interactive (focusable) element in the last, non-popin cell.

You can see the video for reproduction steps. I was able to reproduce it with clean ui5-webcomponents also.