diff --git a/docs/source/documentation.html.md.erb b/docs/source/documentation.html.md.erb
index 248870b93..e275c36bf 100644
--- a/docs/source/documentation.html.md.erb
+++ b/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.
+
+
+
+
+ accessibility
+
+Type: **Object**
+ |
+
+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.
|
diff --git a/src/places.js b/src/places.js
index 822cbb5e2..f1a1aebe1 100644
--- a/src/places.js
+++ b/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;
diff --git a/test/npm-lib/index.html b/test/npm-lib/index.html
index 0279019c2..88acb9a8e 100644
--- a/test/npm-lib/index.html
+++ b/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,
});