965: Edit buttons on Review Request screen are not accessible

brad.******@gmai***** (Google Code) (Is this you? Claim this profile.)
March 20, 2009 
What's the URL of the page containing the problem?

http://my-review-board-site.com/r/REQUEST_NUMBER

What steps will reproduce the problem?
1. View the Review Request page in Orca
2. When reading the page, read the Edit button (pencil icon).

What is the expected output? What do you see instead?

Orca reads the Edit button (pencil icon) as "blank".  This image has no alt
tag information or ARIA roles, so Orca doesn't know what to read.

I'd expect the button's alt tag to be something like "Edit this field", and
the ARIA role to be button.  A detailed list of ARIA roles is available
(http://www.w3.org/TR/wai-aria/#roles).

What operating system are you using? What browser?

Firefox 3 and Orca 2.22.1 on OpenSUSE 11.0.
#1 brad.******@gmai***** (Google Code) (Is this you? Claim this profile.) 
Patch against RB Trunk.
  • +
    edit-button-a11y.patch 
    Index: js/jquery.gravy.js
    ===================================================================
    --- js/jquery.gravy.js	(revision 12001)
    +++ js/jquery.gravy.js	(working copy)
    @@ -313,6 +313,8 @@
                 this._editIcon =
                     $('<img src="' + this.options.editIconPath + '"/>')
                     .addClass("editicon")
    +                .attr("role", "button")
    +                .attr("alt", "Edit this field")
                     .click(function() {
                         self.startEdit();
                     });
#2 brad.******@gmai***** (Google Code) (Is this you? Claim this profile.) 
Additionally, the edit buttons are not focusable, so I'll have to figure a way to
make that happen also.
chipx86
#3 chipx86 
Can you submit this to our Review Board server?
  • +Confirmed
  • +Milestone-Release1.0
    +Component-Reviews
#4 brad.******@gmai***** (Google Code) (Is this you? Claim this profile.) 
Updated patch to make the button focusable (by using an <a> tag) and thus clickable
via Firefox (when a user hits Enter, Firefox will generate the onClick event for
focused items).  Unfortunately, the aria-label will only show up with FF 3.1 and the
latest Orca.

Attachments:
  edit-button-a11y-v2.patch       - patch to Djiblets to change the image properties
  edit-button-a11y-v2-part2.patch - some style fixes

I tried to post this to demo.review-board.org, but it seems that the patch to
Djiblets (which is a svn:external) is freaking it out.  Any tips?
  • +
    edit-button-a11y-v2.patch 
    Index: djblets/js/jquery.gravy.js
    ===================================================================
    --- djblets/js/jquery.gravy.js	(revision 12001)
    +++ djblets/js/jquery.gravy.js	(working copy)
    @@ -311,8 +311,14 @@
     
             if (this.options.showEditIcon) {
                 this._editIcon =
    -                $('<img src="' + this.options.editIconPath + '"/>')
    +                $("<a/>")
    +                .attr('href', '#')
    +                .attr("role", "button")
    +                .attr("aria-label", "Edit this field")
                     .addClass("editicon")
    +                .append(
    +                    $('<img src="' + this.options.editIconPath + '"/>')
    +                )
                     .click(function() {
                         self.startEdit();
                     });
    +
    edit-button-a11y-v2-part2.patch 
    Index: rb/css/common.css
    ===================================================================
    --- rb/css/common.css	(revision 1820)
    +++ rb/css/common.css	(working copy)
    @@ -186,8 +186,10 @@
      * Inline editor forms
      ****************************************************************************/
     .editicon {
    -  cursor: pointer;
       margin-left: 4px;
    +}
    +
    +.editicon img {
       vertical-align: bottom;
     }
chipx86
#5 chipx86 
This should be sent to http://reviews.review-board.org. For the Djblets change,
select the Navi repository.
chipx86
#6 chipx86 
Thanks! Fixed in r12002.
  • -Confirmed
    +Fixed