diff options
9 files changed, 88 insertions, 38 deletions
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/settings-toggle-list-item/SettingsToggleListItem.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/settings-toggle-list-item/SettingsToggleListItem.tsx index 24f2f85930..e1156772fe 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/settings-toggle-list-item/SettingsToggleListItem.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/settings-toggle-list-item/SettingsToggleListItem.tsx @@ -1,9 +1,16 @@ +import React from 'react'; + import { Switch, SwitchProps } from '../../lib/components/switch'; import { SettingsListItem, SettingsListItemProps } from '../settings-list-item'; -import { SettingsToggleListItemLabel, SettingsToggleListItemSwitch } from './components'; +import { + SettingsToggleListItemGroup, + SettingsToggleListItemLabel, + SettingsToggleListItemSwitch, +} from './components'; +import { SettingsToggleListItemProvider } from './SettingsToggleListItemContext'; export type SettingsToggleListItemProps = { - footer?: string; + description?: string; checked?: SwitchProps['checked']; onCheckedChange?: SwitchProps['onCheckedChange']; } & SettingsListItemProps; @@ -11,33 +18,40 @@ export type SettingsToggleListItemProps = { function SettingsToggleListItem({ ref, children, - footer, + description, checked, onCheckedChange, disabled, ...props }: SettingsToggleListItemProps) { + const descriptionId = React.useId(); return ( - <SettingsListItem disabled={disabled} {...props}> - <SettingsListItem.Item> - <SettingsListItem.Content> - <Switch checked={checked} onCheckedChange={onCheckedChange} disabled={disabled}> - {children} - </Switch> - </SettingsListItem.Content> - </SettingsListItem.Item> - {footer && ( - <SettingsListItem.Footer> - <SettingsListItem.Text>{footer}</SettingsListItem.Text> - </SettingsListItem.Footer> - )} - </SettingsListItem> + <SettingsToggleListItemProvider descriptionId={descriptionId}> + <SettingsListItem disabled={disabled} {...props}> + <SettingsListItem.Item> + <SettingsListItem.Content> + <Switch + checked={checked} + onCheckedChange={onCheckedChange} + disabled={disabled} + aria-describedby={description ? descriptionId : undefined}> + {children} + </Switch> + </SettingsListItem.Content> + </SettingsListItem.Item> + {description && ( + <SettingsListItem.Footer> + <SettingsListItem.Text id={descriptionId}>{description}</SettingsListItem.Text> + </SettingsListItem.Footer> + )} + </SettingsListItem> + </SettingsToggleListItemProvider> ); } const SettingsToggleListItemNamespace = Object.assign(SettingsToggleListItem, { Label: SettingsToggleListItemLabel, Text: SettingsListItem.Text, - Group: SettingsListItem.Group, + Group: SettingsToggleListItemGroup, Footer: SettingsListItem.Footer, Switch: SettingsToggleListItemSwitch, }); diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/settings-toggle-list-item/SettingsToggleListItemContext.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/settings-toggle-list-item/SettingsToggleListItemContext.tsx new file mode 100644 index 0000000000..bc20d02f9c --- /dev/null +++ b/desktop/packages/mullvad-vpn/src/renderer/components/settings-toggle-list-item/SettingsToggleListItemContext.tsx @@ -0,0 +1,33 @@ +import { createContext, useContext } from 'react'; + +type SettingsToggleListItemContextType = { + descriptionId: string; +}; + +const SettingsToggleListItemContext = createContext<SettingsToggleListItemContextType | undefined>( + undefined, +); + +type SettingsToggleListItemProviderProps = + React.PropsWithChildren<SettingsToggleListItemContextType>; + +export const SettingsToggleListItemProvider = ({ + children, + ...props +}: SettingsToggleListItemProviderProps) => { + return ( + <SettingsToggleListItemContext.Provider value={props}> + {children} + </SettingsToggleListItemContext.Provider> + ); +}; + +export const useSettingsToggleListItemContext = (): SettingsToggleListItemContextType => { + const context = useContext(SettingsToggleListItemContext); + if (!context) { + throw new Error( + 'useSettingsToggleListItem must be used within a SettingsToggleListItemProvider', + ); + } + return context; +}; diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/settings-toggle-list-item/components/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/settings-toggle-list-item/components/index.ts index 6113b135df..b9eadb5303 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/settings-toggle-list-item/components/index.ts +++ b/desktop/packages/mullvad-vpn/src/renderer/components/settings-toggle-list-item/components/index.ts @@ -1,2 +1,3 @@ +export * from './settings-toggle-list-item-group'; export * from './settings-toggle-list-item-label'; export * from './settings-toggle-list-item-switch'; diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/settings-toggle-list-item/components/settings-toggle-list-item-group/SettingsToggleListItemGroup.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/settings-toggle-list-item/components/settings-toggle-list-item-group/SettingsToggleListItemGroup.tsx new file mode 100644 index 0000000000..d654475ecd --- /dev/null +++ b/desktop/packages/mullvad-vpn/src/renderer/components/settings-toggle-list-item/components/settings-toggle-list-item-group/SettingsToggleListItemGroup.tsx @@ -0,0 +1,8 @@ +import { ListItem } from '../../../../lib/components/list-item'; +import { ListItemGroupProps } from '../../../../lib/components/list-item/components'; + +export type SettingsToggleListItemGroup = ListItemGroupProps; + +export function SettingsToggleListItemGroup(props: SettingsToggleListItemGroup) { + return <ListItem.Group $gap="medium" {...props} />; +} diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/settings-toggle-list-item/components/settings-toggle-list-item-group/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/settings-toggle-list-item/components/settings-toggle-list-item-group/index.ts new file mode 100644 index 0000000000..ef07f526af --- /dev/null +++ b/desktop/packages/mullvad-vpn/src/renderer/components/settings-toggle-list-item/components/settings-toggle-list-item-group/index.ts @@ -0,0 +1 @@ +export * from './SettingsToggleListItemGroup'; diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/settings-toggle-list-item/components/settings-toggle-list-item-switch/SettingsToggleListItemSwitch.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/settings-toggle-list-item/components/settings-toggle-list-item-switch/SettingsToggleListItemSwitch.tsx index f68e4d9e8f..05cacc9068 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/settings-toggle-list-item/components/settings-toggle-list-item-switch/SettingsToggleListItemSwitch.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/settings-toggle-list-item/components/settings-toggle-list-item-switch/SettingsToggleListItemSwitch.tsx @@ -3,6 +3,7 @@ import styled from 'styled-components'; import { Switch } from '../../../../lib/components/switch'; import { SwitchTriggerProps } from '../../../../lib/components/switch/components'; import { spacings } from '../../../../lib/foundations'; +import { useSettingsToggleListItemContext } from '../../SettingsToggleListItemContext'; export type SettingsToggleListItemSwitchProps = SwitchTriggerProps; @@ -11,9 +12,10 @@ export const StyledSettingsToggleListItemSwitch = styled(Switch.Trigger)` `; export function SettingsToggleListItemSwitch(props: SettingsToggleListItemSwitchProps) { + const { descriptionId } = useSettingsToggleListItemContext(); return ( - <StyledSettingsToggleListItemSwitch {...props}> + <Switch.Trigger aria-describedby={descriptionId} {...props}> <Switch.Thumb /> - </StyledSettingsToggleListItemSwitch> + </Switch.Trigger> ); } diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/daita-settings/DaitaSettingsView.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/daita-settings/DaitaSettingsView.tsx index fa25bd39a1..5e0aa6d11f 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/views/daita-settings/DaitaSettingsView.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/daita-settings/DaitaSettingsView.tsx @@ -201,7 +201,8 @@ function DaitaToggle() { anchorId="daita-enable-setting" disabled={unavailable} checked={daita && !unavailable} - onCheckedChange={setDaita}> + onCheckedChange={setDaita} + description={unavailable ? featureUnavailableMessage() : undefined}> <SettingsToggleListItem.Label>{messages.gettext('Enable')}</SettingsToggleListItem.Label> <SettingsToggleListItem.Switch /> </SettingsToggleListItem> @@ -217,11 +218,6 @@ function DaitaToggle() { <SettingsToggleListItem.Switch /> </SettingsToggleListItem.Group> </SettingsToggleListItem> - {unavailable ? ( - <Cell.CellFooter> - <Cell.CellFooterText>{featureUnavailableMessage()}</Cell.CellFooterText> - </Cell.CellFooter> - ) : null} <ModalAlert isOpen={confirmationDialogVisible} type={ModalAlertType.caution} diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/multihop-settings/components/multihop-setting/MultihopSetting.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/multihop-settings/components/multihop-setting/MultihopSetting.tsx index e9c2e9b0d3..72f77de783 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/views/multihop-settings/components/multihop-setting/MultihopSetting.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/multihop-settings/components/multihop-setting/MultihopSetting.tsx @@ -6,8 +6,6 @@ import { messages } from '../../../../../../shared/gettext'; import log from '../../../../../../shared/logging'; import { useRelaySettingsUpdater } from '../../../../../lib/constraint-updater'; import { useSelector } from '../../../../../redux/store'; -import { AriaDescription } from '../../../../AriaGroup'; -import * as Cell from '../../../../cell'; import { SettingsToggleListItem } from '../../../../settings-toggle-list-item'; export function MultihopSetting() { @@ -39,17 +37,11 @@ export function MultihopSetting() { anchorId="multihop-setting" disabled={unavailable} checked={multihop && !unavailable} - onCheckedChange={setMultihop}> + onCheckedChange={setMultihop} + description={unavailable ? featureUnavailableMessage() : undefined}> <SettingsToggleListItem.Label>{messages.gettext('Enable')}</SettingsToggleListItem.Label> <SettingsToggleListItem.Switch /> </SettingsToggleListItem> - {unavailable ? ( - <Cell.CellFooter> - <AriaDescription> - <Cell.CellFooterText>{featureUnavailableMessage()}</Cell.CellFooterText> - </AriaDescription> - </Cell.CellFooter> - ) : null} </> ); } diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/auto-connect-setting/AutoConnectSetting.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/auto-connect-setting/AutoConnectSetting.tsx index 3fdc22f36b..c930536706 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/auto-connect-setting/AutoConnectSetting.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/auto-connect-setting/AutoConnectSetting.tsx @@ -13,11 +13,14 @@ export function AutoConnectSetting() { ); return ( - <SettingsToggleListItem checked={autoConnect} onCheckedChange={setAutoConnect} footer={footer}> + <SettingsToggleListItem + checked={autoConnect} + onCheckedChange={setAutoConnect} + description={footer}> <SettingsToggleListItem.Label> {messages.pgettext('vpn-settings-view', 'Auto-connect')} </SettingsToggleListItem.Label> - <SettingsToggleListItem.Switch aria-description={footer} /> + <SettingsToggleListItem.Switch /> </SettingsToggleListItem> ); } |