The Toolbar search element added through this module is not accessible, and generates an error through automated scanning.

The issue (identified with the pa11y-ci scanner):

• This form field should be labelled in some way. Use the label element (either with a "for" attribute or wrapped around the form field), or "title",
   "aria-label" or "aria-labelledby" attributes as appropriate.

   (#admin-toolbar-search-input)

   <input id="admin-toolbar-search-input" type="text" size="60" maxlength="128" class="form-text ui-autocomplete-input" autocomplete="off">

The attached patch addresses the issue by adding an aria-label attribute, which works for our use case; however, this will not work for mulit-lingual sites. A better implementation would be the use of a 'Label" element associated with the input field through the use of a "for" attribute, which can then have the label run through Drupal's i18n translator.

CommentFileSizeAuthor
#4 admin-toolbar-search-aria-label-3062148-4.patch408 bytesoknate
#2 accessibility-admin-toolbar-search-element-is-not-accessible-3062148-1-D8.patch375 byteslhridley
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

lhridley created an issue. See original summary.

lhridley’s picture

lhridley CreditAttribution: lhridley at Promet Source commented
FileSize
accessibility-admin-toolbar-search-element-is-not-accessible-3062148-1-D8.patch375 bytes
lhridley’s picture

lhridley CreditAttribution: lhridley at Promet Source commented
Priority: Normal » Major
Status: Active » Needs review
oknate’s picture

oknate
Location Greater New York City Area
CreditAttribution: oknate as a volunteer and commented
FileSize
admin-toolbar-search-aria-label-3062148-4.patch408 bytes

What about using aria-labelledby?

adriancid’s picture

adriancid
Primary language Spanish
Location Montreal, Canada
CreditAttribution: adriancid at Drupiter commented
Title: Accessibility: Admin Toolbar Search element is not accessible » Search element is not accessible
adriancid’s picture

adriancid
Primary language Spanish
Location Montreal, Canada
CreditAttribution: adriancid at Drupiter commented

@lhridley I think the @oknate solution is better can you check if this will work on your case?

lhridley’s picture

lhridley CreditAttribution: lhridley at Promet Source commented
Status: Needs review » Reviewed & tested by the community

@adriancid I can confirm that @oknate 's solution in #4 works as well. It's a better solution than the one I submitted. We have applied this patch to our project.

Thank you, @adriancid and @oknate!

  • adriancid committed f3e9aa7 on 8.x-1.x authored by oknate 
    Issue #3062148 by lhridley, oknate, adriancid: Search element is not...
adriancid’s picture

adriancid
Primary language Spanish
Location Montreal, Canada
CreditAttribution: adriancid at Drupiter commented
Status: Reviewed & tested by the community » Fixed

thanks ;-)

  • adriancid committed 0458f7c on 8.x-2.x 
    Issue #3062148 by lhridley, oknate, adriancid: Search element is not...
oknate’s picture

oknate
Location Greater New York City Area
CreditAttribution: oknate as a volunteer and commented

Great, thanks for testing, @lhridley and thanks for committing, @adriancid!

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.