Add aria-label to buttons only containing an icon

3 files changed, 14 insertions, 4 deletions

diff --git a/gui/src/renderer/components/HeaderBar.tsx b/gui/src/renderer/components/HeaderBar.tsx
index f217e64f28..20045086be 100644
--- a/gui/src/renderer/components/HeaderBar.tsx
+++ b/gui/src/renderer/components/HeaderBar.tsx
@@ -91,7 +91,9 @@ export function HeaderBarSettingsButton() {
   }, [history]);
 
   return (
-    <HeaderBarSettingsButtonContainer onClick={openSettings}>
+    <HeaderBarSettingsButtonContainer
+      onClick={openSettings}
+      aria-label={messages.gettext('Settings')}>
       <ImageView
         height={24}
         width={24}
diff --git a/gui/src/renderer/components/NotificationBanner.tsx b/gui/src/renderer/components/NotificationBanner.tsx
index 0cf3fc07fa..235ab6de2e 100644
--- a/gui/src/renderer/components/NotificationBanner.tsx
+++ b/gui/src/renderer/components/NotificationBanner.tsx
@@ -1,10 +1,13 @@
 import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
 import { colors } from '../../config.json';
+import { messages } from '../../shared/gettext';
 import { InAppNotificationIndicatorType } from '../../shared/notifications/notification';
 import { BlockingButton } from './AppButton';
 import ImageView from './ImageView';
 
+const NOTIFICATION_AREA_ID = 'notification-area';
+
 export const NotificationTitle = styled.span({
   fontFamily: 'Open Sans',
   fontSize: '13px',
@@ -52,7 +55,9 @@ interface INotifcationOpenLinkActionProps {
 export function NotificationOpenLinkAction(props: INotifcationOpenLinkActionProps) {
   return (
     <BlockingButton onClick={props.onClick}>
-      <NotificationOpenLinkActionButton>
+      <NotificationOpenLinkActionButton
+        aria-describedby={NOTIFICATION_AREA_ID}
+        aria-label={messages.gettext('Open URL')}>
         <NotificationOpenLinkActionIcon
           height={12}
           width={12}
@@ -64,7 +69,7 @@ export function NotificationOpenLinkAction(props: INotifcationOpenLinkActionProp
   );
 }
 
-export const NotificationContent = styled.div({
+export const NotificationContent = styled.div.attrs({ id: NOTIFICATION_AREA_ID })({
   display: 'flex',
   flexDirection: 'column',
   flex: 1,
diff --git a/gui/src/renderer/components/TunnelControl.tsx b/gui/src/renderer/components/TunnelControl.tsx
index a36e5b9486..e5f674d7c4 100644
--- a/gui/src/renderer/components/TunnelControl.tsx
+++ b/gui/src/renderer/components/TunnelControl.tsx
@@ -114,7 +114,10 @@ export default class TunnelControl extends React.Component<ITunnelControlProps>
     );
 
     const Reconnect = (props: React.ComponentProps<typeof AppButton.RedTransparentButton>) => (
-      <AppButton.RedTransparentButton onClick={this.props.onReconnect} {...props}>
+      <AppButton.RedTransparentButton
+        onClick={this.props.onReconnect}
+        aria-label={messages.gettext('Reconnect')}
+        {...props}>
         <ImageView height={22} width={22} source="icon-reload" tintColor="white" />
       </AppButton.RedTransparentButton>
     );