Improve accessibility and add dark mode for comment issue bars.

Review Request #13715 — Created April 8, 2024 and submitted

Information

Review Board
release-7.x

Reviewers

The comment issue bar has been rewritten entirely to be accessible, to
support dark mode, and to be more performant.

The CSS side is now using our CSS Component standards, and makes use of
CSS variables and CSS grid to do the layout. Through this, we now have
dark mode support, CSS-managed status icons, and an improved mobile UI.

The JavaScript side has been rewritten in TypeScript and Ink. It no
longer uses the old behavior of defining every button up-front and
toggling visibility, and instead manages the list of buttons relevant to
the current issue and user states. This, combined with ARIA information,
gives us a more accessible and clean bar.

It also makes use of the new per-comment issue events, which means that
toggling an issue no longer results in every single issue bar on the
page running checks. It's faster and less error-prone than what we had
before.

In dark mode, we now go for a layered grey background, and use the icon,
text, and button colors to help sell the appearance of the bar. The text
and buttons are now yellow-themed, like the bar is in light mode.

The buttons also now show an animation when in the middle of setting a
new issue status. This leverages Ink.Button's busy state.

All unit tests pass.

Tested all the issue status combinations, making sure that loading and
changing statuses worked as expected.

Tested dark and light modes, desktop and mobile.

Checked the accessibility tree for any apparant issues.

Summary ID
Improve accessibility and add dark mode for comment issue bars.
The comment issue bar has been rewritten entirely to be accessible, to support dark mode, and to be more performant. The CSS side is now using our CSS Component standards, and makes use of CSS variables and CSS grid to do the layout. Through this, we now have dark mode support, CSS-managed status icons, and an improved mobile UI. The JavaScript side has been rewritten in TypeScript and Ink. It no longer uses the old behavior of defining every button up-front and toggling visibility, and instead manages the list of buttons relevant to the current issue and user states. This, combined with ARIA information, gives us a more accessible and clean bar. It also makes use of the new per-comment issue events, which means that toggling an issue no longer results in every single issue bar on the page running checks. It's faster and less error-prone than what we had before. In dark mode, we now go for a layered grey background, and use the icon, text, and button colors to help sell the appearance of the bar. The text and buttons are now yellow-themed, like the bar is in light mode. The buttons also now show an animation when in the middle of setting a new issue status. This leverages `Ink.Button`'s busy state.
4b12b64c9af22c7325253b88164898dfbeb42b06

Description From Last Updated

Can we swap out the _.each for for (const issueBarEl of this._$reviewComments.find(...)) { ?

daviddavid

Can be type BaseComponentViewOptions

daviddavid

Can be type EventsHash

daviddavid

These can all be import type

daviddavid

object -> IssueStatusUpdatedEventData

daviddavid

This won't be necessary after /r/13714/

daviddavid

This should be newIssueStatus, and I'd prefer to use CommentIssueStatusType instead of string.

maubinmaubin

Missing docs for issueStatus, also can give it a type of CommentIssueStatusType instead of string.

maubinmaubin
chipx86
david
  1. 
      
  2. Show all issues

    Can we swap out the _.each for for (const issueBarEl of this._$reviewComments.find(...)) { ?

  3. Show all issues

    Can be type BaseComponentViewOptions

  4. Show all issues

    Can be type EventsHash

  5. Show all issues

    These can all be import type

  6. Show all issues

    object -> IssueStatusUpdatedEventData

    1. Yeah, let's discuss what we want to settle on here, because I keep going back and forth on what actually makes sense for these docs. I have some comments on this on /r/13712/.

  7. Show all issues

    This won't be necessary after /r/13714/

  8. 
      
chipx86
maubin
  1. 
      
  2. Show all issues

    This should be newIssueStatus, and I'd prefer to use CommentIssueStatusType instead of string.

  3. reviewboard/static/rb/js/reviews/views/commentIssueBarView.ts (Diff revision 3)
     
     
     
     
     
     
     
     
    Show all issues

    Missing docs for issueStatus, also can give it a type of CommentIssueStatusType instead of string.

  4. 
      
chipx86
david
  1. Ship It!
  2. 
      
chipx86
Review request changed
Status:
Completed
Change Summary:
Pushed to release-7.x (b45d574)