1425355 - Accessibility Improvements to header and edit bug page

Status: ASSIGNED

(bugzilla.mozilla.org :: General, enhancement)

Description

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

Grab bag of accessibility improvements. 

1. Badge should have the word "number" in its label (aria-label)
2. #bugzilla-body should be marked as main content
3. the mozilla logo is an h1 (this the child of #footer .intro .org-links)
4. The following fields have no label mentors, qa contact, qa whiteboard
5. assignee label is wrong (because it has no label, but uses the placeholder)

Comment 1

[Emma Humphries ☕️🎸🧞‍♀️✨ (she/they) [:emceeaich] (Pacific Time) use needinfo]

Hi! 

This is a good-first-bug for BMO contributors interested in a11y work. To get started you can clone our repo on GitHub, and get it running on your machine.

https://github.com/mozilla-bteam/bmo#using-vagrant-for-development

When submitting a pull request, please make sure each of the changes in Comment #0 are implemented as separate commits. 

1. Badge is the red circle with a number, used to show pending requests
2. If you have questions about which files to modify, please ask, or search the repo.

-- :emceeaich

Comment 2

[Kohei Yoshino [:kohei]]

(In reply to Dylan Hardison [:dylan] (he/him) from comment #0)
> 2. #bugzilla-body should be marked as main content

I think this could be a separate bug for adopting HTML5 in BMO. In Bug 1376826 I've already changed the DOCTYPE to HTML5 to use <header> and <nav>, but there is more that has to be changed, including the charset, <main>, <footer>.

> 3. the mozilla logo is an h1 (this the child of #footer .intro .org-links)

This is fine if the #footer becomes <footer> but given that we are removing the footer soon in Bug 1420771, it can be left as is.

Comment 3

[jsharonkim]

hello, i am new to open source but would like to try to contribute, if this bug is yet unassigned.

Comment 4

[jsharonkim]

(In reply to Emma Humphries, Bugmaster ☕️ (she/her) [:emceeaich] (UTC-8) +needinfo me from comment #1)
> Hi! 
> 
> This is a good-first-bug for BMO contributors interested in a11y work. To
> get started you can clone our repo on GitHub, and get it running on your
> machine.
> 
> https://github.com/mozilla-bteam/bmo#using-vagrant-for-development
> 
> When submitting a pull request, please make sure each of the changes in
> Comment #0 are implemented as separate commits. 
> 
> 1. Badge is the red circle with a number, used to show pending requests
> 2. If you have questions about which files to modify, please ask, or search
> the repo.
> 
> -- :emceeaich

hi! i am setting up my machine for bmo development following the instructions in the link you shared, but i am not sure how to do this step:

To test it, you'll want to add an entry to /etc/hosts for bmo-web.vm pointing
to 192.168.3.43.

i have opened up my local copy of the bmo project but do not see a directory /etc/hosts; should i be looking elsewhere?

thank you.

Comment 5

[Kohei Yoshino [:kohei]]

Hi jsharonkim, thanks for taking this! `/etc/hosts` is on your own computer, not in the BMO VM. The location actually depends on your OS, see https://en.wikipedia.org/wiki/Hosts_(file) for details. This step is optional; you can just open 192.168.3.43 in your browser to see the local server's content.

Comment 6

[jsharonkim]

(In reply to Kohei Yoshino [:kohei] from comment #5)
> Hi jsharonkim, thanks for taking this! `/etc/hosts` is on your own computer,
> not in the BMO VM. The location actually depends on your OS, see
> https://en.wikipedia.org/wiki/Hosts_(file) for details. This step is
> optional; you can just open 192.168.3.43 in your browser to see the local
> server's content.

OHHH so interesting. got it, thank you so much for your response and help!

Comment 7

[jsharonkim]

hello!

by searching the repo for Badge (and informed by https://www.w3.org/TR/WCAG20-TECHS/ARIA14.html), i have so far modified the files: 'extensions/BMO/template/en/default/bug/create/create-comm-newsletter.html.tmpl' and 'extensions/Review/template/en/default/hook/global/header-badge.html.tmpl' to address issue #1.

i read :kohei 's comment above and have left issue #2 and #3 alone. 

could you please provide further direction about #4?
i have looked at the code in the repo where 'qa contact' and 'qa whiteboard' appear and have researched 'label mentors' and i'm not exactly sure what should be done for this issue. 

with regard to issue #5:
i'd appreciate any guidance about which files to modify.
is the task at hand to go through and add an assignee label for all instances of assignee in the repo?

i appreciate any feedback or insight, thank you.

(In reply to Dylan Hardison [:dylan] (he/him) from comment #0)
> Grab bag of accessibility improvements. 
> 
> 1. Badge should have the word "number" in its label (aria-label)
> 2. #bugzilla-body should be marked as main content
> 3. the mozilla logo is an h1 (this the child of #footer .intro .org-links)
> 4. The following fields have no label mentors, qa contact, qa whiteboard
> 5. assignee label is wrong (because it has no label, but uses the
> placeholder)

Comment 8

[akriti verma]

can i upload a patch for 4 & 5?

Comment 9

[Firefox Bug Husbandry Bot]

Removing good-first-bug keyword because team does not have bandwidth to mentor at the moment.

Comment 10

[Kohei Yoshino [:kohei]]

(In reply to Dylan Hardison [:dylan] (he/him) from comment #0)

4. The following fields have no label mentors, qa contact, qa whiteboard
5. assignee label is wrong (because it has no label, but uses the
   placeholder)

These issues have been dealt in Bug 1558096.