Data list view: sticky elements hide focused elements and tooltips appear on top of sticky elements

[afercia]

Description

I just noticed introduced two important usability and accessibility problems that need to be fixed. Cc @jameskoster @jasmussen

1. When navigating the table content with the keyboard, the currently focused element may be entirely hidden behind the sticky header / footer. This is a violation of the WCAG 2.2 Focus not obscured success criterium and needs to be fixed.
2. The button tooltips show on toop of the sticky header / footer when scrolling the table.

Focus obscured

Focus not obscured requires the currently focused element to be not entirely hidden. After #56157 when tabbing through the focusable elements in the data views table, the currently focused element may be entirely hidden.
In the screenshots below, I'm illustrating the case when they are partially hidden for more clarity. However, depending on the scroll position they may be entirely hidden. This needs to be ficed.

In the WCAG 2.2 criterium Understanding note, there is a specific example about sticky footers. Suggested remediation: use scroll padding.

Screenshot: the shown tooltip actually belongs to a button in the above row that is entirely hidden behind the sticky header:

Screenshot: focused link partially hidden behind the sticky footer (depending on scroll position it may be entirely hidden):

Screenshot: same for buttons:

Tooltips on top of sticky header and footer

Whjen a tooltip appears and users scroll the table, the tooltip is shown on top of the sticky header and footer, triggering visual glitches that should be remediated. See animated GIF below:

Step-by-step reproduction instructions

• In the Site editor navigate to Pages > Manage all pages
• Use the keyboard to navigate through focusable elements within the table.
• Observe some focused elements may be entirely hidden.
• Observe visual glitches ot the tooltips appearing on top of sticky header and footer

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[jameskoster]

I opened #56946 to address the focus issue.

The tooltip one might be tricky to handle. cc @ciampo for any ideas.

[ciampo]

The tooltip one might be tricky to handle. cc @ciampo for any ideas.

It is a bit tricky. Trying out an approach in #57026