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 (
);
}