Opened 7 years ago

Closed 7 years ago

Last modified 5 years ago

#15298 closed defect (fixed)

FilteringSelect: Accessibility Issue

Reported by: KGith Owned by: Douglas Hays
Priority: undecided Milestone: 1.8
Component: Accessibility Version: 1.6.1
Keywords: Cc: mikeb
Blocked By: Blocking:


I have been working on making a website accessible. I have been using the JAWS software, which is a screen reader (

When I go into Form Mode (insert + f5 while using JAWS). All widgets I am using except the FilteringSelect? work just fine. However, the FilteringSelect? appears as "unlabelled<x> Edit Combo" where x is a counter. I have tried adding several attributes (i.e. aria-label, aria-labelledby, name, title) and using a <label> for the <select>.

Attachments (4)

FormsMode.png (28.1 KB) - added by KGith 7 years ago.
FilteringWidget_Inspection.png (29.4 KB) - added by KGith 7 years ago.
filteringSelectClientSel.jpg (84.1 KB) - added by echacons@… 5 years ago.
FilteringSelect? widget inspection (clientSel example)
filteringSelectClientSel2.jpg (121.6 KB) - added by echacons@… 5 years ago.
FilteringSelect? (clientSel) form view

Download all attachments as: .zip

Change History (10)

Changed 7 years ago by KGith

Attachment: FormsMode.png added

Changed 7 years ago by KGith

comment:1 Changed 7 years ago by KGith

I attached two files to give more context. FormsMode? is what is displayed in JAWs Form Mode, and FilteringWidget_Inspection is what the FilterSelect? looks like in Firefox using Firebug's inspection feature.

comment:2 Changed 7 years ago by bill

Cc: mikeb added
Component: DojoX WidgetsDijit - Form
Owner: changed from dante to Douglas Hays
Summary: Dojo.Form.FilteringSelect Accessibility IssueFilteringSelect: Accessibility Issue

Mike, do you reproduce this?

(Presumably the reporter is talking about dijit.form.FilteringSelect since there is no dojo or dojox FilteringSelect.)

Kgith - it's always best to attach a test case. Since you didn't, we'll just test on our standard test page and if FilteringSelect works there then we'll close this ticket.

comment:3 Changed 7 years ago by mikeb

I was able to reproduce the "unlabelled" message, but only on 1.6 and 1.7. It happens when there is not a <label> associated with the FilteringSelect? - I fixed it by adding the <label> tag. It can be applied to <input> or <select> elements too. Kgith, maybe you forgot to add the "for" attribute or are giving it a non-unique id? You can see in the source of the test page how <label> is used:

What is odd is that this problem does not occur in the nightly builds, even though the test page is the same. When an associated <label> can't be found, it seems Jaws uses the leading text as the "label" (it doesn't create a dom node or anything.) You can see an example of the same unlabeled FilteringSelect? being parsed two different ways on the test page:
1.7 - "unlabelled<X> edit combo"
nightly - "Created programmatically with an initial query. (Limits list to items with type = country.) edit"

I think this is new expected behavior...? FilteringSelect? works as before, even "better", since we are now more forgiving. Even if developers forget the <label> and Jaws uses the last paragraph instead, hearing the paragraph read out every time is still probably more accessible than hearing "unlabeled edit combo."

comment:4 Changed 7 years ago by Douglas Hays

Component: Dijit - FormAccessibility
Milestone: tbd1.8
Resolution: fixed
Status: newclosed

Probably fixed by [28238].

Changed 5 years ago by echacons@…

FilteringSelect? widget inspection (clientSel example)

comment:5 Changed 5 years ago by echacons@…


I'm doing some accessibility changes in a portal that I'm working with and I'm facing this issue. I'm not sure but I think this issue is not fixed, I'm using the 1.9 release. I added the "for" attribute to link the label with the FilteringSelect? component:

dojo.create("label", {"for": "clientSel" , innerHTML: "*<front:frontendTag key="clientName" />: "}, td84);

var clientOptionsStoreData = {

identifier: 'value', label: 'desc', items : clientList,


clientNameOption = new dijit.form.FilteringSelect?({

id: "clientSel",

store: clientOptionsifr, searchAttr: 'desc', name: 'clients1', required: 'true', style: 'width: 430px;', value: data[0].chsportal.request_main.clientId@value, onChange: function() { . . .

The "for" attribute is linking the label to the "textbox" component inside the FilteringSelect? component and not the Filitering component.. So when I inspect the fields component in the form by using JAWS (ins + F5 key combination) I'm getting the unlabeled1 edit combo..

Please see the images I attached regarding this example.

Changed 5 years ago by echacons@…

FilteringSelect? (clientSel) form view

comment:6 Changed 5 years ago by bill

*<front:frontendTag key="clientName" />: " is not valid HTML. I also don't know what you mean by "the Filitering component". If you can attach a simple test case that fails we could investigate.

Note: See TracTickets for help on using tickets.