Use Listbox component for selecting language

2 files changed, 21 insertions, 20 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/select-language/SelectLanguage.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/select-language/SelectLanguage.tsx
index 471f61b526..79eda22302 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/select-language/SelectLanguage.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/select-language/SelectLanguage.tsx
@@ -1,13 +1,12 @@
 import { useCallback, useEffect, useMemo, useRef } from 'react';
-import styled from 'styled-components';
 
 import { messages } from '../../../../shared/gettext';
 import { useAppContext } from '../../../context';
+import { Listbox } from '../../../lib/components/listbox';
 import { useHistory } from '../../../lib/history';
 import { useSelector } from '../../../redux/store';
 import { AppNavigationHeader } from '../..';
-import { AriaInputGroup } from '../../AriaGroup';
-import Selector, { SelectorItem } from '../../cell/Selector';
+import { SelectorItem } from '../../cell/Selector';
 import { CustomScrollbarsRef } from '../../CustomScrollbars';
 import { BackAction } from '../../KeyboardNavigation';
 import { Layout, SettingsContainer } from '../../Layout';
@@ -15,10 +14,6 @@ import { NavigationContainer } from '../../NavigationContainer';
 import { NavigationScrollbars } from '../../NavigationScrollbars';
 import SettingsHeader, { HeaderTitle } from '../../SettingsHeader';
 
-const StyledSelector = styled(Selector)({
-  marginBottom: 0,
-}) as typeof Selector;
-
 export function SelectLanguageView() {
   const { pop } = useHistory();
   const { preferredLocale, preferredLocalesList, setPreferredLocale } = usePreferredLocale();
@@ -65,15 +60,24 @@ export function SelectLanguageView() {
                   {messages.pgettext('select-language-nav', 'Select language')}
                 </HeaderTitle>
               </SettingsHeader>
-              <AriaInputGroup>
-                <StyledSelector
-                  title=""
-                  value={preferredLocale}
-                  items={preferredLocalesList}
-                  onSelect={selectLocale}
-                  selectedCellRef={selectedCellRef}
-                />
-              </AriaInputGroup>
+              <Listbox value={preferredLocale} onValueChange={selectLocale}>
+                <Listbox.Options>
+                  {preferredLocalesList.map((locale) => (
+                    <Listbox.Option key={locale.value} level={1} value={locale.value}>
+                      <Listbox.Option.Trigger>
+                        <Listbox.Option.Item>
+                          <Listbox.Option.Content>
+                            <Listbox.Option.Group>
+                              <Listbox.Option.Icon icon="checkmark" />
+                              <Listbox.Option.Label>{locale.label}</Listbox.Option.Label>
+                            </Listbox.Option.Group>
+                          </Listbox.Option.Content>
+                        </Listbox.Option.Item>
+                      </Listbox.Option.Trigger>
+                    </Listbox.Option>
+                  ))}
+                </Listbox.Options>
+              </Listbox>
             </NavigationScrollbars>
           </NavigationContainer>
         </SettingsContainer>
diff --git a/desktop/packages/mullvad-vpn/test/e2e/route-object-models/select-language/selectors.ts b/desktop/packages/mullvad-vpn/test/e2e/route-object-models/select-language/selectors.ts
index eb9e86f36a..b4dbe6fa5e 100644
--- a/desktop/packages/mullvad-vpn/test/e2e/route-object-models/select-language/selectors.ts
+++ b/desktop/packages/mullvad-vpn/test/e2e/route-object-models/select-language/selectors.ts
@@ -1,8 +1,5 @@
 import { Page } from 'playwright';
 
 export const createSelectors = (page: Page) => ({
-  languageOption: (language: string) =>
-    page.locator('button', {
-      has: page.locator('div', { hasText: language }),
-    }),
+  languageOption: (language: string) => page.getByRole('option', { name: language }),
 });