diff --git a/common/changes/SearchBox-allow-aria-label_2017-05-04-06-49.json b/common/changes/SearchBox-allow-aria-label_2017-05-04-06-49.json new file mode 100644 index 0000000000000..020a187015da8 --- /dev/null +++ b/common/changes/SearchBox-allow-aria-label_2017-05-04-06-49.json @@ -0,0 +1,15 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "SearchBox: added the ariaLabel optional property", + "type": "minor" + }, + { + "comment": "", + "packageName": "@uifabric/utilities", + "type": "none" + } + ], + "email": "jakob101@gmail.com" +} \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.Props.ts b/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.Props.ts index 32e5627743583..bfb189ecdd9c4 100644 --- a/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.Props.ts +++ b/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.Props.ts @@ -43,4 +43,10 @@ export interface ISearchBoxProps extends React.Props { * CSS class to apply to the SearchBox. */ className?: string; + + /** + * The aria label of the SearchBox for the benefit of screen readers. + * @defaultvalue labelText + */ + ariaLabel?: string; } diff --git a/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.tsx b/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.tsx index 4cfd691d11590..2f43af1f0be95 100644 --- a/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.tsx +++ b/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.tsx @@ -73,6 +73,7 @@ export class SearchBox extends BaseComponent { onInput={ this._onInputChange } onKeyDown={ this._onKeyDown } value={ value } + aria-label={ this.props.ariaLabel ? this.props.ariaLabel : this.props.labelText } ref={ this._resolveRef('_inputElement') } />