From f2fd09f4d00a79c49b86867b6101bd6be76ff35e Mon Sep 17 00:00:00 2001
From: Nolan Darilek <nolan@thewordnerd.info>
Date: Mon, 16 Aug 2021 14:53:23 -0500
Subject: [PATCH 1/5] Various accessibility fixes.

* Add `aria-label` to `Icon`
* Set `tabIndex`, `role` and `aria-label` on `Button` and `IconButton`
* Set `role` and `tabIndex` on `Link`
* Label bunches of unlabeled icon-only buttons.
* Make login screen keyboard-navigable.
* Make app logo keyboard-accessible.
* Add `alt` attribute to `SmartImage` and set on cover images
* Add navigation role to sidebar.
---
 src/renderer/basics/Button.tsx                   |  2 ++
 src/renderer/basics/Cover/SmartImage.tsx         |  1 +
 src/renderer/basics/Cover/index.tsx              |  2 ++
 src/renderer/basics/Icon.tsx                     |  1 +
 src/renderer/basics/IconButton.tsx               |  4 ++++
 src/renderer/basics/Link.tsx                     |  2 +-
 src/renderer/basics/NavigationBar.tsx            | 11 +++++++++--
 src/renderer/basics/TitleBar/index.tsx           | 16 +++++++++++++---
 src/renderer/pages/BrowserPage/BrowserBar.tsx    |  7 ++++++-
 .../BrowserContext/BrowserContextGame.tsx        |  2 ++
 .../RememberedProfiles/RememberedProfile.tsx     |  7 +++++--
 src/renderer/scenes/HubScene/Sidebar/Logo.tsx    |  2 ++
 .../PrimeDownload/PrimeDownloadContents.tsx      |  3 ++-
 src/renderer/scenes/HubScene/Sidebar/Sidebar.tsx |  2 +-
 src/static/locales/en.json                       | 16 +++++++++++++++-
 15 files changed, 66 insertions(+), 12 deletions(-)

