Closed Bug 1280406 Opened 4 years ago Closed 4 years ago

[a11y] Make each start of a comment a heading 3 for easier navigation

Categories

(bugzilla.mozilla.org :: User Interface, enhancement, P1)

Production
enhancement

Tracking

()

VERIFIED FIXED

People

(Reporter: MarcoZ, Unassigned)

References

Details

(Keywords: access)

Attachments

(1 file)

Each comment should be navigable via screen readers. Suggestion is this, which would magically turn all comment headers into screen reader equivalents of an <h3> element, but without actually interfering with current markup:

for (var e of document.querySelectorAll(".change-name")) {
 e.setAttribute("role", "heading");
 e.setAttribute("aria-level", "3");
}

Please apply those two attributes to the element. :-) That will make navigation among comments a lot easier for screen reader users.
Severity: normal → enhancement
Priority: -- → P1
We would like to fix this before we switch over to modal as default.
Blocks: 1150541
Assignee: nobody → dkl
Status: NEW → ASSIGNED
Attached patch 1280406_1.patchSplinter Review
Attachment #8825118 - Flags: review?(dylan)
Comment on attachment 8825118 [details] [diff] [review]
1280406_1.patch

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

::: extensions/BugModal/template/en/default/bug_modal/activity_stream.html.tmpl
@@ +130,4 @@
>  
>        <tr id="cr-[% comment.count FILTER none %]" [%= IF comment.collapsed %]style="display:none"[% END %]>
>          <td colspan="2">
> +          <div role="heading" aria-level="3" class="change-name">

Any particular reason this can't be a H3 element instead? It is possible to nest an a within an h3 (or any h1..h6) elements. The patch will yield the expected result for screen readers, but the question is if we can go more default HTML-ish here and avoid the use of ARIA. If not, that's fine, just want to bring it up for discussion/understanding.
Comment on attachment 8825118 [details] [diff] [review]
1280406_1.patch

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

r=dylan patch is fine. If we can make this an h3 without more work, that would be a good idea too.
Attachment #8825118 - Flags: review?(dylan) → review+
To https://github.com/mozilla-bteam/bmo.git
   ccb3104..0c30df3  master -> master
Status: ASSIGNED → RESOLVED
Closed: 4 years ago
Resolution: --- → FIXED
Due to unforseen need to push to prod early, this is live now.

dkl
Verified fixed.
Status: RESOLVED → VERIFIED
Assignee: dkl → nobody
Component: User Interface: Modal → User Interface
You need to log in before you can comment on or make changes to this bug.