Improve plugin screen accessibility

laurent22 · Aug 1, 2024 · 1aca332 · 1aca332
1 parent d99dd09
commit 1aca332
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 3 deletions.
diff --git 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 <RecommendedBadge href="#" title={_('The Joplin team has vetted this plugin and it meets our standards for security and performance.')} onClick={onRecommendedClick}><i className="fas fa-crown"></i></RecommendedBadge>;
 	}
 
+	const nameLabelId = useId();
+
 	return (
-		<CellRoot isCompatible={props.isCompatible}>
+		<CellRoot isCompatible={props.isCompatible} role='group' aria-labelledby={nameLabelId}>
 			<CellTop>
-				<StyledNameAndVersion mb={'5px'}><StyledName onClick={onNameClick} href="#" style={{ marginRight: 5 }}>{item.manifest.name} {item.deleted ? _('(%s)', 'Deleted') : ''}</StyledName><StyledVersion>v{item.manifest.version}</StyledVersion></StyledNameAndVersion>
+				<StyledNameAndVersion mb={'5px'}>
+					<StyledName onClick={onNameClick} href="#" style={{ marginRight: 5 }} id={nameLabelId}>
+						{item.manifest.name} {item.deleted ? _('(%s)', 'Deleted') : ''}
+					</StyledName>
+					<StyledVersion>v{item.manifest.version}</StyledVersion>
+				</StyledNameAndVersion>
 				{renderToggleButton()}
 				{renderRecommendedBadge()}
 			</CellTop>

diff --git 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 (
 		<ReactToggleButton
 			value={props.value}
@@ -33,6 +47,7 @@ export default function(props: Props) {
 			}}
 			inactiveLabel=""
 			activeLabel=""
+			passThroughInputProps={passThroughInputProps}
 		/>
 	);
 }