Opened 12 years ago

Closed 12 years ago

#3037 closed defect (fixed)

autocompleter template assigns the id to the fieldset element rather than the input element

Reported by: Becky Gibson Owned by: Becky Gibson
Priority: high Milestone: 0.9beta
Component: Accessibility Version:
Keywords: Cc:
Blocked By: Blocking:

Description

The autocompletor template which is used for several textboxes, assigns the id attribute from the original markup to the fieldset element rather than the input element. The id needs to be on the input element so that the label field that is associated with that id is spoken by the screen reader. In addition, the fieldset element needs waiRole="presentation".

Attachments (3)

autocompleterid_3037.diff (5.6 KB) - added by Becky Gibson 12 years ago.
autocompleterid_3037_2.diff (5.4 KB) - added by Becky Gibson 12 years ago.
updated based on Doug's comments
3037.patch (3.5 KB) - added by Becky Gibson 12 years ago.
assign id='widget_${id} to the domNode

Download all attachments as: .zip

Change History (10)

comment:1 Changed 12 years ago by Douglas Hays

Owner: changed from Douglas Hays to Becky Gibson

This needs more investigation. The widget also needs to be addressed by id so that it can by styled or made hidden or repositioned programmatically by the user.

Changed 12 years ago by Becky Gibson

Attachment: autocompleterid_3037.diff added

comment:2 Changed 12 years ago by Becky Gibson

Status: newassigned

Proposed fix is attached. In post create I create an id for the input element, find any associated label element and update the htmlFor value of the label to refer to the input field. I added this in autocompleter.js and dateTextbox.js as they didn't seem to have a common ancestor. Needs review from a forms widget developer to see if there is a better location for this code.

I also added labels to text_autocompleter.html so I could test this fix.

comment:3 Changed 12 years ago by Douglas Hays

_DropDownTextbox is for common code shared between datetextbox, autocompleter, and select. Maybe the code can go in there and just be called from each widgets postCreate

Changed 12 years ago by Becky Gibson

Attachment: autocompleterid_3037_2.diff added

updated based on Doug's comments

comment:4 Changed 12 years ago by Becky Gibson

Resolution: fixed
Status: assignedclosed

(In [8644]) fixes #3037 updated so autocompleter and datetextbox are properly associated with labels for accessibility

comment:5 Changed 12 years ago by Becky Gibson

Resolution: fixed
Status: closedreopened

need to implement this change: <input id=foo dojotype=autocompleter> will generate <span id=widget_foo> <input id=foo> </span> ? and remove the label reassigning code

Changed 12 years ago by Becky Gibson

Attachment: 3037.patch added

assign id='widget_${id} to the domNode

comment:6 Changed 12 years ago by Becky Gibson

removed setupLabels() from _DropDownTextBox.js; removed calls to setupLabels() from autocompleter.js and DateTextbox?.js. Updated autocompleter.html template to assign 'widget_${id} to the domNode id and added id to the input field. Modified test_autocompleter.html to include missing id on one of the input fields.

Now the original id remains on the input element so the label association is correct. The domNode element for the autocompleter and databox widgets (or any that use autocompleter.html template) is widget_ added to the original id. This allows developers to find the outer node of the widget and interact with it without breaking the original label releationship to the input element.

comment:7 Changed 12 years ago by Becky Gibson

Resolution: fixed
Status: reopenedclosed

(In [8733]) fix label association problem with autocompleter, select and datatextbox. Fixes #3037

Note: See TracTickets for help on using tickets.