@ons/design-system 65.1.0 → 65.2.1

package/components/autosuggest/autosuggest.spec.js

@@ -25,6 +25,31 @@ const EXAMPLE_AUTOSUGGEST = {
   typeMore: 'Continue entering to get suggestions',
   autosuggestData: '/test/fake/api/countries',
 };
+const EXAMPLE_AUTOSUGGEST_WITH_LANGUAGE = {
+  id: 'country-of-birth',
+  label: {
+    text: 'Current name of country',
+    description: 'Enter your own answer or select from suggestions',
+    id: 'country-of-birth-label',
+    classes: 'extra-label-class',
+  },
+  autocomplete: 'off',
+  instructions: 'Use up and down keys to navigate.',
+  ariaYouHaveSelected: 'You have selected',
+  ariaMinChars: 'Enter 3 or more characters for suggestions.',
+  minChars: 3,
+  ariaResultsLabel: 'Country suggestions',
+  ariaOneResult: 'There is one suggestion available.',
+  ariaNResults: 'There are {n} suggestions available.',
+  ariaLimitedResults: 'Type more characters to improve your search',
+  moreResults: 'Continue entering to improve suggestions',
+  resultsTitle: 'Suggestions',
+  resultsTitleId: 'country-of-birth-suggestions',
+  noResults: 'No suggestions found.',
+  typeMore: 'Continue entering to get suggestions',
+  autosuggestData: '/test/fake/api/countries',
+  language: 'en-gb',
+};
 
 describe('script: autosuggest', () => {
   const apiFaker = new PuppeteerEndpointFaker('/test/fake/api');
@@ -72,11 +97,11 @@ describe('script: autosuggest', () => {
     it('the instructions, listbox, and status should become visible', async () => {
       await setTestPage('/test', renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST));
 
-      const instructionsDisplayStyle = await page.$eval('.ons-js-autosuggest-instructions', node => getComputedStyle(node).display);
+      const instructionsDisplayStyle = await page.$eval('.ons-js-autosuggest-instructions', (node) => getComputedStyle(node).display);
       expect(instructionsDisplayStyle).toBe('block');
-      const listboxDisplayStyle = await page.$eval('.ons-js-autosuggest-listbox', node => getComputedStyle(node).display);
+      const listboxDisplayStyle = await page.$eval('.ons-js-autosuggest-listbox', (node) => getComputedStyle(node).display);
       expect(listboxDisplayStyle).toBe('block');
-      const statusDisplayStyle = await page.$eval('.ons-js-autosuggest-aria-status', node => getComputedStyle(node).display);
+      const statusDisplayStyle = await page.$eval('.ons-js-autosuggest-aria-status', (node) => getComputedStyle(node).display);
       expect(statusDisplayStyle).toBe('block');
     });
   });
@@ -88,7 +113,7 @@ describe('script: autosuggest', () => {
       await page.type('.ons-js-autosuggest-input', 'Unite', { delay: 20 });
       await page.keyboard.press('ArrowDown');
 
-      const selectedOption = await page.$eval('.ons-autosuggest__option--focused', node => node.textContent);
+      const selectedOption = await page.$eval('.ons-autosuggest__option--focused', (node) => node.textContent);
       expect(selectedOption.trim()).toBe('United States of America');
     });
 
@@ -99,7 +124,7 @@ describe('script: autosuggest', () => {
       await page.keyboard.press('ArrowDown');
       await page.keyboard.press('ArrowDown');
 
-      const selectedOption = await page.$eval('.ons-autosuggest__option--focused', node => node.textContent);
+      const selectedOption = await page.$eval('.ons-autosuggest__option--focused', (node) => node.textContent);
       expect(selectedOption.trim()).toBe('United States Virgin Islands');
     });
 
@@ -110,11 +135,11 @@ describe('script: autosuggest', () => {
       await page.keyboard.press('ArrowDown');
       await page.keyboard.press('ArrowDown');
 
-      const ariaSelectedValue = await page.$eval('.ons-autosuggest__option--focused', node => node.getAttribute('aria-selected'));
+      const ariaSelectedValue = await page.$eval('.ons-autosuggest__option--focused', (node) => node.getAttribute('aria-selected'));
       expect(ariaSelectedValue).toBe('true');
 
-      const selectedOptionId = await page.$eval('.ons-autosuggest__option--focused', node => node.getAttribute('id'));
-      const ariaActiveDescendant = await page.$eval('.ons-js-autosuggest-input', node => node.getAttribute('aria-activedescendant'));
+      const selectedOptionId = await page.$eval('.ons-autosuggest__option--focused', (node) => node.getAttribute('id'));
+      const ariaActiveDescendant = await page.$eval('.ons-js-autosuggest-input', (node) => node.getAttribute('aria-activedescendant'));
       expect(ariaActiveDescendant).toBe(selectedOptionId);
     });
 
@@ -124,7 +149,7 @@ describe('script: autosuggest', () => {
       await page.type('.ons-js-autosuggest-input', 'Eng', { delay: 20 });
       await page.keyboard.press('ArrowDown');
 
-      const statusMessage = await page.$eval('.ons-js-autosuggest-aria-status', node => node.textContent);
+      const statusMessage = await page.$eval('.ons-js-autosuggest-aria-status', (node) => node.textContent);
       expect(statusMessage.trim()).toBe('England');
     });
 
@@ -135,7 +160,7 @@ describe('script: autosuggest', () => {
       await page.keyboard.press('ArrowDown');
       await page.keyboard.press('ArrowDown');
 
-      const selectedSuggestionCount = await page.$$eval('.ons-autosuggest__option[aria-selected=true]', nodes => nodes.length);
+      const selectedSuggestionCount = await page.$$eval('.ons-autosuggest__option[aria-selected=true]', (nodes) => nodes.length);
       expect(selectedSuggestionCount).toBe(1);
     });
 
@@ -147,7 +172,7 @@ describe('script: autosuggest', () => {
       await page.keyboard.press('ArrowDown');
       await page.keyboard.press('ArrowDown');
 
-      const selectedOption = await page.$eval('.ons-autosuggest__option--focused', node => node.textContent);
+      const selectedOption = await page.$eval('.ons-autosuggest__option--focused', (node) => node.textContent);
       expect(selectedOption.trim()).toBe('United States Virgin Islands');
     });
 
@@ -162,7 +187,7 @@ describe('script: autosuggest', () => {
       await page.keyboard.press('ArrowDown');
       await page.keyboard.press('U');
 
-      const inputValue = await page.$eval('.ons-js-autosuggest-input', node => node.value);
+      const inputValue = await page.$eval('.ons-js-autosuggest-input', (node) => node.value);
       expect(inputValue).toBe('United');
     });
   });
