feat(accessibility): allow modification of attributes on pin and clea…

…r buttons (#920)

docs/source/documentation.html.md.erb

@@ -205,6 +205,31 @@ Control whether the default styles should be used.
 
 **Default**: Styles are enabled.
 
+**Important**: This parameter can only be set at instantiation.
+</td>
+    </tr>
+    <tr>
+<td markdown="1">
+<div class="api-entry" id="api-options-appId"><code>accessibility</code></div>
+
+Type: **Object**
+</td>
+<td markdown="1">
+an object containing a `pinButton` and/or `clearButton` object which is composed of html attributes to apply to the corresponding button
+
+**Example**:
+```
+accessibility: {
+  pinButton: {
+    'aria-label': 'use browser geolocation',
+    'tab-index': 12,
+  },
+  clearButton: {
+    'tab-index': 13,
+  }
+}
+```
+
 **Important**: This parameter can only be set at instantiation.
 </td>
     </tr>

src/places.js

@@ -17,10 +17,19 @@ insertCss(css, { prepend: true });
 import errors from './errors';
 import createReverseGeocodingSource from './createReverseGeocodingSource';
 
+const applyAttributes = (elt, attrs) => {
+  Object.entries(attrs).forEach(([name, value]) => {
+    elt.setAttribute(name, `${value}`);
+  });
+
+  return elt;
+};
+
 export default function places(options) {
   const {
     container,
     style,
+    accessibility,
     autocompleteOptions: userAutocompleteOptions = {},
   } = options;
 
@@ -119,6 +128,13 @@ export default function places(options) {
   const clear = document.createElement('button');
   clear.setAttribute('type', 'button');
   clear.setAttribute('aria-label', 'clear');
+  if (
+    accessibility &&
+    accessibility.clearButton &&
+    accessibility.clearButton instanceof Object
+  ) {
+    applyAttributes(clear, accessibility.clearButton);
+  }
   clear.classList.add(`${prefix}-input-icon`);
   clear.classList.add(`${prefix}-icon-clear`);
   clear.innerHTML = clearIcon;
@@ -128,6 +144,13 @@ export default function places(options) {
   const pin = document.createElement('button');
   pin.setAttribute('type', 'button');
   pin.setAttribute('aria-label', 'focus');
+  if (
+    accessibility &&
+    accessibility.pinButton &&
+    accessibility.pinButton instanceof Object
+  ) {
+    applyAttributes(pin, accessibility.pinButton);
+  }
   pin.classList.add(`${prefix}-input-icon`);
   pin.classList.add(`${prefix}-icon-pin`);
   pin.innerHTML = pinIcon;

test/npm-lib/index.html

@@ -11,6 +11,19 @@
         appId: 'plFMJJT5O9PC',
         apiKey: 'a0f8e2d480b9d119f485836d77db4e53',
         container: document.querySelector('#search-box'),
+        autocompleteOptions: {
+          ariaLabel: 'address search'
+        },
+        accessibility: {
+          pinButton: {
+            'aria-label': 'use browser geolocation',
+            'tab-index': 2
+          },
+          clearButton: {
+            'arial-label': 'clear search',
+            'tab-index': 2
+          }
+        },
         debug: true,
       });
     </script>