977137 - Comment and Preview tabs need accessibility markup

Status: RESOLVED FIXED

(Bugzilla :: User Interface, defect)

Description

[Marco Zehe (:MarcoZ)]

The new Comment and Preview tabs above the Additional Comments field need additional markup to be accessible to screen reader users. Right now, these register as plain clickable text, which is not very useful. The following markup should be applied:

1. Each of the two divs that have the text "Comment" or "Preview" in them should get role="tab".
2. The parent of these two divs should get role="tablist".
3. The JavaScript that changes the styling when each tab becomes active should set aria-selected="true" on the active tab, and aria-selected="false" on the inactive tab. Make sure the attribute value is always switched/set along with the CSS properties for the active/inactive tabs so it doesn't get out of sync.

Comment 1

[:glob ✱]

thanks for being so clear on how to fix this MarcoZ :)

Comment 2

[:glob ✱]

Attachment: 977137_1.patch

Comment 3

[David Lawrence [:dkl]]

Comment on attachment 8383515 [details] [diff] [review]
977137_1.patch

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

Works well. r=dkl

Comment 4

[:glob ✱]

Committing to: bzr+ssh://[e-mail]/bugzilla/trunk/
modified js/field.js
modified template/en/default/bug/comment.html.tmpl
Committed revision 8949.