-
-
Notifications
You must be signed in to change notification settings - Fork 4.6k
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:
There were 2 main problems:
- During opening action menu of each row
- 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:
.userActionshadz-index: 10.popovermenuhadz-index: 110.userActionsis a parent of.popovermenu- A child cannot have
z-indexhigher than parent
For
position: relativewe could just removez-index: 10. But withposition: stickyit works different...position: stickyalways creates a new stacking context. It is possible neither to removez-indexfromstickyparent, nor to make child with higherz-index...
If I'm not wrong, the only way to keep sticky here is to use another
containerforNcActionshere. For example,#app-content. But > I am really not sure, it positions element correct with sticky...
For an experiment, try to set
containerprop ofNcActionshere to#app-content.
from #37860 (comment)
And:
Proposals regarding sticky + z-index issue:
Render
NcActionsoutside 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-indexvalue
- 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.
