self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2025-01-11 18:24:43 +02:00
Code Issues Releases Activity

Mobile: Improve accessibility of side menu (#8839)

Browse Source
This commit is contained in:
Henry Heino 2023-09-11 12:44:15 -07:00 committed by GitHub
parent e041169300
commit 78ffc0bc23
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 22 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
packages/app-mobile/components/side-menu-content.tsx
View File

@ -23,6 +23,7 @@ Icon.loadFont().catch((error: any) => { console.info(error); });
interface Props {
syncStarted: boolean;
themeId: number;
sideMenuVisible: boolean;
// eslint-disable-next-line @typescript-eslint/ban-types -- Old code before rule was applied
dispatch: Function;
collapsedFolderIds: string[];
@ -491,15 +492,29 @@ const SideMenuContentComponent = (props: Props) => {
items = items.concat(folderItems);
}
const isHidden = !props.sideMenuVisible;
const style = {
flex: 1,
borderRightWidth: 1,
borderRightColor: theme.dividerColor,
backgroundColor: theme.backgroundColor,
// Have the UI reflect whether the View is hidden to the screen reader.
// This way, there will be visual feedback if isHidden is incorrect.
opacity: isHidden ? 0.5 : undefined,
};
// Note: iOS uses accessibilityElementsHidden and Android uses importantForAccessibility
// to hide elements from the screenreader.
return (
<View style={style}>
<View
style={style}
accessibilityElementsHidden={isHidden}
importantForAccessibility={isHidden ? 'no-hide-descendants' : undefined}
>
<View style={{ flex: 1, opacity: props.opacity }}>
<ScrollView scrollsToTop={false} style={styles_.menu}>
{items}
@ -520,6 +535,7 @@ export default connect((state: AppState) => {
notesParentType: state.notesParentType,
locale: state.settings.locale,
themeId: state.settings.theme,
sideMenuVisible: state.showSideMenu,
// Don't do the opacity animation as it means re-rendering the list multiple times
// opacity: state.sideMenuOpenPercent,
collapsedFolderIds: state.collapsedFolderIds,

7
packages/app-mobile/root.tsx
View File

@ -22,14 +22,14 @@ import handleShared from './utils/shareHandler';
import uuid from '@joplin/lib/uuid';
import { loadKeychainServiceAndSettings } from '@joplin/lib/services/SettingUtils';
import KeychainServiceDriverMobile from '@joplin/lib/services/keychain/KeychainServiceDriver.mobile';
import { setLocale } from '@joplin/lib/locale';
import { _, setLocale } from '@joplin/lib/locale';
import SyncTargetJoplinServer from '@joplin/lib/SyncTargetJoplinServer';
import SyncTargetJoplinCloud from '@joplin/lib/SyncTargetJoplinCloud';
import SyncTargetOneDrive from '@joplin/lib/SyncTargetOneDrive';
import initProfile from '@joplin/lib/services/profileConfig/initProfile';
const VersionInfo = require('react-native-version-info').default;
const { Keyboard, BackHandler, Animated, View, StatusBar, Platform, Dimensions } = require('react-native');
import { AppState as RNAppState, EmitterSubscription, Linking, NativeEventSubscription, Appearance } from 'react-native';
import { AppState as RNAppState, EmitterSubscription, Linking, NativeEventSubscription, Appearance, AccessibilityInfo } from 'react-native';
import getResponsiveValue from './components/getResponsiveValue';
import NetInfo from '@react-native-community/netinfo';
const DropdownAlert = require('react-native-dropdownalert').default;
@ -984,6 +984,9 @@ class AppComponent extends React.Component {
this.props.dispatch({
type: isOpen ? 'SIDE_MENU_OPEN' : 'SIDE_MENU_CLOSE',
});
AccessibilityInfo.announceForAccessibility(
isOpen ? _('Side menu opened') : _('Side menu closed')
);
}
private getSideMenuWidth = () => {