diff --git a/packages/app-desktop/gui/ConfigScreen/controls/plugins/PluginBox.tsx b/packages/app-desktop/gui/ConfigScreen/controls/plugins/PluginBox.tsx index 356cf87148c..cf728e6ca29 100644 --- a/packages/app-desktop/gui/ConfigScreen/controls/plugins/PluginBox.tsx +++ b/packages/app-desktop/gui/ConfigScreen/controls/plugins/PluginBox.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { useCallback, useMemo } from 'react'; +import { useCallback, useId, useMemo } from 'react'; import { _ } from '@joplin/lib/locale'; import styled from 'styled-components'; import ToggleButton from '../../../lib/ToggleButton/ToggleButton'; @@ -173,6 +173,7 @@ export default function(props: Props) { themeId={props.themeId} value={item.enabled} onToggle={() => props.onToggle({ item })} + aria-label={_('Enabled')} />; } @@ -256,10 +257,17 @@ export default function(props: Props) { return ; } + const nameLabelId = useId(); + return ( - + - {item.manifest.name} {item.deleted ? _('(%s)', 'Deleted') : ''}v{item.manifest.version} + + + {item.manifest.name} {item.deleted ? _('(%s)', 'Deleted') : ''} + + v{item.manifest.version} + {renderToggleButton()} {renderRecommendedBadge()} diff --git a/packages/app-desktop/gui/lib/ToggleButton/ToggleButton.tsx b/packages/app-desktop/gui/lib/ToggleButton/ToggleButton.tsx index 80450f33001..aa3f0176964 100644 --- a/packages/app-desktop/gui/lib/ToggleButton/ToggleButton.tsx +++ b/packages/app-desktop/gui/lib/ToggleButton/ToggleButton.tsx @@ -1,5 +1,6 @@ import { themeStyle } from '@joplin/lib/theme'; import * as React from 'react'; +import { useMemo } from 'react'; const ReactToggleButton = require('react-toggle-button'); const Color = require('color'); @@ -8,11 +9,24 @@ interface Props { // eslint-disable-next-line @typescript-eslint/ban-types -- Old code before rule was applied onToggle: Function; themeId: number; + 'aria-label': string; } export default function(props: Props) { const theme = themeStyle(props.themeId); + const ariaLabel = props['aria-label']; + + const passThroughInputProps = useMemo(() => { + return { + 'aria-label': ariaLabel, + + // Works around a bug in ReactToggleButton -- the hidden checkbox input associated + // with the toggle is always read as "unchecked" by screen readers. + checked: props.value, + }; + }, [ariaLabel, props.value]); + return ( ); }