1558096 - [a11y] Fix remaining accessibility issues on modal UI

Status: RESOLVED FIXED

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

Description

[James Teh [:Jamie]]

STR:

1. Open this in Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=1511275
2. Right click on the heading for a comment; e.g. "Comment 6".
3. Select Inspect Accessibility Properties.
4. In the Accessibility Inspector, examine the ancestors of the comment "heading".
   • Expected: None of the ancestors should have a role of "cell", "row" or "table".
   • Actual: There are "cell", "row" and "table" ancestors.

This has been happening since the recent theme change went live a few weeks ago. This comment header table is a layout table; it even has a class of .layout-table. Sometimes, accessibility cannot "guess" layout tables correctly. This should be marked as a layout table for accessibility by adding a role="presentation" attribute to the <table> element.

Impact: This results in a lot of extraneous verbosity when navigating comments in Bugzilla with a screen reader and thus makes my Bugzilla related work much less efficient.

Comment 1

[Kohei Yoshino]

I’m removing the layout tables in Bug 1350424.

Comment 2

[Kohei Yoshino]

Since the layout table issue is already covered in the other bug, I’d repurpose this bug to fix the rest of the accessibility issues, particularly for visually impaired users. A quick test with NVDA finds some <input> elements missing a proper label, including Assignee, Mentors, QA Contact, See Also, User Story.

Comment 3

[Kohei Yoshino]

Hmm, is this a regression from the new skin? I haven’t made any change to the layout tables. Anyway it’s certainly annoying, will be fixed soon.

Comment 4

[Kohei Yoshino]

Attachment: GitHub Pull Request

While there is still room for improvements overall, this makes UX for screen reader users better. I cannot make it to All Hands in Whistler but :dkl will be there so face-to-face feedback is welcome!

Comment 5

[buovjaga]

I recently ran into this: https://github.com/edenspiekermann/a11y-dialog
I thought I would share it in case it is useful.
Note: https://github.com/edenspiekermann/a11y-dialog#usage-as-a-modal

Comment 6

[Kohei Yoshino]

dkl: Have you heard anything about modal a11y issues during All Hands?

Comment 7

[Kohei Yoshino]

I’ve included role="presentation" in this PR so Bug 1350424 is no longer a blocker. It will eventually remove the layout tables though.

Comment 8

[David Lawrence [:dkl]]

Sorry I did not. Week was pretty full with meetings already. Maybe Emma was able to talk with someone?

Comment 9

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

Nor did I, but I think we should have a meeting with the people reporting the issues so we can get those resolved satisfactory. This needs a document.

Comment 10

[Kohei Yoshino]

We haven’t heard of any blocker issues, so I’d like to get my PR reviewed & merged and disable the legacy UI. There are still so many a11y issues all over the site, and I’m happy to keep fixing them.

Comment 11

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

James would you be open to us turning off the Legacy UI and fixing the access bugs, or should we wait to get the access bug resolved?

Comment 12

[Kohei Yoshino]

My PR has already been merged to master, but I’m happy to follow up if needed :-)

Comment 13

[James Teh [:Jamie]]

(In reply to Emma Humphries, Bugmaster ☕️🎸🧞‍♀️✨ (she/her) [:emceeaich] (UTC-8) needinfo? me from comment #11)

James would you be open to us turning off the Legacy UI and fixing the access bugs, or should we wait to get the access bug resolved?

Sorry for the slow response; I'm on PTO this week.

I think I'm missing some context here. I'm not entirely sure what is meant by legacy UI vs modal UI. As I understand it, huge changes were made to Bugzilla's UI a few years ago which, among other things, reveals the full UI only when the Edit Bug button is pressed. Is this what we're talking about? If so, I've been using that for years with only minor complaints; if anything, it's a vast improvement on the older UI (comments have headings, etc.). The original reason I filed this bug (comment 0) is only a very recent regression (a few weeks ago). The broader scope described in comment 2 covers bugs which probably exist in the old UI as well.

Assuming all of the above is correct, I think it's reasonable not to block disabling the legacy UI for a11y reasons.

Comment 14

[David Lawrence [:dkl]]

(In reply to James Teh [:Jamie] from comment #13)

(In reply to Emma Humphries, Bugmaster ☕️🎸🧞‍♀️✨ (she/her) [:emceeaich] (UTC-8) needinfo? me from comment #11)

James would you be open to us turning off the Legacy UI and fixing the access bugs, or should we wait to get the access bug resolved?

Sorry for the slow response; I'm on PTO this week.

I think I'm missing some context here. I'm not entirely sure what is meant by legacy UI vs modal UI. As I understand it, huge changes were made to Bugzilla's UI a few years ago which, among other things, reveals the full UI only when the Edit Bug button is pressed. Is this what we're talking about? If so, I've been using that for years with only minor complaints; if anything, it's a vast improvement on the older UI (comments have headings, etc.). The original reason I filed this bug (comment 0) is only a very recent regression (a few weeks ago). The broader scope described in comment 2 covers bugs which probably exist in the old UI as well.

Assuming all of the above is correct, I think it's reasonable not to block disabling the legacy UI for a11y reasons.

Yeah sorry. The two forms are not exactly labelled and when we say legacy UI, it is the one before the edit button was added that shows the full edit form as you mentioned. If you want to see the older legacy form, you can simply reload this bug and append format=default to the URL (https://bugzilla.mozilla.org/show_bug.cgi?id=1558096&format=default).

Wth kohei latest commit, a good deal of missing bits were added so we should be close. Any further issues can be opened in new bugs and addressed as we go along.

Thanks.

Comment 15

[Kohei Yoshino]

We have already removed the support for format=default in Bug 1546539 so now the legacy UI can be only displayed when you opt in through the User Preferences ;-)

Thanks James for your confirmation! Let’s disable the legacy UI soon and further improve the current modal UI along with other pages.