diff --git a/src/renderer/basics/Button.tsx b/src/renderer/basics/Button.tsx
index 7f0eadcdd..86ffc81ce 100644
--- a/src/renderer/basics/Button.tsx
+++ b/src/renderer/basics/Button.tsx
@@ -117,6 +117,8 @@ class Button extends React.PureComponent<Props, any> {
 
     return (
       <ButtonDiv
+        role="button"
+        tabIndex={0}
         onClick={disabled ? null : onClick}
         data-rh={hint ? JSON.stringify(hint) : null}
         data-rh-at="top"
diff --git a/src/renderer/basics/Cover/SmartImage.tsx b/src/renderer/basics/Cover/SmartImage.tsx
index 1a295b2e9..4c004625f 100644
--- a/src/renderer/basics/Cover/SmartImage.tsx
+++ b/src/renderer/basics/Cover/SmartImage.tsx
@@ -27,6 +27,7 @@ class Image extends React.PureComponent<Props> {
 
 interface Props {
   src?: string;
+  alt?: string;
   className?: string;
   onLoadStart: () => void;
   onLoadEnd: () => void;
diff --git a/src/renderer/basics/Cover/index.tsx b/src/renderer/basics/Cover/index.tsx
index ff0a517f9..d284e6fd3 100644
--- a/src/renderer/basics/Cover/index.tsx
+++ b/src/renderer/basics/Cover/index.tsx
@@ -1,5 +1,6 @@
 import classNames from "classnames";
 import React from "react";
+import { _ } from "renderer/t";
 import GifMarker from "renderer/basics/Cover/GifMarker";
 import LoadingCircle from "renderer/basics/LoadingCircle";
 import withHover, { HoverProps } from "renderer/hocs/withHover";
@@ -58,6 +59,7 @@ class Cover extends React.PureComponent<Props, State> {
         {url ? (
           <SmartImage
             src={url}
+            alt={_("alt.cover_image")}
             onLoadStart={this.onLoadStart}
             onLoadEnd={this.onLoadEnd}
             onError={this.onError}
diff --git a/src/renderer/basics/Icon.tsx b/src/renderer/basics/Icon.tsx
index 3dca5874a..d9e1bfd83 100644
--- a/src/renderer/basics/Icon.tsx
+++ b/src/renderer/basics/Icon.tsx
@@ -19,6 +19,7 @@ class Icon extends React.PureComponent<Props> {
       <span
         className={finalClassName}
         data-rh={hint ? JSON.stringify(hint) : null}
+        aria-label={hint ? JSON.stringify(hint) : null}
         data-rh-at="top"
         {...restProps}
       />
diff --git a/src/renderer/basics/IconButton.tsx b/src/renderer/basics/IconButton.tsx
index e49d3a9dc..893982cba 100644
--- a/src/renderer/basics/IconButton.tsx
+++ b/src/renderer/basics/IconButton.tsx
@@ -70,6 +70,7 @@ class IconButton extends React.PureComponent<Props> {
 
     return (
       <IconButtonDiv
+        tabIndex={0}
         className={classNames(className, {
           disabled,
           big,
@@ -79,6 +80,9 @@ class IconButton extends React.PureComponent<Props> {
         })}
         data-rh={hint ? JSON.stringify(hint) : null}
         data-rh-at={hintPosition}
+        aria-label={hint ? JSON.stringify(hint) : null}
+        aria-disabled={disabled}
+        role="button"
         {...restProps}
       >
         {typeof icon === "string" ? <Icon icon={icon} /> : icon}
diff --git a/src/renderer/basics/Link.tsx b/src/renderer/basics/Link.tsx
index 9086d9783..d2cfc96dc 100644
--- a/src/renderer/basics/Link.tsx
+++ b/src/renderer/basics/Link.tsx
@@ -15,7 +15,7 @@ class Link extends React.PureComponent<Props> {
     const { label, children, ...restProps } = this.props;
 
     return (
-      <LinkSpan {...restProps}>
+      <LinkSpan role="link" tabIndex="0" {...restProps}>
         {label}
         {children}
       </LinkSpan>
diff --git a/src/renderer/basics/NavigationBar.tsx b/src/renderer/basics/NavigationBar.tsx
index fdbf06083..88da17c97 100644
--- a/src/renderer/basics/NavigationBar.tsx
+++ b/src/renderer/basics/NavigationBar.tsx
@@ -13,6 +13,7 @@ import IconButton from "renderer/basics/IconButton";
 import { hook, hookWithProps } from "renderer/hocs/hook";
 import * as styles from "renderer/styles";
 import styled, { css } from "renderer/styles";
+import { _ } from "renderer/t";
 import watching, { Watcher } from "renderer/hocs/watching";
 import { withTab } from "renderer/hocs/withTab";
 import {
@@ -183,12 +184,14 @@ class NavigationBar extends React.PureComponent<Props, State> {
       <NavigationBarDiv className={classNames({ loading })}>
         <IconButton
           icon="arrow-left"
+          hint={_("icon.back")}
           disabled={!canGoBack}
           onClick={this.goBack}
           onContextMenu={this.showBackHistory}
         />
         <IconButton
           icon="arrow-right"
+          hint={_("icon.next")}
           disabled={!canGoForward}
           onClick={this.goForward}
           onContextMenu={this.showForwardHistory}
@@ -210,9 +213,13 @@ class NavigationBar extends React.PureComponent<Props, State> {
     return (
       <>
         {loading ? (
-          <IconButton icon="cross" onClick={this.stop} />
+          <IconButton icon="cross" hint={_("icon.stop")} onClick={this.stop} />
         ) : (
-          <IconButton icon="repeat" onClick={this.reload} />
+          <IconButton
+            icon="repeat"
+            hint={_("icon.reload")}
+            onClick={this.reload}
+          />
         )}
         <AddressWrapper className={classNames({ editing: editingAddress })}>
           {editingAddress ? (
diff --git a/src/renderer/basics/TitleBar/index.tsx b/src/renderer/basics/TitleBar/index.tsx
index ce1e9ef22..ce7cd2a45 100644
--- a/src/renderer/basics/TitleBar/index.tsx
+++ b/src/renderer/basics/TitleBar/index.tsx
@@ -11,7 +11,7 @@ import UserMenu from "renderer/basics/TitleBar/UserMenu";
 import { hookWithProps } from "renderer/hocs/hook";
 import { modals } from "common/modals";
 import styled, * as styles from "renderer/styles";
-import { T } from "renderer/t";
+import { _, T } from "renderer/t";
 import { isSecretClick } from "common/helpers/secret-click";
 
 const DraggableDiv = styled.div`
@@ -128,14 +128,24 @@ class TitleBar extends React.PureComponent<Props> {
       <>
         {secondary ? null : (
           <>
-            <WindowButton icon="minus" onClick={this.minimizeClick} />
+            <WindowButton
+              icon="minus"
+              aria-label={_("icon.minimize")}
+              onClick={this.minimizeClick}
+            />
             <WindowButton
               icon={maximized ? "window-restore" : "window-maximize"}
+              aria-label={maximized ? _("icon.restore") : _("icon.maximize")}
               onClick={this.maximizeRestoreClick}
             />
           </>
         )}
-        <WindowButton className="exit" icon="cross" onClick={this.closeClick} />
+        <WindowButton
+          className="exit"
+          icon="cross"
+          aria-label={_("icon.close")}
+          onClick={this.closeClick}
+        />
       </>
     );
   }
diff --git a/src/renderer/pages/BrowserPage/BrowserBar.tsx b/src/renderer/pages/BrowserPage/BrowserBar.tsx
index b6392b973..e4ffde221 100644
--- a/src/renderer/pages/BrowserPage/BrowserBar.tsx
+++ b/src/renderer/pages/BrowserPage/BrowserBar.tsx
@@ -6,13 +6,18 @@ import FiltersContainer from "renderer/basics/FiltersContainer";
 import IconButton from "renderer/basics/IconButton";
 import { hookWithProps } from "renderer/hocs/hook";
 import { withTab } from "renderer/hocs/withTab";
+import { _ } from "renderer/t";
 
 class BrowserBar extends React.PureComponent<Props> {
   render() {
     const { loading } = this.props;
     return (
       <FiltersContainer loading={loading}>
-        <IconButton icon="more_vert" onClick={this.onMore} />
+        <IconButton
+          icon="more_vert"
+          hint={_("icon.more")}
+          onClick={this.onMore}
+        />
       </FiltersContainer>
     );
   }
diff --git a/src/renderer/pages/BrowserPage/BrowserContext/BrowserContextGame.tsx b/src/renderer/pages/BrowserPage/BrowserContext/BrowserContextGame.tsx
index dec064cf6..11750d7c9 100644
--- a/src/renderer/pages/BrowserPage/BrowserContext/BrowserContextGame.tsx
+++ b/src/renderer/pages/BrowserPage/BrowserContext/BrowserContextGame.tsx
@@ -15,6 +15,7 @@ import StandardGameCover, {
   standardCoverWidth,
 } from "renderer/pages/common/StandardGameCover";
 import styled from "renderer/styles";
+import { _ } from "renderer/t";
 
 const Spacer = styled.div`
   flex-basis: 16px;
@@ -60,6 +61,7 @@ class BrowserContextGame extends React.PureComponent<Props> {
           huge
           emphasized
           icon="cog"
+          hint={_("icon.manage")}
           onClick={this.onManage}
         />
       </BrowserContextDiv>
diff --git a/src/renderer/scenes/GateScene/RememberedProfiles/RememberedProfile.tsx b/src/renderer/scenes/GateScene/RememberedProfiles/RememberedProfile.tsx
index 99746d49b..c05321c90 100644
--- a/src/renderer/scenes/GateScene/RememberedProfiles/RememberedProfile.tsx
+++ b/src/renderer/scenes/GateScene/RememberedProfiles/RememberedProfile.tsx
@@ -6,7 +6,7 @@ import TimeAgo from "renderer/basics/TimeAgo";
 import { hook } from "renderer/hocs/hook";
 import { modals } from "common/modals";
 import styled, * as styles from "renderer/styles";
-import { T } from "renderer/t";
+import { _, T, _ } from "renderer/t";
 import { Dispatch } from "common/types";
 import { getUserCoverURL } from "common/constants/get-user-cover-url";
 
@@ -24,7 +24,9 @@ class RememberedProfile extends React.PureComponent<Props> {
       >
         <img className="avatar" src={coverUrl} />
         <div className="rest">
-          <p className="username">{displayName || username}</p>
+          <p role="button" tabIndex={0} className="username">
+            {displayName || username}
+          </p>
           <p className="last-connected">
             {T(["login.remembered_session.last_connected"])}{" "}
             <TimeAgo date={profile.lastConnected} />
@@ -38,6 +40,7 @@ class RememberedProfile extends React.PureComponent<Props> {
           <IconButton
             icon="cross"
             className="forget-profile"
+            hint={_("icon.forget_profile")}
             onClick={this.onForget}
           />
         </span>
diff --git a/src/renderer/scenes/HubScene/Sidebar/Logo.tsx b/src/renderer/scenes/HubScene/Sidebar/Logo.tsx
index 534d6d820..ffb8ed5a5 100644
--- a/src/renderer/scenes/HubScene/Sidebar/Logo.tsx
+++ b/src/renderer/scenes/HubScene/Sidebar/Logo.tsx
@@ -27,6 +27,8 @@ class Logo extends React.PureComponent<Props> {
 
     return (
       <LogoDiv
+        role="button"
+        tabIndex="0"
         title={appVersion}
         className={classNames("logo-div")}
         onClick={this.onClick}
diff --git a/src/renderer/scenes/HubScene/Sidebar/PrimeDownload/PrimeDownloadContents.tsx b/src/renderer/scenes/HubScene/Sidebar/PrimeDownload/PrimeDownloadContents.tsx
index b9b73387a..fe0250fed 100644
--- a/src/renderer/scenes/HubScene/Sidebar/PrimeDownload/PrimeDownloadContents.tsx
+++ b/src/renderer/scenes/HubScene/Sidebar/PrimeDownload/PrimeDownloadContents.tsx
@@ -5,6 +5,7 @@ import { formatTask, taskIcon } from "common/format/operation";
 import { Dispatch, ProgressInfo, TaskName } from "common/types";
 import { ambientWind } from "common/util/navigation";
 import React from "react";
+import { _ } from "renderer/t";
 import DownloadProgressSpan from "renderer/basics/DownloadProgressSpan";
 import Icon from "renderer/basics/Icon";
 import IconButton from "renderer/basics/IconButton";
@@ -165,7 +166,7 @@ class PrimeDownloadContents extends React.PureComponent<Props> {
       <>
         <ProgressContainer>
           {caveId ? (
-            <IconButton icon="play2" enormous />
+            <IconButton icon="play2" aria-label={_("icon.play")} enormous />
           ) : (
             <LoadingCircle progress={progress.progress} huge />
           )}
diff --git a/src/renderer/scenes/HubScene/Sidebar/Sidebar.tsx b/src/renderer/scenes/HubScene/Sidebar/Sidebar.tsx
index 456d727d9..f1d6ba49a 100644
--- a/src/renderer/scenes/HubScene/Sidebar/Sidebar.tsx
+++ b/src/renderer/scenes/HubScene/Sidebar/Sidebar.tsx
@@ -131,7 +131,7 @@ class Sidebar extends React.PureComponent<Props, State> {
     const { enableTabs } = this.props;
 
     return (
-      <SidebarDiv id="sidebar">
+      <SidebarDiv id="sidebar" role="navigation">
         <Logo />
 
         <Search />
diff --git a/src/static/locales/en.json b/src/static/locales/en.json
index 4bb42b331..35c0d4896 100644
--- a/src/static/locales/en.json
+++ b/src/static/locales/en.json
@@ -701,5 +701,19 @@
   "plan_install.disk_space_required": "Disk space required",
   "plan_install.disk_space_available": "Disk space available",
 
-  "empty_state.nothing_to_see_here": "Nothing to see here"
+  "empty_state.nothing_to_see_here": "Nothing to see here",
+
+  "icon.back": "Back",
+  "icon.next": "Next",
+  "icon.reload": "Reload",
+  "icon.minimize": "Minimize",
+  "icon.maximize": "Maximize",
+  "icon.restore": "Restore",
+  "icon.close": "Close",
+  "icon.play": "Play",
+  "icon.forget_profile": "Forget profile",
+  "icon.manage": "Manage",
+  "icon.more": "More...",
+
+  "alt.cover_image": "Cover image"
 }

From 0dfc6d2299bf429a21f51d326f3c26199d0ca0b3 Mon Sep 17 00:00:00 2001
From: Nolan Darilek <nolan@thewordnerd.info>
Date: Wed, 18 Aug 2021 08:42:31 -0500
Subject: [PATCH 2/5] Use <main> landmark to make jumping past navigation items
 easier.

---
 src/renderer/scenes/HubScene/Meats/Meat.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/renderer/scenes/HubScene/Meats/Meat.tsx b/src/renderer/scenes/HubScene/Meats/Meat.tsx
index 1122e219c..74fc3225e 100644
--- a/src/renderer/scenes/HubScene/Meats/Meat.tsx
+++ b/src/renderer/scenes/HubScene/Meats/Meat.tsx
@@ -171,14 +171,18 @@ class Meat extends React.PureComponent<Props, State> {
     if (ConcreteMeat) {
       return (
         <>
-          <ConcreteMeat {...this.props} />
+          <main>
+            <ConcreteMeat {...this.props} />
+          </main>
         </>
       );
     } else {
       return (
         <Page>
           <BrowserBar />
-          <div>Invalid url: {JSON.stringify(this.props.url)}</div>
+          <main>
+            <div>Invalid url: {JSON.stringify(this.props.url)}</div>
+          </main>
         </Page>
       );
     }

From 7e59c55fe6473f890aa3119d89dc1a9c24175070 Mon Sep 17 00:00:00 2001
From: Nolan Darilek <nolan@thewordnerd.info>
Date: Wed, 18 Aug 2021 08:49:17 -0500
Subject: [PATCH 3/5] Give 'Prime download' region an ARIA role and label.

---
 .../HubScene/Sidebar/PrimeDownload/PrimeDownloadContents.tsx  | 2 ++
 src/static/locales/en.json                                    | 4 +++-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/renderer/scenes/HubScene/Sidebar/PrimeDownload/PrimeDownloadContents.tsx b/src/renderer/scenes/HubScene/Sidebar/PrimeDownload/PrimeDownloadContents.tsx
index fe0250fed..b3065f449 100644
--- a/src/renderer/scenes/HubScene/Sidebar/PrimeDownload/PrimeDownloadContents.tsx
+++ b/src/renderer/scenes/HubScene/Sidebar/PrimeDownload/PrimeDownloadContents.tsx
@@ -93,6 +93,8 @@ class PrimeDownloadContents extends React.PureComponent<Props> {
     const { game } = this.props;
     return (
       <PrimeDownloadDiv
+        role="region"
+        aria-label={_("region.prime_download")}
         onClick={this.onMainClick}
         onContextMenu={this.onContextMenu}
       >
diff --git a/src/static/locales/en.json b/src/static/locales/en.json
index 35c0d4896..750d1b17f 100644
--- a/src/static/locales/en.json
+++ b/src/static/locales/en.json
@@ -715,5 +715,7 @@
   "icon.manage": "Manage",
   "icon.more": "More...",
 
-  "alt.cover_image": "Cover image"
+  "alt.cover_image": "Cover image",
+
+  "region.prime_download": "Prime download"
 }

From a41d8c20acd315d70f312274fdb07cbdf2ff641f Mon Sep 17 00:00:00 2001
From: Nolan Darilek <nolan@thewordnerd.info>
Date: Wed, 18 Aug 2021 09:38:31 -0500
Subject: [PATCH 4/5] Use progressbar role, providing screen reader feedback of
 download status.

---
 src/renderer/basics/LoadingCircle/index.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/renderer/basics/LoadingCircle/index.tsx b/src/renderer/basics/LoadingCircle/index.tsx
index 3484c84a0..c79d59e2f 100644
--- a/src/renderer/basics/LoadingCircle/index.tsx
+++ b/src/renderer/basics/LoadingCircle/index.tsx
@@ -47,11 +47,19 @@ const CircleContainer = styled.span`
 class LoadingCircle extends React.PureComponent<LoadingCircleProps> {
   render() {
     const { className, progress, bare, wide, huge } = this.props;
+    const percent = progress * 100.0;
 
     return (
-      <CircleContainer className={classNames(className, { bare, wide, huge })}>
+      <CircleContainer
+        role="progressbar"
+        aria-valuenow={percent}
+        aria-valuemin={0}
+        aria-valuemax={100}
+        aria-valuetext={`${Math.trunc(percent)}%`}
+        className={classNames(className, { bare, wide, huge })}
+      >
         <Circle
-          percent={progress > 0 ? progress * 100.0 : 100 / 3}
+          percent={progress > 0 ? percent : 100 / 3}
           trailWidth={3}
           trailColor="#e0e0e2"
           strokeWidth={15}

From 2462e83d7db97cd1e9c67a9e002449d3286a726e Mon Sep 17 00:00:00 2001
From: Nolan Darilek <nolan@thewordnerd.info>
Date: Fri, 27 Aug 2021 07:53:46 -0500
Subject: [PATCH 5/5] Add separate labeled region for quickly navigating to
 game actions.

---
 .../pages/BrowserPage/BrowserContext/BrowserContextGame.tsx | 6 +++++-
 src/static/locales/en.json                                  | 3 ++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/renderer/pages/BrowserPage/BrowserContext/BrowserContextGame.tsx b/src/renderer/pages/BrowserPage/BrowserContext/BrowserContextGame.tsx
index 11750d7c9..81dffb76d 100644
--- a/src/renderer/pages/BrowserPage/BrowserContext/BrowserContextGame.tsx
+++ b/src/renderer/pages/BrowserPage/BrowserContext/BrowserContextGame.tsx
@@ -49,7 +49,11 @@ class BrowserContextGame extends React.PureComponent<Props> {
     const { game, status } = this.props;
 
     return (
-      <BrowserContextDiv onContextMenu={this.onContextMenu}>
+      <BrowserContextDiv
+        role="region"
+        aria-label={_("region.game")}
+        onContextMenu={this.onContextMenu}
+      >
         <SmallerGameCover game={game} showInfo={false} />
         <Spacer />
         <GameStats game={game} status={status} />
diff --git a/src/static/locales/en.json b/src/static/locales/en.json
index 750d1b17f..81961d550 100644
--- a/src/static/locales/en.json
+++ b/src/static/locales/en.json
@@ -717,5 +717,6 @@
 
   "alt.cover_image": "Cover image",
 
-  "region.prime_download": "Prime download"
+  "region.prime_download": "Prime download",
+  "region.game": "Game"
 }