fix(a11y): toolbar and main content quick-access keyboard shortcut la…

…ndmark labels, see #155 (comment)
edrlab · Mar 3, 2020 · afa6827 · afa6827
1 parent 2ac8e5b
commit afa6827
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 16 deletions.
diff --git a/src/renderer/library/components/layout/LibraryLayout.tsx b/src/renderer/library/components/layout/LibraryLayout.tsx
@@ -13,6 +13,9 @@ import { RouteComponentProps, withRouter } from "react-router-dom";
 import { _APP_NAME } from "readium-desktop/preprocessor-directives";
 import * as styles2 from "readium-desktop/renderer/assets/styles/myBooks.css";
 import * as styles from "readium-desktop/renderer/assets/styles/settings.css";
+import {
+    TranslatorProps, withTranslator,
+} from "readium-desktop/renderer/common/components/hoc/translator";
 import {
     ensureKeyboardListenerIsInstalled, registerKeyboardListener, unregisterKeyboardListener,
 } from "readium-desktop/renderer/common/keyboard";
@@ -23,7 +26,7 @@ import LibraryHeader from "./LibraryHeader";
 const capitalizedAppName = _APP_NAME.charAt(0).toUpperCase() + _APP_NAME.substring(1);
 
 // tslint:disable-next-line: no-empty-interface
-interface IBaseProps {
+interface IBaseProps extends TranslatorProps {
     secondaryHeader?: React.ReactElement;
     title?: string;
     mainClassName?: string;
@@ -90,26 +93,27 @@ class LibraryLayout extends React.Component<IProps, undefined> {
 
         return (
             <HelmetProvider>
-                <div>
-                    <Helmet>
-                        <title>{ helmetTitle }</title>
-                    </Helmet>
+                <Helmet>
+                    <title>{ helmetTitle }</title>
+                </Helmet>
+                <div role="region" aria-label={this.props.__("accessibility.toolbar")}>
                     <a
                         ref={this.refToolbar}
                         id="main-toolbar"
-                        aria-hidden
+                        title={this.props.__("accessibility.toolbar")}
                         tabIndex={-1}></a>
                     <LibraryHeader />
                     { this.props.secondaryHeader }
                     <main
                         id="main"
-                        className={classNames(styles.main, styles2.main, this.props.mainClassName)}
                         role="main"
+                        aria-label={this.props.__("accessibility.mainContent")}
+                        className={classNames(styles.main, styles2.main, this.props.mainClassName)}
                     >
                         <a
                             ref={this.fastLinkRef}
                             id="main-content"
-                            aria-hidden
+                            title={this.props.__("accessibility.mainContent")}
                             tabIndex={-1}></a>
                         { this.props.children }
                     </main>
@@ -135,4 +139,4 @@ const mapStateToProps = (state: ILibraryRootState, _props: IBaseProps) => ({
     keyboardShortcuts: state.keyboard.shortcuts,
 });
 
-export default connect(mapStateToProps)(withRouter(LibraryLayout));
+export default connect(mapStateToProps)(withRouter(withTranslator(LibraryLayout)));
diff --git a/src/renderer/reader/components/Reader.tsx b/src/renderer/reader/components/Reader.tsx
@@ -519,11 +519,11 @@ class Reader extends React.Component<IProps, IState> {
         };
 
         return (
-                <div>
+                <div role="region" aria-label={this.props.__("accessibility.toolbar")}>
                     <a
                         ref={this.refToolbar}
                         id="main-toolbar"
-                        aria-hidden
+                        title={this.props.__("accessibility.toolbar")}
                         tabIndex={-1}></a>
                     <SkipLink
                         className={styles.skip_link}
@@ -557,11 +557,12 @@ class Reader extends React.Component<IProps, IState> {
                                 <main
                                     id="main"
                                     role="main"
+                                    aria-label={this.props.__("accessibility.mainContent")}
                                     className={styles.publication_viewport_container}>
                                     <a
                                         ref={this.fastLinkRef}
                                         id="main-content"
-                                        aria-hidden
+                                        title={this.props.__("accessibility.mainContent")}
                                         tabIndex={-1}></a>
                                     <div id="publication_viewport" className={styles.publication_viewport}> </div>
                                 </main>

diff --git a/src/resources/locales/de.json b/src/resources/locales/de.json
@@ -5,9 +5,11 @@
         "homeMenu": "Startmenü",
         "importFile": "Importieren einer EPUB-Datei",
         "leftSlideButton": "Scrolle nach links unten",
+        "mainContent": "hauptinhalt",
         "rightSlideButton": "Scrolle nach rechts unten",
         "searchBook": "Suche nach einem Buch, einem Tag oder einer Art von Literatur",
-        "skipLink": "Gehe zum Inhalt"
+        "skipLink": "Gehe zum Inhalt",
+        "toolbar": "symbolleiste"
     },
     "app": {
         "edit": {

diff --git a/src/resources/locales/en.json b/src/resources/locales/en.json
@@ -5,9 +5,11 @@
         "homeMenu": "Reading view menu",
         "importFile": "Import a publication",
         "leftSlideButton": "Slide the list to the left",
+        "mainContent": "main content",
         "rightSlideButton": "Slide the list to the right",
         "searchBook": "Search by title",
-        "skipLink": "Skip to content"
+        "skipLink": "Skip to content",
+        "toolbar": "toolbar"
     },
     "app": {
         "edit": {

diff --git a/src/resources/locales/fr.json b/src/resources/locales/fr.json
@@ -5,9 +5,11 @@
         "homeMenu": "Menu principal",
         "importFile": "Importer un fichier epub",
         "leftSlideButton": "Faire défiler la liste vers la gauche",
+        "mainContent": "contenu principal",
         "rightSlideButton": "Faire défiler la liste vers la droite",
         "searchBook": "Rechercher un livre, un tag, ou un type de littérature",
-        "skipLink": "Aller au contenu"
+        "skipLink": "Aller au contenu",
+        "toolbar": "barre d'outils"
     },
     "app": {
         "edit": {

diff --git a/src/typings/en.translation.d.ts b/src/typings/en.translation.d.ts
@@ -6,18 +6,22 @@ declare namespace typed_i18n {
   readonly "homeMenu": string,
   readonly "importFile": string,
   readonly "leftSlideButton": string,
+  readonly "mainContent": string,
   readonly "rightSlideButton": string,
   readonly "searchBook": string,
-  readonly "skipLink": string
+  readonly "skipLink": string,
+  readonly "toolbar": string
 };
   (_: "accessibility.bookMenu", __?: {}): string;
   (_: "accessibility.closeDialog", __?: {}): string;
   (_: "accessibility.homeMenu", __?: {}): string;
   (_: "accessibility.importFile", __?: {}): string;
   (_: "accessibility.leftSlideButton", __?: {}): string;
+  (_: "accessibility.mainContent", __?: {}): string;
   (_: "accessibility.rightSlideButton", __?: {}): string;
   (_: "accessibility.searchBook", __?: {}): string;
   (_: "accessibility.skipLink", __?: {}): string;
+  (_: "accessibility.toolbar", __?: {}): string;
   (_: "app", __?: {}): {
   readonly "edit": {
     readonly "copy": string,