@@ -174,7 +199,7 @@ describe('script: autosuggest', () => {
       await page.type('.ons-js-autosuggest-input', 'Unite', { delay: 20 });
       await page.keyboard.press('ArrowUp');
 
-      const selectedOption = await page.$eval('.ons-autosuggest__option--focused', node => node.textContent);
+      const selectedOption = await page.$eval('.ons-autosuggest__option--focused', (node) => node.textContent);
       expect(selectedOption.trim()).toBe('United States of America');
     });
 
@@ -186,7 +211,7 @@ describe('script: autosuggest', () => {
       await page.keyboard.press('ArrowDown');
       await page.keyboard.press('ArrowUp');
 
-      const selectedOption = await page.$eval('.ons-autosuggest__option--focused', node => node.textContent);
+      const selectedOption = await page.$eval('.ons-autosuggest__option--focused', (node) => node.textContent);
       expect(selectedOption.trim()).toBe('United States of America');
     });
 
@@ -198,11 +223,11 @@ describe('script: autosuggest', () => {
       await page.keyboard.press('ArrowDown');
       await page.keyboard.press('ArrowUp');
 
-      const ariaSelectedValue = await page.$eval('.ons-autosuggest__option--focused', node => node.getAttribute('aria-selected'));
+      const ariaSelectedValue = await page.$eval('.ons-autosuggest__option--focused', (node) => node.getAttribute('aria-selected'));
       expect(ariaSelectedValue).toBe('true');
 
-      const selectedOptionId = await page.$eval('.ons-autosuggest__option--focused', node => node.getAttribute('id'));
-      const ariaActiveDescendant = await page.$eval('.ons-js-autosuggest-input', node => node.getAttribute('aria-activedescendant'));
+      const selectedOptionId = await page.$eval('.ons-autosuggest__option--focused', (node) => node.getAttribute('id'));
+      const ariaActiveDescendant = await page.$eval('.ons-js-autosuggest-input', (node) => node.getAttribute('aria-activedescendant'));
       expect(ariaActiveDescendant).toBe(selectedOptionId);
     });
 
