Improve accessibility and add dark mode for comment issue bars.

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

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.


Commits

Files

    Loading...