Merge pull request #291 from PRGfx/task/selected-option-index-in-status

Pass selected option's index to Status; use in tStatusSelectedOption
alphagov · Aug 9, 2018 · 2ae9940 · 2ae9940
2 parents b5ba980 + 1a7d0b0
commit 2ae9940
Show file tree

Hide file tree

Showing 9 changed files with 11 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -291,7 +291,7 @@ Type: `Function`
 
 A function that receives no arguments and should return the text that is used in the accessibility hint to indicate that there are no results.
 
-#### `tStatusSelectedOption` (default: `` (selectedOption, length) => `${selectedOption} (1 of ${length}) is selected.` ``)
+#### `tStatusSelectedOption` (default: `` (selectedOption, length, index) => `${selectedOption} (${index + 1} of ${length}) is selected.` ``)
 
 Type: `Function`
 

diff --git a/dist/accessible-autocomplete.min.js b/dist/accessible-autocomplete.min.js
diff --git a/dist/accessible-autocomplete.min.js.map b/dist/accessible-autocomplete.min.js.map
diff --git a/dist/lib/accessible-autocomplete.preact.min.js b/dist/lib/accessible-autocomplete.preact.min.js
diff --git a/dist/lib/accessible-autocomplete.preact.min.js.map b/dist/lib/accessible-autocomplete.preact.min.js.map
diff --git a/dist/lib/accessible-autocomplete.react.min.js b/dist/lib/accessible-autocomplete.react.min.js
diff --git a/dist/lib/accessible-autocomplete.react.min.js.map b/dist/lib/accessible-autocomplete.react.min.js.map
diff --git a/src/autocomplete.js b/src/autocomplete.js
@@ -453,6 +453,7 @@ export default class Autocomplete extends Component {
           queryLength={query.length}
           minQueryLength={minLength}
           selectedOption={this.templateInputValue(options[selected])}
+          selectedOptionIndex={selected}
           tQueryTooShort={tStatusQueryTooShort}
           tNoResults={tStatusNoResults}
           tSelectedOption={tStatusSelectedOption}

diff --git a/src/status.js b/src/status.js
@@ -4,7 +4,7 @@ export default class Status extends Component {
   static defaultProps = {
     tQueryTooShort: (minQueryLength) => `Type in ${minQueryLength} or more characters for results.`,
     tNoResults: () => 'No search results.',
-    tSelectedOption: (selectedOption, length) => `${selectedOption} (1 of ${length}) is selected.`,
+    tSelectedOption: (selectedOption, length, index) => `${selectedOption} (${index + 1} of ${length}) is selected.`,
     tResults: (length, contentSelectedOption) => {
       const words = {
         result: (length === 1) ? 'result' : 'results',
@@ -32,6 +32,7 @@ export default class Status extends Component {
       queryLength,
       minQueryLength,
       selectedOption,
+      selectedOptionIndex,
       tQueryTooShort,
       tNoResults,
       tSelectedOption,
@@ -43,7 +44,7 @@ export default class Status extends Component {
     const noResults = length === 0
 
     const contentSelectedOption = selectedOption
-      ? tSelectedOption(selectedOption, length)
+      ? tSelectedOption(selectedOption, length, selectedOptionIndex)
       : ''
 
     let content = null