@@ -214,7 +239,7 @@ describe('script: autosuggest', () => {
       await page.keyboard.press('ArrowDown');
       await page.keyboard.press('ArrowUp');
 
-      const selectedSuggestionCount = await page.$$eval('.ons-autosuggest__option[aria-selected=true]', nodes => nodes.length);
+      const selectedSuggestionCount = await page.$$eval('.ons-autosuggest__option[aria-selected=true]', (nodes) => nodes.length);
       expect(selectedSuggestionCount).toBe(1);
     });
 
@@ -225,7 +250,7 @@ describe('script: autosuggest', () => {
       await page.keyboard.press('ArrowUp');
       await page.keyboard.press('ArrowUp');
 
-      const selectedOption = await page.$eval('.ons-autosuggest__option--focused', node => node.textContent);
+      const selectedOption = await page.$eval('.ons-autosuggest__option--focused', (node) => node.textContent);
       expect(selectedOption.trim()).toBe('United States of America');
     });
 
@@ -238,7 +263,7 @@ describe('script: autosuggest', () => {
       await page.keyboard.press('ArrowUp');
       await page.keyboard.press('d');
 
-      const inputValue = await page.$eval('.ons-js-autosuggest-input', node => node.value);
+      const inputValue = await page.$eval('.ons-js-autosuggest-input', (node) => node.value);
       expect(inputValue).toBe('United');
     });
   });
@@ -252,7 +277,7 @@ describe('script: autosuggest', () => {
       await page.keyboard.press('ArrowDown');
       await page.keyboard.press('Enter');
 
-      const inputValue = await page.$eval('.ons-js-autosuggest-input', node => node.value);
+      const inputValue = await page.$eval('.ons-js-autosuggest-input', (node) => node.value);
       expect(inputValue).toBe('United States Virgin Islands');
     });
   });
@@ -264,15 +289,15 @@ describe('script: autosuggest', () => {
       await page.type('.ons-js-autosuggest-input', 'Unite', { delay: 20 });
       await page.keyboard.press('Tab');
 
-      const suggestionCountSample1 = await page.$$eval('.ons-autosuggest__option', nodes => nodes.length);
+      const suggestionCountSample1 = await page.$$eval('.ons-autosuggest__option', (nodes) => nodes.length);
       expect(suggestionCountSample1).toBe(2);
 
       await page.waitForTimeout(200);
-      const suggestionCountSample2 = await page.$$eval('.ons-autosuggest__option', nodes => nodes.length);
+      const suggestionCountSample2 = await page.$$eval('.ons-autosuggest__option', (nodes) => nodes.length);
       expect(suggestionCountSample2).toBe(2);
 
       await page.waitForTimeout(320);
-      const suggestionCountSample3 = await page.$$eval('.ons-autosuggest__option', nodes => nodes.length);
+      const suggestionCountSample3 = await page.$$eval('.ons-autosuggest__option', (nodes) => nodes.length);
       expect(suggestionCountSample3).toBe(0);
     });
 
@@ -283,7 +308,7 @@ describe('script: autosuggest', () => {
       await page.keyboard.press('Tab');
       await page.waitForTimeout(320);
 
-      const listboxInnerHTML = await page.$eval('.ons-js-autosuggest-listbox', node => node.innerHTML);
+      const listboxInnerHTML = await page.$eval('.ons-js-autosuggest-listbox', (node) => node.innerHTML);
       expect(listboxInnerHTML).toBe('');
     });
 
@@ -294,7 +319,7 @@ describe('script: autosuggest', () => {
       await page.keyboard.press('Tab');
       await page.waitForTimeout(320);
 
-      const hasClass = await page.$eval('.ons-autosuggest', node => node.classList.contains('ons-autosuggest--has-results'));
+      const hasClass = await page.$eval('.ons-autosuggest', (node) => node.classList.contains('ons-autosuggest--has-results'));
       expect(hasClass).toBe(false);
     });
 
