Skip to content

SearchBox: Allow setting aria-label #1670

Description

@Hardhik

Bug Report

  • Package version(s): Latest
  • Browser and OS versions: Chrome win10

Are you willing to submit a PR to fix? No

Requested priority: High

Products/sites affected: Office ui fabric react components - SearchBox Component and all websites using this component.
Can be seen here: http://dev.office.com/fabric#/components/searchbox

Describe the issue:

Go to SearchBox Component
Use this tool: Google Accessibility - Accessibility Developer tools
and run an audit from the Audits tab in the Developer tools in chrome.

Actual behavior:

There's a severe level error being thrown saying "Controls and media elements should have labels" for all references of SearchBox components in the page.
image
The link AX TEXT 01

Expected behavior:

All control and media elements should have labels.
I have tried the labeltext option for SearchBox component, but it only adds the placeholder text and not a label to the component whereas it's needed to use label/aria-label instead. (Ref: Audit rules - AX -TEXT 01 as can be seen that it's recommended to not use only placeholder)

If applicable, please provide a codepen repro:

Can be seen here: SearchBox component

Metadata

Metadata

Assignees

Type

No type

Fields

No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions