[SF][Table]: [Focus indicator should not be cut off when with single selection]

[tandan0813]

Describe the bug

Please see the storybook: https://ui5.github.io/webcomponents-react/v2/?path=/docs/data-display-table--docs

When the screen size is small and the table is scrollable, it is seen that the focus indicator is cut off and the focussed element is not fully visible

Isolated Example

No response

Reproduction steps

...

Expected Behaviour

Full focussed element must be visible and focus indicator should not be cut off

Screenshots or Videos

No response

UI5 Web Components for React Version

2.18.0

UI5 Web Components Version

2.18.0

Browser

Chrome

Operating System

No response

Additional Context

No response

Relevant log output

Organization

No response

Declaration

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

[Lukas742]

Hi @tandan0813

the selection column is sticky, so it is intended that the row is horizontally scrollable, and that the selection column is on top. Without scrolling, content wouldn't be accessible. If this is not what you meant to report, please add a clear description of the problem, steps to reproduce it and an isolated example, preferably by using this StackBlitz template.

I'm going to close this issue now, but feel free to add additional context here, so we can check again.

[tandan0813]

Hi @Lukas742

I understand that the table's ability to scroll horizontally is the expected behavior. However, because the first column is fixed, the focus on cells gets cut off during horizontal scrolling, rather than being fully visible. This results in an a11y issue. You can reproduce this behavior by reducing the screen size and viewing the example inside: https://ui5.github.io/webcomponents-react/v2/?path=/docs/data-display-table--docs.

a11y require that when a cell is focused, the outline should be complete, and the cell's content should not be obscured by the content of a fixed cell.

[Lukas742]

Thanks for the explanation @tandan0813.

I'll forward this issue to the ui5/webcomponents repo, as the Table component is developed there.

---

Hi colleagues,

it’s not fully clear to me what the expected behavior should be in this case. I would assume that a focused cell should automatically be scrolled into the viewport - is that correct?

Also, in the linked example we render <span>Text</span> inside the table cells, which is why the text does not wrap by default. Is there any guidance on what type of content is supported, or whether text should wrap when possible?