Summary

Improve accessibility and add dark mode for comment issue bars.

Review Request #13715 — Created April 8, 2024 and submitted April 20, 2024, 8:59 p.m.

Information

Owner

chipx86

Repository

Review Board

Branch

release-7.x

Bugs

Depends On

Reviewers

Groups

reviewboard

People

Description

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.

Testing Done

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.

Commits

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

Summary

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

Files

Issues

Description	From	Last Updated
Can we swap out the _.each for for (const issueBarEl of this._$reviewComments.find(...)) { ?	david	April 14, 2024, 4:41 p.m.
Can be type BaseComponentViewOptions	david	April 14, 2024, 4:42 p.m.
Can be type EventsHash	david	April 14, 2024, 4:43 p.m.
These can all be import type	david	April 14, 2024, 4:43 p.m.
object -> IssueStatusUpdatedEventData	david	April 18, 2024, 10:41 a.m.
This won't be necessary after /r/13714/	david	April 14, 2024, 4:43 p.m.
This should be newIssueStatus, and I'd prefer to use CommentIssueStatusType instead of string.	maubin	April 17, 2024, 10:36 p.m.
Missing docs for issueStatus, also can give it a type of CommentIssueStatusType instead of string.	maubin	April 17, 2024, 10:38 p.m.

flake8 passed.

JSHint passed.

Change Summary:

Added missing CSS changes and a fix to the template.

Commits:

	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.	ab1ee90323a7c18b4d4eefecbd1155552fb3b192
	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.	74dc8456ef95922f2862ce9c2d0eddd128992a30

Diff:

Revision 2 (+3030 -1802)

Show changes

	reviewboard/staticbundles.py
	reviewboard/static/rb/css/bundles/reviews.less
	reviewboard/static/rb/css/pages/reviews.less
	reviewboard/static/rb/css/ui/colors.less
	reviewboard/static/rb/css/ui/review-request/issue-bar.less
	reviewboard/static/rb/js/reviewRequestPage/views/reviewView.es6.js
	reviewboard/static/rb/js/reviews/index.ts
	reviewboard/static/rb/js/reviews/views/commentIssueBarView.ts
	5 more

Checks run (2 succeeded)

flake8 passed.

JSHint passed.

reviewboard/static/rb/js/reviewRequestPage/views/reviewView.es6.js (Diff revision 2)
The issue has been resolved. Show all issues
```
Can we swap out the _.each for for (const issueBarEl of this._$reviewComments.find(...)) { ?
```
reviewboard/static/rb/js/reviews/views/commentIssueBarView.ts (Diff revision 2)
The issue has been resolved. Show all issues
```
Can be type BaseComponentViewOptions
```
reviewboard/static/rb/js/reviews/views/commentIssueBarView.ts (Diff revision 2)
The issue has been resolved. Show all issues
```
Can be type EventsHash
```

reviewboard/static/rb/js/reviews/views/commentIssueBarView.ts (Diff revision 2)

The issue has been resolved. Show all issues

These can all be import type

reviewboard/static/rb/js/reviews/views/commentIssueBarView.ts (Diff revision 2)

The issue has been resolved. Show all issues

object -> IssueStatusUpdatedEventData

chipx86 April 14, 2024, 4:44 p.m.

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/.

reviewboard/static/rb/js/reviews/views/tests/commentIssueBarViewTests.ts (Diff revision 2)
The issue has been resolved. Show all issues
```
This won't be necessary after /r/13714/
```

Change Summary:


Switched a legacy _.each() to a for..of.
Imported some things as type.
Removed the now-unnecessary $testsScratch declaration.

Commits:

	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.	74dc8456ef95922f2862ce9c2d0eddd128992a30
	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.	def1ee829f78f1f9866c569ed8257a89d6dbb007

Diff:

Revision 3 (+3030 -1804)

Show changes

	reviewboard/staticbundles.py
	reviewboard/static/rb/css/bundles/reviews.less
	reviewboard/static/rb/css/pages/reviews.less
	reviewboard/static/rb/css/ui/colors.less
	reviewboard/static/rb/css/ui/review-request/issue-bar.less
	reviewboard/static/rb/js/reviewRequestPage/views/reviewView.es6.js
	reviewboard/static/rb/js/reviews/index.ts
	reviewboard/static/rb/js/reviews/views/commentIssueBarView.ts
	5 more

Checks run (2 succeeded)

flake8 passed.

JSHint passed.

reviewboard/static/rb/js/reviews/views/commentIssueBarView.ts (Diff revision 3)
The issue has been resolved. Show all issues
```
This should be newIssueStatus, and I'd prefer to use CommentIssueStatusType instead of string.
```

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

The issue has been resolved. Show all issues

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

Change Summary:


Added types to docs.
Added missing args in docs.

Commits:

	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.	def1ee829f78f1f9866c569ed8257a89d6dbb007
	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

Diff:

Revision 4 (+3038 -1804)

Show changes

	reviewboard/staticbundles.py
	reviewboard/static/rb/css/bundles/reviews.less
	reviewboard/static/rb/css/pages/reviews.less
	reviewboard/static/rb/css/ui/colors.less
	reviewboard/static/rb/css/ui/review-request/issue-bar.less
	reviewboard/static/rb/js/reviewRequestPage/views/reviewView.es6.js
	reviewboard/static/rb/js/reviews/index.ts
	reviewboard/static/rb/js/reviews/views/commentIssueBarView.ts
	5 more

Checks run (2 succeeded)

flake8 passed.

JSHint passed.

Ship it!

```
Ship It!
```

Status:: Completed
Change Summary:: Pushed to release-7.x (b45d574)