Skip to content

Create sticky action buttons for table in Settings/User App #38215

Open
@JuliaKirschenheuter

Description

Html structure of the table has been changed for a11y purposes: #36921.
During testing of new implementation some bugs regarding position: sticky and not right existing implementation of z-index of the action buttons have popped up. Demo:

Peek 2023-05-10 14-54

There were 2 main problems:

  1. During opening action menu of each row
  2. During opening action menu of each row in editing mode

For the time reasons was decided to keep good / not broken state but without position: sticky which causes possible right scrolling inside of a table (from a11y perspective absolutely valid but not as user friendly as before), see #37870.

This is a follow-up ticket to correct action buttons to sticky position with current table implementation. There were some suggestions regarding implementation:

Current style was a bit incorrect:

  • .userActions had z-index: 10
  • .popovermenu had z-index: 110
  • .userActions is a parent of .popovermenu
  • A child cannot have z-index higher than parent

For position: relative we could just remove z-index: 10. But with position: sticky it works different... position: sticky always creates a new stacking context. It is possible neither to remove z-index from sticky parent, nor to make child with higher z-index...

If I'm not wrong, the only way to keep sticky here is to use another container for NcActions here. For example, #app-content. But > I am really not sure, it positions element correct with sticky...

For an experiment, try to set container prop of NcActions here to #app-content.

from #37860 (comment)

And:

Proposals regarding sticky + z-index issue:

Render NcActions outside the table row

  • Props:
  • I'd expect it to be easy to implement
  • Cons:
  • Requires rewriting of some integration tests because row buttons will be outside of the row

Generate progressive z-index - set each next row less z-index value

  • Props:
  • Keep the current structure
  • Cons:
  • More complex implementation
  • Not sure about performance and large tables

from #37870 (comment)

Please pay attention that integration tests possibly have to be adopted too.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions