Fixed accessibility of search text field (#130)

* Fixed accessibility of search text field

* Patch version bump

* Made ariaLabel overridable

Author: dijs

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-storefront",
-  "version": "8.16.0",
+  "version": "8.16.1",
   "description": "Build and deploy e-commerce progressive web apps (PWAs) in record time.",
   "module": "./index.js",
   "license": "Apache-2.0",

src/search/SearchField.js

@@ -90,6 +90,7 @@ const useStyles = makeStyles(styles, { name: 'RSFSearchField' })
 const SearchField = forwardRef(
   (
     {
+      ariaLabel,
       classes,
       onChange,
       submitButtonVariant,
@@ -126,6 +127,7 @@ const SearchField = forwardRef(
         <div className={classes.inputWrap}>
           <input
             {...others}
+            aria-label={ariaLabel}
             type="text"
             value={value}
             onChange={e => onChange(e.target.value)}
@@ -178,6 +180,10 @@ const SearchField = forwardRef(
 )
 
 SearchField.propTypes = {
+  /**
+   * Label for accessibility, defaults to search-text
+   */
+  ariaLabel: PropTypes.string,
   /**
    * Override or extend the styles applied to the component. See [CSS API](#css) below for more details.
    */
@@ -229,6 +235,7 @@ SearchField.defaultProps = {
   submitButtonVariant: 'fab',
   showClearButton: true,
   placeholder: 'Search...',
+  ariaLabel: 'search-text',
   name: 'q',
   value: '',
 }