diff options
| -rw-r--r-- | gui/src/renderer/components/HeaderBar.tsx | 4 | ||||
| -rw-r--r-- | gui/src/renderer/components/NotificationBanner.tsx | 9 | ||||
| -rw-r--r-- | gui/src/renderer/components/TunnelControl.tsx | 5 |
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> ); |
