1280393 - [a11y] All inputs and selects need to be labeled properly

Status: RESOLVED FIXED

(bugzilla.mozilla.org :: User Interface, defect)

Description

[Marco Zehe (:MarcoZ)]

In Edit mode, none of the inputs and selects have an associated label. So each label needs to become a proper <label> element, and its for attribute must point to the proper ID of the select or input it is labeling. To see those, you need to actually edit the bug you're viewing. Right now, screen reader users have no clue when tabbing through the form which field is for what. No exception, they all fail this test currently.

Comment 1

[David Lawrence [:dkl]]

We would like to fix this before we switch over to modal as default.

Comment 2

[David Lawrence [:dkl]]

Attachment: 1280393_1.patch

This patch adds labels where it does not currently use a link to a help page or other landing cgi page in BMO.

dkl

Comment 3

[Dylan Hardison [:dylan] (he/him)]

I don't think this is enough, as it means that the whiteboard status label isn't a label for the screen reader.
It will be a link to the wiki -- unless I misunderstand.

Maybe you could toss this up on bugzilla-dev and shoot a needinfo over to marco?

Comment 4

[Marco Zehe (:MarcoZ)]

(In reply to Dylan Hardison [:dylan] from comment #3)
> I don't think this is enough, as it means that the whiteboard status label
> isn't a label for the screen reader.
> It will be a link to the wiki -- unless I misunderstand.

You can solve this by adding the aria-labelledby attribute to the input (or select where appropriate), and give it the ID of the link that is the associated label. This will take care of the labeling for the screen reader. It will grab the text from the element with that ID and add it as a label.

Comment 5

[David Lawrence [:dkl]]

(In reply to Marco Zehe (:MarcoZ) from comment #4)
> (In reply to Dylan Hardison [:dylan] from comment #3)
> > I don't think this is enough, as it means that the whiteboard status label
> > isn't a label for the screen reader.
> > It will be a link to the wiki -- unless I misunderstand.
> 
> You can solve this by adding the aria-labelledby attribute to the input (or
> select where appropriate), and give it the ID of the link that is the
> associated label. This will take care of the labeling for the screen reader.
> It will grab the text from the element with that ID and add it as a label.

Thanks. That was the missing bit I needed. I will make a new patch shortly.

dkl

Comment 6

[David Lawrence [:dkl]]

Attachment: 1280393_2.patch

Comment 7

[David Lawrence [:dkl]]

To https://github.com/mozilla-bteam/bmo.git
   491ba5e..194b687  development -> development

Marco I have put this latest patch on our test server https://bugzilla-dev.allizom.org for your final feedback.

dkl

Comment 8

[:glob ✱]

Comment on attachment 8830077 [details] [diff] [review]
1280393_2.patch

Review of attachment 8830077 [details] [diff] [review]:
-----------------------------------------------------------------

::: extensions/BugModal/template/en/default/bug_modal/field.html.tmpl
@@ +113,5 @@
> +          <label for="priority">
> +        [% ELSIF label == "Status" %]
> +          <label for="bug_status">
> +        [% ELSIF label == "Platform" %]
> +          <label for="rep_platform">

wouldn't it be better to pass in an optional label_for param rather than hard coding field names into field.html.tmpl?

Comment 9

[Marco Zehe (:MarcoZ)]

This is working great, except for the textarea for an additional comment. Here, set aria-labelledby to the ID comment-edit-tab, so it gets the label from the tab, that will suffice. Screen readers have a way to list only form elements, so this definitely needs a label to be listed properly.

Comment 10

[David Lawrence [:dkl]]

Attachment: 1280393_3.patch

Updated based on Marco's and glob's suggested changes.

dkl

Comment 11

[Dylan Hardison [:dylan] (he/him)]

Comment on attachment 8830536 [details] [diff] [review]
1280393_3.patch

Review of attachment 8830536 [details] [diff] [review]:
-----------------------------------------------------------------

r=dylan

Comment 12

[David Lawrence [:dkl]]

To https://github.com/mozilla-bteam/bmo.git
   39ace7e..d0cc4c7  master -> master