feat(autocomplete): add aria-label to buttons

Add aria-label attributes to be compliance with
the accessibility standard and make the autocomplete
form render correctly on screen readers.

#470

src/places.js

@@ -110,6 +110,7 @@ export default function places(options) {
 
   const clear = document.createElement('button');
   clear.setAttribute('type', 'button');
+  clear.setAttribute('aria-label', 'clear');
   clear.classList.add(`${prefix}-input-icon`);
   clear.classList.add(`${prefix}-icon-clear`);
   clear.innerHTML = clearIcon;
@@ -118,6 +119,7 @@ export default function places(options) {
 
   const pin = document.createElement('button');
   pin.setAttribute('type', 'button');
+  pin.setAttribute('aria-label', 'focus');
   pin.classList.add(`${prefix}-input-icon`);
   pin.classList.add(`${prefix}-icon-pin`);
   pin.innerHTML = pinIcon;

src/places.test.js

@@ -246,6 +246,7 @@ describe('places', () => {
       );
       const pinButton = document.querySelector('.ap-icon-pin');
       expect(clearButton.innerHTML).toEqual('clear');
+      expect(clearButton.getAttribute('aria-label')).toEqual('clear');
 
       placesInstance.once('clear', () => {
         expect(autocomplete.__instance.autocomplete.setVal).toBeCalledWith('');
@@ -263,6 +264,7 @@ describe('places', () => {
         'button.ap-input-icon.ap-icon-pin'
       );
       expect(pinButton.style.display).toEqual('');
+      expect(pinButton.getAttribute('aria-label')).toEqual('focus');
     });
 
     describe('input listener', () => {