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, });