@@ -318,7 +343,7 @@ describe('script: autosuggest', () => {
       await page.type('.ons-js-autosuggest-input', 'Unite', { delay: 20 });
       await page.click('.ons-autosuggest__option:nth-child(2)');
 
-      const inputValue = await page.$eval('.ons-js-autosuggest-input', node => node.value);
+      const inputValue = await page.$eval('.ons-js-autosuggest-input', (node) => node.value);
       expect(inputValue).toBe('United States Virgin Islands');
     });
   });
@@ -329,7 +354,7 @@ describe('script: autosuggest', () => {
 
       await page.type('.ons-js-autosuggest-input', 'En', { delay: 20 });
 
-      const suggestionCount = await page.$$eval('.ons-autosuggest__option', nodes => nodes.length);
+      const suggestionCount = await page.$$eval('.ons-autosuggest__option', (nodes) => nodes.length);
       expect(suggestionCount).toBe(0);
     });
 
@@ -338,9 +363,18 @@ describe('script: autosuggest', () => {
 
       await page.type('.ons-js-autosuggest-input', 'Eng', { delay: 20 });
 
-      const suggestionCount = await page.$$eval('.ons-autosuggest__option', nodes => nodes.length);
+      const suggestionCount = await page.$$eval('.ons-autosuggest__option', (nodes) => nodes.length);
       expect(suggestionCount).toBe(1);
     });
+
+    it('gets the language if set', async () => {
+      await setTestPage('/test', renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST_WITH_LANGUAGE));
+
+      await page.type('.ons-js-autosuggest-input', 'Eng', { delay: 20 });
+
+      const attributes = await getNodeAttributes(page, '.ons-js-autosuggest');
+      expect(attributes['data-lang']).toBe('en-gb');
+    });
   });
 
   describe('when the mouse moves over a result and a suggestion is focused', () => {
@@ -351,7 +385,7 @@ describe('script: autosuggest', () => {
       await page.keyboard.press('ArrowDown');
       await page.hover('.ons-autosuggest__option:nth-child(2)');
 
-      const focusedClassCount = await page.$$eval('.ons-autosuggest__option--focused', nodes => nodes.length);
+      const focusedClassCount = await page.$$eval('.ons-autosuggest__option--focused', (nodes) => nodes.length);
       expect(focusedClassCount).toBe(0);
     });
   });
@@ -371,7 +405,7 @@ describe('script: autosuggest', () => {
       await page.hover('.ons-autosuggest__option:nth-child(2)');
       await page.hover('#dummy');
 
-      const focusedClassCount = await page.$$eval('.ons-autosuggest__option--focused', nodes => nodes.length);
+      const focusedClassCount = await page.$$eval('.ons-autosuggest__option--focused', (nodes) => nodes.length);
       expect(focusedClassCount).toBe(1);
     });
   });
@@ -384,7 +418,7 @@ describe('script: autosuggest', () => {
       await page.keyboard.press('ArrowDown');
       await page.type('.ons-js-autosuggest-input', 'd', { delay: 20 });
 
-      const focusedNodeCount = await page.$$eval('.ons-autosuggest__option--focused', nodes => nodes.length);
+      const focusedNodeCount = await page.$$eval('.ons-autosuggest__option--focused', (nodes) => nodes.length);
       expect(focusedNodeCount).toBe(0);
     });
 
@@ -393,7 +427,7 @@ describe('script: autosuggest', () => {
 
       await page.type('.ons-js-autosuggest-input', 'Unite', { delay: 20 });
 
-      const ariaExpandedValue = await page.$eval('.ons-js-autosuggest-input', node => node.getAttribute('aria-expanded'));
+      const ariaExpandedValue = await page.$eval('.ons-js-autosuggest-input', (node) => node.getAttribute('aria-expanded'));
       expect(ariaExpandedValue).toBe('true');
     });
 
@@ -402,7 +436,7 @@ describe('script: autosuggest', () => {
 
       await page.type('.ons-js-autosuggest-input', 'Unite', { delay: 20 });
 
-      const emboldened = await page.$$eval('.ons-autosuggest__option strong', nodes => nodes.map(node => node.textContent));
+      const emboldened = await page.$$eval('.ons-autosuggest__option strong', (nodes) => nodes.map((node) => node.textContent));
       expect(emboldened).toEqual(['Unite', 'Unite']);
     });
 
