PLATUI-2638 Enable Welsh language support for accessible-autocomplete (…

…#329)

PLATUI-2638 supply Welsh translations if language is set to 'cy'; wire up data-min-length; update README to reflect current API

CHANGELOG.md

@@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Unreleased]
 
+## [5.56.0] - 2023-11-09
+
+### Changed
+
+- Enable Welsh language support for accessible-autocomplete
+
 ## [5.55.0] - 2023-11-02
 
 ### Changed

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hmrc-frontend",
-  "version": "5.55.0",
+  "version": "5.56.0",
   "description": "Design patterns for HMRC frontends",
   "scripts": {
     "start": "gulp dev",

src/components/accessible-autocomplete/README.md

@@ -5,51 +5,42 @@ It also supports a `<label>` with hint and error message support for the `<selec
 
 The enhanceSelectElement will transform the `<select>` into an `<input>` with full accessibility support.
 
-## Parameters
+See [here](https://www.npmjs.com/package/accessible-autocomplete) for more information on the underlying accessible autocomplete component.
 
-```
-select
-id
-hint
-errorMessage
-describedBy
-```
-
-## Parameters for the select input
-
-Look [here](https://www.npmjs.com/package/accessible-autocomplete) for more information on the attributes for the accessible autocomplete component.
+## Data attributes for the select element
 
-## id
-Should be the same as the id for this component
+### data-module
+Should always be set to value `hmrc-accessible-autocomplete` for this component to find the select and apply the `enhanceSelectElement` function to it.
 
-## data-default-value
-Type: string
+### data-default-value
+Type: String
 
-Specify a string to prefill the autocomplete with.
+Specify a value with which to prefill the autocomplete input.
 
-## data-auto-select
+### data-auto-select
 Type: Boolean
 
 Set to true to highlight the first option when the user types in something and receives results. Pressing enter will select it.
 
-## data-show-all-values
+### data-show-all-values
 Type: Boolean
 
-If this is set to true, all values are shown when the user clicks the input. This is similar to a default dropdown, so the autocomplete is rendered with a dropdown arrow to convey this behaviour.
+Set to true to show all values when the user clicks the input.
+This is similar to a default dropdown, so the autocomplete is rendered with a dropdown arrow to convey this behaviour.
 
-## data-module
-Should always be set to value `hmrc-accessible-autocomplete` for this component to find the select and apply the enhanceSelectElement function to it.
+### data-min-length
+Type: Int
 
-### Data attributes for the select element
-```
-id
-data-default-value=""
-data-auto-select="false"
-data-show-all-values="false"
-data-module="hmrc-accessible-autocomplete"
-```
+The number of characters the user must enter before any matches are shown.
+Defaults to zero.
+
+### data-language
+Type: String
+
+By default, English content for various states (eg. "No search results") is provided by the underlying accessible-autocomplete component.
+By setting this attribute to `cy`, the component will use the corresponding Welsh content.
 
-### Example select input
+## Example select input
 
 ```
 <select id="location-picker" data-show-all-values="false" data-auto-select="false" data-default-value="" data-module="hmrc-accessible-autocomplete">
@@ -59,6 +50,6 @@ data-module="hmrc-accessible-autocomplete"
 </select>
 ```
 
-### License
+## License
 
 This code is open source software licensed under the [Apache 2.0 License]("http://www.apache.org/licenses/LICENSE-2.0.html").

src/components/accessible-autocomplete/accessible-autocomplete.js

@@ -9,12 +9,32 @@ AccessibleAutoComplete.prototype.init = function init() {
     const showAllValues = (this.$module.getAttribute('data-show-all-values') === 'true');
     const autoselect = (this.$module.getAttribute('data-auto-select') === 'true');
     const defaultValue = this.$module.getAttribute('data-default-value');
-    window.HMRCAccessibleAutocomplete.enhanceSelectElement({
+    const minLength = this.$module.getAttribute('data-min-length');
+
+    const configurationOptions = {
       selectElement: this.$module,
       showAllValues,
       autoselect,
       defaultValue,
-    });
+      minLength,
+    };
+
+    const language = this.$module.getAttribute('data-language') || 'en';
+
+    if (language === 'cy') {
+      configurationOptions.tAssistiveHint = () => 'Pan fydd canlyniadau awtogwblhau ar gael, defnyddiwch y saethau i fyny ac i lawr i’w hadolygu a phwyswch y fysell ’enter’ i’w dewis.'
+        + ' Gall defnyddwyr dyfeisiau cyffwrdd, archwilio drwy gyffwrdd â’r sgrin neu drwy sweipio.';
+      configurationOptions.tStatusQueryTooShort = (minQueryLength) => `Ysgrifennwch ${minQueryLength} neu fwy o gymeriadau am ganlyniadau`;
+      configurationOptions.tNoResults = () => 'Dim canlyniadau wedi’u darganfod';
+      configurationOptions.tStatusNoResults = () => 'Dim canlyniadau chwilio';
+      configurationOptions.tStatusSelectedOption = (selectedOption, length, index) => `Mae ${selectedOption} ${index + 1} o ${length} wedi’i amlygu`;
+      configurationOptions.tStatusResults = (length, contentSelectedOption) => {
+        const resultOrResults = (length === 1) ? 'canlyniad' : 'o ganlyniad';
+        return `${length} ${resultOrResults} ar gael. ${contentSelectedOption}`;
+      };
+    }
+
+    window.HMRCAccessibleAutocomplete.enhanceSelectElement(configurationOptions);
   }
 };
 

src/components/accessible-autocomplete/accessible-autocomplete.yaml

@@ -130,4 +130,43 @@ examples:
           <option value="fr">France</option>
           <option value="de">Germany</option>
           <option value="gb">United Kingdom</option>
-        </select>
+        </select>
+  - name: with-welsh-language
+    description:
+    data:
+      label:
+        text: Dewiswch wlad
+      id: location-picker
+      select: |
+        <select id="location-picker" data-language="cy" data-show-all-values="true" data-auto-select="false" data-default-value="" data-module="hmrc-accessible-autocomplete">
+          <option value="fr">France</option>
+          <option value="de">Germany</option>
+          <option value="gb">United Kingdom</option>
+          <option value="us">United States</option>
+        </select>
+  - name: with-welsh-language-and-min-length
+    description:
+    data:
+      label:
+        text: Dewiswch wlad
+      id: location-picker
+      select: |
+        <select id="location-picker" data-language="cy" data-min-length="3" data-show-all-values="false" data-auto-select="false" data-default-value="" data-module="hmrc-accessible-autocomplete">
+          <option value="fr">France</option>
+          <option value="de">Germany</option>
+          <option value="gb">United Kingdom</option>
+          <option value="us">United States</option>
+        </select>
+  - name: with-welsh-language-and-autoselect-on
+    description:
+    data:
+      label:
+        text: Dewiswch wlad
+      id: location-picker
+      select: |
+        <select id="location-picker" data-language="cy" data-show-all-values="false" data-auto-select="true" data-default-value="" data-module="hmrc-accessible-autocomplete">
+          <option value="fr">France</option>
+          <option value="de">Germany</option>
+          <option value="gb">United Kingdom</option>
+          <option value="us">United States</option>
+        </select>

src/components/accessible-autocomplete/integration.test.js

@@ -98,7 +98,6 @@ describe('enhanceSelectElement on the select element provided', () => {
 
     const input = await page.$('#location-picker');
     await input.click();
-    await page.waitForSelector('#location-picker');
     // eslint-disable-next-line no-param-reassign,no-return-assign
     await page.$eval('#location-picker', (el) => el.value = 'Fr');
     await input.click();
@@ -120,7 +119,6 @@ describe('enhanceSelectElement on the select element provided', () => {
 
     const input = await page.$('#location-picker');
     await input.click();
-    await page.waitForSelector('#location-picker');
     // eslint-disable-next-line no-param-reassign,no-return-assign
     await page.$eval('#location-picker', (el) => el.value = 'Fr');
     await page.waitForSelector('.autocomplete__hint');
@@ -138,7 +136,6 @@ describe('enhanceSelectElement on the select element provided', () => {
 
     const input = await page.$('#location-picker');
     await input.click();
-    await page.waitForSelector('#location-picker');
     // eslint-disable-next-line no-param-reassign,no-return-assign
     await page.$eval('#location-picker', (el) => el.value = 'Fr');
     await input.click();
@@ -149,4 +146,108 @@ describe('enhanceSelectElement on the select element provided', () => {
     expect(autocompleteFocused).toBeTruthy();
     expect(Object.keys(visibleElements).length).toEqual(0);
   });
+
+  it('should render assistive hint in Welsh when data-language is cy', async () => {
+    await page.goto(`${baseUrl}/components/accessible-autocomplete/with-welsh-language/preview`);
+
+    const assistiveHint = await page.evaluate(() => document.querySelector('#location-picker__assistiveHint').textContent);
+
+    expect(assistiveHint.trim()).toEqual(
+      'Pan fydd canlyniadau awtogwblhau ar gael, defnyddiwch y saethau i fyny ac i lawr i’w hadolygu a phwyswch'
+      + ' y fysell ’enter’ i’w dewis. Gall defnyddwyr dyfeisiau cyffwrdd, archwilio drwy gyffwrdd â’r sgrin neu drwy sweipio.',
+    );
+  });
+
+  // for some reason, there are 2 status elements, and content bounces between them as you type...
+  const isAssistiveStatusHintPopulated = () => document.querySelector('#location-picker__status--A').textContent.length > 0
+    || document.querySelector('#location-picker__status--B').textContent.length > 0;
+
+  async function getStatusHint() {
+    return page.evaluate(() => {
+      const assistiveStatusHint = () => document.querySelector('#location-picker__status--A').textContent
+        + document.querySelector('#location-picker__status--B').textContent;
+      return assistiveStatusHint();
+    });
+  }
+
+  it('should render minimum length hint in Welsh when minimum length is specified but not met', async () => {
+    await page.goto(`${baseUrl}/components/accessible-autocomplete/with-welsh-language-and-min-length/preview`);
+
+    const input = await page.$('#location-picker');
+    await input.click();
+
+    // eslint-disable-next-line no-param-reassign,no-return-assign
+    await page.$eval('#location-picker', (el) => el.value = 'Un');
+    await page.waitForFunction(isAssistiveStatusHintPopulated);
+
+    const statusHint = await getStatusHint();
+    expect(statusHint.trim()).toEqual('Ysgrifennwch 3 neu fwy o gymeriadau am ganlyniadau');
+  });
+
+  it('should render status hint in Welsh when data-language is cy and there are multiple matching results', async () => {
+    await page.goto(`${baseUrl}/components/accessible-autocomplete/with-welsh-language/preview`);
+
+    const input = await page.$('#location-picker');
+    await input.click();
+
+    // eslint-disable-next-line no-param-reassign,no-return-assign
+    await page.$eval('#location-picker', (el) => el.value = 'Un');
+    await page.waitForFunction(isAssistiveStatusHintPopulated);
+
+    const statusHint = await getStatusHint();
+    expect(statusHint.trim()).toEqual('2 o ganlyniad ar gael.');
+  });
+
+  it('should render status hint in Welsh when data-language is cy and there is a single matching result', async () => {
+    await page.goto(`${baseUrl}/components/accessible-autocomplete/with-welsh-language/preview`);
+
+    const input = await page.$('#location-picker');
+    await input.click();
+
+    await page.keyboard.press('F');
+    await page.waitForFunction(isAssistiveStatusHintPopulated);
+
+    const statusHint = await getStatusHint();
+    expect(statusHint.trim()).toEqual('1 canlyniad ar gael.');
+  });
+
+  it('should render status hint in Welsh when data-language is cy and there are no matching results', async () => {
+    await page.goto(`${baseUrl}/components/accessible-autocomplete/with-welsh-language/preview`);
+
+    const input = await page.$('#location-picker');
+    await input.click();
+
+    await page.keyboard.press('Z');
+    await page.waitForFunction(isAssistiveStatusHintPopulated);
+
+    const statusHint = await getStatusHint();
+    expect(statusHint.trim()).toEqual('Dim canlyniadau chwilio');
+  });
+
+  it('should render "no results found" dropdown in Welsh when data-language is cy and there are no matching results', async () => {
+    await page.goto(`${baseUrl}/components/accessible-autocomplete/with-welsh-language/preview`);
+
+    const input = await page.$('#location-picker');
+    await input.click();
+
+    await page.keyboard.press('Z');
+    await page.waitForFunction(isAssistiveStatusHintPopulated);
+
+    const statusHint = await page.evaluate(() => document.querySelector('#location-picker__listbox').textContent);
+    expect(statusHint.trim()).toEqual('Dim canlyniadau wedi’u darganfod');
+  });
+
+  it('should render status hint in Welsh when data-language is cy and an item is selected', async () => {
+    await page.goto(`${baseUrl}/components/accessible-autocomplete/with-welsh-language-and-autoselect-on/preview`);
+
+    const input = await page.$('#location-picker');
+    await input.click();
+
+    // eslint-disable-next-line no-param-reassign,no-return-assign
+    await page.$eval('#location-picker', (el) => el.value = 'Un');
+    await page.waitForFunction(isAssistiveStatusHintPopulated);
+
+    const statusHint = await getStatusHint();
+    expect(statusHint.trim()).toEqual('2 o ganlyniad ar gael. Mae United Kingdom 1 o 2 wedi’i amlygu');
+  });
 });