Enable accessibility and item registration for the formatting toolbar.

Review Request #13212 — Created Aug. 14, 2023 and submitted

Information

Review Board
release-6.x

Reviewers

This updates the HTML for the formatting toolbar to ensure it's
accessible, enabling screen readers to understand the groups and items
on the toolbar in order to communicate it to the user, and to enable
keyboard navigation. This involves setting ARIA attributes and using
<button> instead of <a>.

Items are now registered dynamically instead of hard-coded. This is both
to ensure consistent HTML (particularly with accessibility) and to later
allow extensions to add buttons to the toolbar (which was an original
goal of the project).

This does make one minor change to the toolbar contents, which is to mov
the Code button alongside Bold/Italic/Strikethrough. This is because
it's just setting an inline style like those (it's a code literal, not a
code block), and has more in common with those than linking/uploading
media.

Tested all of the toolbar functionality. It all works (except for image
uploads, which is a known problem already).

Summary ID
Enable accessibility and item registration for the formatting toolbar.
This updates the HTML for the formatting toolbar to ensure it's accessible, enabling screen readers to understand the groups and items on the toolbar in order to communicate it to the user, and to enable keyboard navigation. This involves setting ARIA attributes and using `<button>` instead of `<a>`. Items are now registered dynamically instead of hard-coded. This is both to ensure consistent HTML (particularly with accessibility) and to later allow extensions to add buttons to the toolbar (which was an original goal of the project). This does make one minor change to the toolbar contents, which is to mov the Code button alongside Bold/Italic/Strikethrough. This is because it's just setting an inline style like those (it's a code literal, not a code block), and has more in common with those than linking/uploading media.
38d04d603e76e16f1111f2f0e8948fc5a1272f01
Description From Last Updated

Now that these aren't being referenced in events, can we rename the handlers to be private?

daviddavid

For the image upload button, I'll need to listen to the file input's change event instead of the button's click …

maubinmaubin

Typo "roup" -> "group"

maubinmaubin
maubin
  1. 
      
  2. reviewboard/static/rb/js/ui/views/textEditorView.ts (Diff revision 1)
     
     
     
     
     
     
     
     
     
     
     
     
     
    Show all issues

    For the image upload button, I'll need to listen to the file input's change event instead of the button's click event. We should give the toolbar items an EventsHash type option or something similar that would allow us to set other events and support setting events on specific elements in the $el, not just the button. This'll give more flexibility to extensions too.

    1. I think once it's at the point of managing its own element, it should also set up its own event management. This can be pulled out into a standalone element that the event is registered on, and then passed in as $el.

      I'll update this to prepare for your change.

  3. Show all issues

    Typo "roup" -> "group"

  4. 
      
david
  1. 
      
  2. Show all issues

    Now that these aren't being referenced in events, can we rename the handlers to be private?

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