@@ -411,9 +445,9 @@ describe('script: autosuggest', () => {
 
       await page.type('.ons-js-autosuggest-input', 'tland', { delay: 20 });
 
-      const matchCount = await page.$$eval('.ons-autosuggest__option', nodes => nodes.length);
+      const matchCount = await page.$$eval('.ons-autosuggest__option', (nodes) => nodes.length);
       expect(matchCount).toBe(2);
-      const emboldened = await page.$$eval('.ons-autosuggest__option strong', nodes => nodes.map(node => node.textContent));
+      const emboldened = await page.$$eval('.ons-autosuggest__option strong', (nodes) => nodes.map((node) => node.textContent));
       expect(emboldened).toEqual(['tland']);
     });
 
@@ -422,7 +456,7 @@ describe('script: autosuggest', () => {
 
       await page.type('.ons-js-autosuggest-input', 'st', { delay: 20 });
 
-      const statusMessage = await page.$eval('.ons-js-autosuggest-aria-status', node => node.textContent);
+      const statusMessage = await page.$eval('.ons-js-autosuggest-aria-status', (node) => node.textContent);
       expect(statusMessage.trim()).toBe('Enter 3 or more characters for suggestions.');
     });
 
@@ -431,7 +465,7 @@ describe('script: autosuggest', () => {
 
       await page.type('.ons-js-autosuggest-input', 'Engla', { delay: 20 });
 
-      const statusMessage = await page.$eval('.ons-js-autosuggest-aria-status', node => node.textContent);
+      const statusMessage = await page.$eval('.ons-js-autosuggest-aria-status', (node) => node.textContent);
       expect(statusMessage.trim()).toBe('There is one suggestion available.');
     });
 
@@ -440,7 +474,7 @@ describe('script: autosuggest', () => {
 
       await page.type('.ons-js-autosuggest-input', 'sta', { delay: 20 });
 
-      const statusMessage = await page.$eval('.ons-js-autosuggest-aria-status', node => node.textContent);
+      const statusMessage = await page.$eval('.ons-js-autosuggest-aria-status', (node) => node.textContent);
       expect(statusMessage.trim()).toBe('There are 2 suggestions available.');
     });
   });
@@ -452,7 +486,7 @@ describe('script: autosuggest', () => {
 
         await page.type('.ons-js-autosuggest-input', 'abc', { delay: 20 });
 
-        const noResultsContent = await page.$eval('.ons-autosuggest__option--no-results', node => node.textContent);
+        const noResultsContent = await page.$eval('.ons-autosuggest__option--no-results', (node) => node.textContent);
         expect(noResultsContent).toBe('No suggestions found.');
       });
 
@@ -461,7 +495,7 @@ describe('script: autosuggest', () => {
 
         await page.type('.ons-js-autosuggest-input', 'abc', { delay: 20 });
 
-        const ariaExpandedValue = await page.$eval('.ons-js-autosuggest-input', node => node.getAttribute('aria-expanded'));
+        const ariaExpandedValue = await page.$eval('.ons-js-autosuggest-input', (node) => node.getAttribute('aria-expanded'));
         expect(ariaExpandedValue).toBe('true');
       });
 
@@ -470,7 +504,7 @@ describe('script: autosuggest', () => {
 
         await page.type('.ons-js-autosuggest-input', 'ab', { delay: 20 });
 
-        const statusMessage = await page.$eval('.ons-js-autosuggest-aria-status', node => node.textContent);
+        const statusMessage = await page.$eval('.ons-js-autosuggest-aria-status', (node) => node.textContent);
         expect(statusMessage.trim()).toBe('Enter 3 or more characters for suggestions.');
       });
 
@@ -479,7 +513,7 @@ describe('script: autosuggest', () => {
 
         await page.type('.ons-js-autosuggest-input', 'abc', { delay: 20 });
 
-        const statusMessage = await page.$eval('.ons-js-autosuggest-aria-status', node => node.textContent);
+        const statusMessage = await page.$eval('.ons-js-autosuggest-aria-status', (node) => node.textContent);
         expect(statusMessage.trim()).toBe('No suggestions found.: "abc"');
       });
     });
