Make LabelsInput accept container's size#53552
Conversation
This helps sizing it properly in contexts like the role editor.
web/packages/teleport/src/components/LabelsInput/LabelsInput.story.tsx
Outdated
Show resolved
Hide resolved
web/packages/teleport/src/components/LabelsInput/LabelsInput.tsx
Outdated
Show resolved
Hide resolved
| ${props => props.theme.typography.body3} | ||
| `; | ||
|
|
||
| const LabelTable = styled.table` |
There was a problem hiding this comment.
This PR changes the internal structure of
LabelsInputfrom a bunch of boxes to a regular table, which is also more accessible.
Does it mean that tables are inherently more accessible in this scenario? I didn't know about this, but I wouldn't mind reading up on it, do you have any good resources on this?
There was a problem hiding this comment.
Yes, they are better. Though I don't have any actual reading material that I could recommend, let me jus prove my case with a demo of how Apple's own VoiceOver reads our UI. It would be even better to use a grid role for this, as this is an interactive table, but that would, by convention, require us to implement a different keyboard navigation scheme, so I didn't do it. Table, however, was a low-hanging fruit here, since I already needed to rebuild the layout anyway.
|
(Dropping v16 backport: too complex, not worth it.) |
This helps sizing it properly in contexts like the role editor. Also: replace the trash can icon with a cross icon.
This PR changes the internal structure of
LabelsInputfrom a bunch of boxes to a regular table, which is also more accessible.Before:

After:

Notes:
Contributes to #52221
Contributes to #52222