self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2025-07-13 00:10:37 +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

15
packages/app-desktop/gui/EncryptionConfigScreen/EncryptionConfigScreen.tsx
View File

@ -10,7 +10,7 @@ import { MasterKeyEntity } from '@joplin/lib/services/e2ee/types';
import { getEncryptionEnabled, masterKeyEnabled, SyncInfo } from '@joplin/lib/services/synchronizer/syncInfoUtils';
import { getDefaultMasterKey, getMasterPasswordStatusMessage, masterPasswordIsValid, toggleAndSetupEncryption } from '@joplin/lib/services/e2ee/utils';
import Button, { ButtonLevel } from '../Button/Button';
import { useCallback, useMemo, useState } from 'react';
import { useCallback, useId, useMemo, useState } from 'react';
import { connect } from 'react-redux';
import { AppState } from '../../app.reducer';
import Setting from '@joplin/lib/models/Setting';
@ -350,7 +350,7 @@ const EncryptionConfigScreen = (props: Props) => {
t = `<p>${t}</p>`;
return (
<div>
<>
<h2>{_('Re-encryption')}</h2>
<p style={theme.textStyle} dangerouslySetInnerHTML={{ __html: t }}></p>
<span style={{ marginRight: 10 }}>
@ -358,7 +358,7 @@ const EncryptionConfigScreen = (props: Props) => {
</span>
{ !props.shouldReencrypt ? null : <button onClick={() => dontReencryptData()} style={theme.buttonStyle}>{_('Ignore')}</button> }
</div>
</>
);
};
@ -368,6 +368,7 @@ const EncryptionConfigScreen = (props: Props) => {
setShowAdvanced(!showAdvanced);
}, [showAdvanced]);
const advancedSettingsId = useId();
const renderAdvancedSection = () => {
const reEncryptSection = renderReencryptData();
@ -378,8 +379,12 @@ const EncryptionConfigScreen = (props: Props) => {
<div>
<ToggleAdvancedSettingsButton
onClick={toggleAdvanced}
advancedSettingsVisible={showAdvanced}/>
{ showAdvanced ? reEncryptSection : null }
advancedSettingsVisible={showAdvanced}
aria-controls={advancedSettingsId}
/>
<div id={advancedSettingsId}>
{ showAdvanced ? reEncryptSection : null }
</div>
</div>
);
};