fix(Autocomplete): make VoiceOver announce first if a certain item is…

… selected (#1479)
dnbexperience · Jun 22, 2022 · d32e980 · d32e980
1 parent e775792
commit d32e980
Show file tree

Hide file tree

Showing 5 changed files with 5 additions and 5 deletions.
diff --git a/...s/dnb-design-system-portal/src/docs/uilib/components/autocomplete/properties.md b/...s/dnb-design-system-portal/src/docs/uilib/components/autocomplete/properties.md
@@ -37,7 +37,7 @@ You may check out the [DrawerList Properties](#drawerlist-properties) down below
 | `show_all`                                                       | _(optional)_ text that lets a user unravel all the available options. Defaults to `Vis alt`.                                                                                                                                     |
 | `indicator_label`                                                | _(optional)_ text show on indicator "options" item. Defaults to `Henter data ...`.                                                                                                                                               |
 | `show_options_sr`                                                | _(optional)_ only for screen readers. Title of the button to show the suggestions / options. It is always present and when activating, it opens the DrawerList and sets the focus on it. Defaults to `Bla gjennom alternativer`. |
-| `selected_sr`                                                    | _(optional)_ only for screen readers (VocieOver). The label used to announce the selected item. Defaults to `Valgt`.                                                                                                             |
+| `selected_sr`                                                    | _(optional)_ only for screen readers (VocieOver). The label used to announce the selected item. Defaults to `Valgt:`.                                                                                                            |
 | `submit_button_title`                                            | _(optional)_ title on submit button. Defaults to `Vis alternativer`.                                                                                                                                                             |
 | `submit_button_icon`                                             | _(optional)_ the icon used in the submit button. Defaults to `chevron_down`.                                                                                                                                                     |
 | `submit_element`                                                 | _(optional)_ replace the dropdown / submit button with a custom React element. Defaults to the input SubmitButton `import { SubmitButton } from '@dnb/eufemia/components/input/Input'`.                                          |

diff --git a/packages/dnb-eufemia/src/components/autocomplete/Autocomplete.js b/packages/dnb-eufemia/src/components/autocomplete/Autocomplete.js
@@ -1647,8 +1647,8 @@ class AutocompleteInstance extends React.PureComponent {
         <span className="dnb-sr-only" aria-live="assertive" aria-atomic>
           {currentDataItem && (
             <>
+              {active_item === selected_item ? <>{selected_sr} </> : null}
               <ItemContent>{currentDataItem}</ItemContent>
-              {active_item === selected_item ? <> {selected_sr}</> : null}
             </>
           )}
         </span>

diff --git a/packages/dnb-eufemia/src/components/autocomplete/__tests__/Autocomplete.test.js b/packages/dnb-eufemia/src/components/autocomplete/__tests__/Autocomplete.test.js
@@ -366,7 +366,7 @@ describe('Autocomplete component', () => {
 
     keydown(Comp, 13) // enter
 
-    expect(Comp.find('.dnb-sr-only').first().text()).toBe('CCcc Valgt')
+    expect(Comp.find('.dnb-sr-only').first().text()).toBe('Valgt: CCcc')
 
     // simulate changes
     keydown(Comp, 38) // up

diff --git a/packages/dnb-eufemia/src/shared/locales/en-GB.js b/packages/dnb-eufemia/src/shared/locales/en-GB.js
@@ -66,7 +66,7 @@ export default {
       show_all: 'Show everything',
       show_options_sr: 'Browse options, close with esc button',
       aria_live_options: '%s options',
-      selected_sr: 'Selected',
+      selected_sr: 'Selected:',
       indicator_label: 'Getting data ...',
     },
     Modal: {

diff --git a/packages/dnb-eufemia/src/shared/locales/nb-NO.js b/packages/dnb-eufemia/src/shared/locales/nb-NO.js
@@ -66,7 +66,7 @@ export default {
       show_all: 'Vis alt',
       show_options_sr: 'Bla gjennom alternativer, lukk med esc knappen',
       aria_live_options: '%s alternativer',
-      selected_sr: 'Valgt',
+      selected_sr: 'Valgt:',
       indicator_label: 'Henter data ...',
     },
     Modal: {