Various accessibility fixes.

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"

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;

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}

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}
       />

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}

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>

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}

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 ? (

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}
+        />
       </>
     );
   }

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>
     );
   }

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;
@@ -48,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} />
@@ -60,6 +65,7 @@ class BrowserContextGame extends React.PureComponent<Props> {
           huge
           emphasized
           icon="cog"
+          hint={_("icon.manage")}
           onClick={this.onManage}
         />
       </BrowserContextDiv>

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>

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>
       );
     }

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}

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";
@@ -92,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}
       >
@@ -165,7 +168,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 />
           )}

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

src/static/locales/en.json

@@ -701,5 +701,22 @@
   "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",
+
+  "region.prime_download": "Prime download",
+  "region.game": "Game"
 }