• 
      

    Modernize inline-editor, fix layout issues, and improve accessibility.

    Review Request #13291 — Created Sept. 26, 2023 and submitted

    Information

    Review Board
    release-6.x

    Reviewers

    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 changing display to changing visibility
    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 use display 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.

    Summary ID
    Modernize inline-editor, fix layout issues, and improve accessibility.
    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 changing `display` to changing `visibility` 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 use `display` 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.
    0912752a1a19cfda4df3ed62ee2a8f0f3f9bb67e

    Description From Last Updated

    Not sure what "rendered..." means here.

    maubinmaubin

    Do we need a Version Added here?

    maubinmaubin

    Do we need a Version Added here?

    maubinmaubin
    chipx86
    david
    1. Ship It!
    2. 
        
    chipx86
    maubin
    1. 
        
    2. Show all issues

      Not sure what "rendered..." means here.

      1. Just a placeholder for rendered field data. I'll change it.

    3. Show all issues

      Do we need a Version Added here?

    4. Show all issues

      Do we need a Version Added here?

    5. 
        
    chipx86
    david
    1. Ship It!
    2. 
        
    maubin
    1. Ship It!
    2. 
        
    chipx86
    Review request changed
    Status:
    Completed
    Change Summary:
    Pushed to release-6.x (04ef599)