Add aria-label to buttons only containing an icon

1 files changed, 7 insertions, 2 deletions

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,