self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2025-07-16 00:14:34 +02:00
Code Issues Releases Activity

Desktop: Accessibility: Improve settings screen keyboard navigation and screen reader accessibility (#10812)

Browse Source
This commit is contained in:
Henry Heino
2024-08-02 06:49:15 -07:00
committed by GitHub
parent 65ef700fdc
commit 14cc053094
29 changed files with 795 additions and 498 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
packages/app-desktop/gui/ConfigScreen/controls/plugins/PluginBox.tsx
View File

@ -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>