@@ -496,7 +530,7 @@ describe('script: autosuggest', () => {
 
         await page.type('.ons-js-autosuggest-input', 'abc', { delay: 20 });
 
-        const matchCount = await page.$$eval('.ons-autosuggest__option', nodes => nodes.length);
+        const matchCount = await page.$$eval('.ons-autosuggest__option', (nodes) => nodes.length);
         expect(matchCount).toBe(0);
       });
 
@@ -511,7 +545,7 @@ describe('script: autosuggest', () => {
 
         await page.type('.ons-js-autosuggest-input', 'abc', { delay: 20 });
 
-        const ariaExpandedValue = await page.$eval('.ons-js-autosuggest-input', node => node.getAttribute('aria-expanded'));
+        const ariaExpandedValue = await page.$eval('.ons-js-autosuggest-input', (node) => node.getAttribute('aria-expanded'));
         expect(ariaExpandedValue).toBe('false');
       });
     });
@@ -532,9 +566,9 @@ describe('script: autosuggest', () => {
       });
 
       it('shows the type more message', async () => {
-        const listItemCount = await page.$$eval('.ons-js-autosuggest-listbox > *', nodes => nodes.length);
+        const listItemCount = await page.$$eval('.ons-js-autosuggest-listbox > *', (nodes) => nodes.length);
         expect(listItemCount).toBe(1);
-        const noResultsText = await page.$eval('.ons-autosuggest__option--no-results', node => node.innerText);
+        const noResultsText = await page.$eval('.ons-autosuggest__option--no-results', (node) => node.innerText);
         expect(noResultsText.trim()).toBe('Continue entering to get suggestions');
       });
     });
@@ -563,29 +597,29 @@ describe('script: autosuggest', () => {
       });
 
       it('shows the API error message', async () => {
-        const listItemCount = await page.$$eval('.ons-js-autosuggest-listbox > *', nodes => nodes.length);
+        const listItemCount = await page.$$eval('.ons-js-autosuggest-listbox > *', (nodes) => nodes.length);
         expect(listItemCount).toBe(1);
-        const warningText = await page.$eval('.ons-autosuggest__warning', node => node.textContent);
+        const warningText = await page.$eval('.ons-autosuggest__warning', (node) => node.textContent);
         expect(warningText.trim()).toBe('!Sorry, there is a problem.');
       });
 
       it('the input should be disabled', async () => {
-        const hasDisabledAttribute = await page.$eval('.ons-js-autosuggest-input', node => node.hasAttribute('disabled'));
+        const hasDisabledAttribute = await page.$eval('.ons-js-autosuggest-input', (node) => node.hasAttribute('disabled'));
         expect(hasDisabledAttribute).toBe(true);
       });
 
       it('the input value should be empty', async () => {
-        const inputValue = await page.$eval('.ons-js-autosuggest-input', node => node.value);
+        const inputValue = await page.$eval('.ons-js-autosuggest-input', (node) => node.value);
         expect(inputValue).toBe('');
       });
 
       it('the label class should be added', async () => {
-        const hasClass = await page.$eval('.ons-label', node => node.classList.contains('ons-u-lighter'));
+        const hasClass = await page.$eval('.ons-label', (node) => node.classList.contains('ons-u-lighter'));
         expect(hasClass).toBe(true);
       });
 
       it('the aria status should be set', async () => {
-        const statusMessage = await page.$eval('.ons-js-autosuggest-aria-status', node => node.textContent);
+        const statusMessage = await page.$eval('.ons-js-autosuggest-aria-status', (node) => node.textContent);
         expect(statusMessage.trim()).toBe('Sorry, there is a problem.');
       });
     });
@@ -609,7 +643,7 @@ describe('script: autosuggest', () => {
         await page.keyboard.press('Tab');
         await page.focus('.ons-js-autosuggest-input');
 
-        const inputValue = await page.$eval('.ons-js-autosuggest-input', node => node.value);
+        const inputValue = await page.$eval('.ons-js-autosuggest-input', (node) => node.value);
         expect(inputValue).toBe('England, ');
       });
     });
