Modernize inline-editor, fix layout issues, and improve accessibility.
Review Request #13291 — Created Sept. 26, 2023 and submitted
The inline editor is now a
rb-c-inline-editor
CSS component, with
specific wrappers for the actions (such as buttons) and the field
wrapper. This uses flexbox to handle layout, which enables us to
intelligently size and position the elements without the need for
JavaScript layout code (which didn't work correctly in all cases, and is
now removed).When in the single-line mode, the inline editor now positions the
buttons at the end of the line unconditionally, rather than below the
field. To keep this from taking too much room, the buttons can
optionally collapse down to an icon (a checkmark for Save and an X for
Cancel).In multi-line mode, the buttons contain the label, but also contain the
icons (for consistency and to help build a mental map on actions).Buttons and the inline editor form have ARIA labels, which may include
the field label as part of the name (if provided when instantiating the
editor).The logic for showing/hiding the edit icon received an update. Recently,
a fix was made to move from changingdisplay
to changingvisibility
in order to avoid some line height changes for multi-line text fields,
but this ended up occupying extra space for the single-line editors in a
way that created some visual problems. We now usedisplay
for the
single-line editors,visibility
for multi-line.This change enables a lot of cleanup. A lot of scattered
.editicon
rules have been consolidated and removed. The file attachment caption's
inline editor, which requires a number of overrides, are now a bit
cleaner in design and more future-proof, and maximize available space
for the caption.
Tested all the inline editors in the product, making sure nothing
regressed. This includes the multi-line and single-line fields in the
review request page, file attachment captions, replies, and fields in
the Review Dialog.Tested that single-line editors had the buttons on the same row in all
cases, with short icons.Checked the accessibility tree for the inline editors.
Unit tests pass.
- Change Summary:
-
Removed some review request box layout code that was unintentionally included.
- Commits:
-
Summary ID b3a0aca295e467eacf34d21d17595e893c32ad54 0ad15f8cf3dafb92e40ea800e44e2a011011b125 - Diff:
-
Revision 2 (+784 -456)
Checks run (2 succeeded)
- Change Summary:
-
Fixed a bad class name for the inline editor icon in the JavaScript, and address related styling issues.
- Commits:
-
Summary ID 0ad15f8cf3dafb92e40ea800e44e2a011011b125 b5d9852bcdcf8db6e384e53b716c429cfe106ecd - Diff:
-
Revision 3 (+792 -448)
Checks run (2 succeeded)
- Change Summary:
-
- Added missing
Version Added
to the new variables. - Updated a
Structure
to try to make it more clear where rendered field HTML should be specified.
- Added missing
- Commits:
-
Summary ID b5d9852bcdcf8db6e384e53b716c429cfe106ecd 0912752a1a19cfda4df3ed62ee2a8f0f3f9bb67e - Diff:
-
Revision 4 (+812 -448)