@@ -627,7 +661,7 @@ describe('script: autosuggest', () => {
         await page.type('.ons-js-autosuggest-input', 'England, ', { delay: 20 });
         await page.keyboard.press('Tab');
 
-        const inputValue = await page.$eval('.ons-js-autosuggest-input', node => node.value);
+        const inputValue = await page.$eval('.ons-js-autosuggest-input', (node) => node.value);
         expect(inputValue).toBe('England');
       });
     });

package/components/autosuggest/autosuggest.ui.js

@@ -64,6 +64,7 @@ export default class AutosuggestUI {
     this.errorAPI = errorAPI || context.getAttribute('data-error-api');
     this.errorAPILinkText = errorAPILinkText || context.getAttribute('data-error-api-link-text');
     this.typeMore = typeMore || context.getAttribute('data-type-more');
+    this.language = context.getAttribute('data-lang');
     this.allowMultiple = context.getAttribute('data-allow-multiple') || false;
     this.listboxId = this.listbox.getAttribute('id');
     this.resultLimit = resultLimit || 10;
@@ -104,7 +105,7 @@ export default class AutosuggestUI {
   }
 
   get lang() {
-    return document.documentElement.getAttribute('lang').toLowerCase();
+    return !this.language ? document.documentElement.getAttribute('lang').toLowerCase() : this.language.toLowerCase();
   }
 
   initialiseUI() {
@@ -261,7 +262,7 @@ export default class AutosuggestUI {
   getSuggestions(force, groupResults) {
     if (!this.settingResult) {
       if (this.allowMultiple === 'true' && this.allSelections.length) {
-        const newQuery = this.input.value.split(', ').find(item => !this.allSelections.includes(item));
+        const newQuery = this.input.value.split(', ').find((item) => !this.allSelections.includes(item));
         this.query = newQuery ? newQuery : this.input.value;
       } else {
         this.query = this.input.value;
@@ -276,7 +277,7 @@ export default class AutosuggestUI {
         if (this.sanitisedQuery.length >= this.minChars) {
           this.fetchSuggestions(this.sanitisedQuery, this.data, groupResults)
             .then(this.handleResults.bind(this))
-            .catch(error => {
+            .catch((error) => {
               if (error.name !== 'AbortError') {
                 console.log('error:', error);
                 this.handleNoResults(500);
@@ -292,7 +293,7 @@ export default class AutosuggestUI {
   async fetchSuggestions(sanitisedQuery, data) {
     this.abortFetch();
     const results = await runFuse(sanitisedQuery, data, this.lang, this.resultLimit);
-    results.forEach(result => {
+    results.forEach((result) => {
       result.sanitisedText = sanitiseAutosuggestText(result[this.lang], this.sanitisedQueryReplaceChars);
     });
     return {
@@ -520,14 +521,14 @@ export default class AutosuggestUI {
   }
 
   storeExistingSelections(value) {
-    this.currentSelections = this.input.value.split(', ').filter(items => this.allSelections.includes(items));
+    this.currentSelections = this.input.value.split(', ').filter((items) => this.allSelections.includes(items));
     this.allSelections = [];
     if (this.currentSelections.length) {
       this.allSelections = this.currentSelections;
     }
     this.allSelections.push(value);
 
-    this.allSelections = this.allSelections.filter(function(value, index, array) {
+    this.allSelections = this.allSelections.filter(function (value, index, array) {
       return array.indexOf(value) == index;
     });
 
@@ -535,12 +536,7 @@ export default class AutosuggestUI {
   }
 
   emboldenMatch(string, query) {
-    let reg = new RegExp(
-      this.escapeRegExp(query)
-        .split(' ')
-        .join('[\\s,]*'),
-      'gi',
-    );
+    let reg = new RegExp(this.escapeRegExp(query).split(' ').join('[\\s,]*'), 'gi');
 
     return string.replace(reg, '<strong>$&</strong>');
   }

package/components/autosuggest/example-autosuggest-country-multiple.njk

@@ -4,10 +4,10 @@
     <div class="ons-grid__col ons-col-8@m">
 
         {{ onsAutosuggest({
-            "id": "country-of-birth",
+            "id": "country-of-birth-autosuggest-multiple",
             "label": {
                 "text": "Passport",
-                "id": "country-of-birth-label",
+                "id": "country-of-birth-label-multiple",
                 "description": "Enter your own answer or select from suggestions. You can enter multiple countries if you have a passport for more than one."
             },
             "autocomplete": "off",
@@ -23,7 +23,8 @@
             "allowMultiple": true,
             "autosuggestData": "/examples/data/country-of-birth.json",
             "noResults": "No suggestions found. You can enter your own answer",
-            "typeMore": "Continue entering to get suggestions"
+            "typeMore": "Continue entering to get suggestions",
+            "language": "en"
         }) }}
 
     </div>

package/components/autosuggest/example-autosuggest-country.njk

@@ -4,7 +4,7 @@
     <div class="ons-grid__col ons-col-8@m">
 
         {{ onsAutosuggest({
-            "id": "country-of-birth",
+            "id": "country-of-birth-autosuggest",
             "label": {
                 "text": "Current name of country",
                 "description": "Enter your own answer or select from suggestions",

package/components/back-link/example-back-link.njk

@@ -6,7 +6,7 @@
         "itemsList": [
             {
                 "url": '/',
-                "id": "back",
+                "id": "backlink",
                 "text": 'Back',
                 "attributes": {
                     "data-attribute": "Example attribute"

package/components/button/_button.scss

@@ -15,19 +15,16 @@ $button-shadow-size: 3px;
   position: relative;
   text-align: center;
   text-decoration: none;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
   vertical-align: top;
   white-space: nowrap;
 
   // Transparent border for IE11 High Contrast mode support due to 'border: 0' on buttons
   &::after {
     border: ems($button-shadow-size) solid transparent;
-    bottom: -(ems($button-shadow-size)); // makes sure button shadow is selectable
+    inset: 0 0 - (ems($button-shadow-size)) 0; // makes sure button shadow is selectable
     content: '';
-    left: 0;
     position: absolute;
-    right: 0;
-    top: 0;
   }
 
   &--search {
@@ -172,8 +169,8 @@ $button-shadow-size: 3px;
     text-decoration: none;
   }
 
-  &--link:focus:not(:active):not(&--secondary) &,
-  &--link:focus:hover:not(:active):not(&--secondary) & {
+  &--link:focus:not(:active, &--secondary) &,
+  &--link:focus:hover:not(:active, &--secondary) & {
     outline: inherit;
 
     &__inner {
@@ -245,7 +242,8 @@ $button-shadow-size: 3px;
   &--text-link:active:focus & {
     &__inner {
       background-color: var(--ons-color-focus);
-      box-shadow: 0 -2px var(--ons-color-focus), 0 4px var(--ons-color-text-link-focus) !important;
+      box-shadow: 0 -2px var(--ons-color-focus),
+        0 4px var(--ons-color-text-link-focus) !important;
       color: var(--ons-color-text-link-focus);
       .ons-icon {
         fill: var(--ons-color-text-link-focus);
@@ -256,7 +254,7 @@ $button-shadow-size: 3px;
   &--ghost & {
     &__inner {
       background: transparent;
-      border: 2px solid rgba(255, 255, 255, 0.6);
+      border: 2px solid rgb(255 255 255 / 60%);
       box-shadow: none;
       color: var(--ons-color-text-inverse);
       .ons-icon {
@@ -314,7 +312,7 @@ $button-shadow-size: 3px;
 
   &--ghost:hover & {
     &__inner {
-      background: rgba(0, 0, 0, 0.1);
+      background: rgb(0 0 0 / 10%);
       border-color: var(--ons-color-white);
     }
   }
@@ -323,8 +321,8 @@ $button-shadow-size: 3px;
   &--ghost:active:focus &,
   &--ghost.active & {
     &__inner {
-      background: rgba(0, 0, 0, 0.2);
-      border-color: rgba(255, 255, 255, 0.6);
+      background: rgb(0 0 0 / 20%);
+      border-color: rgb(255 255 255 / 60%);
       color: var(--ons-color-text-inverse);
       .ons-icon {
         fill: var(--ons-color-text-inverse);
@@ -514,8 +512,7 @@ $button-shadow-size: 3px;
 
   align-items: baseline;
   display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
+  flex-flow: row wrap;
 
   & .ons-btn,
   & a {