Add a button around the close icon in settings

2 files changed, 19 insertions, 8 deletions

diff --git a/gui/src/renderer/components/NavigationBar.tsx b/gui/src/renderer/components/NavigationBar.tsx
index aaa53e99a7..28b6178397 100644
--- a/gui/src/renderer/components/NavigationBar.tsx
+++ b/gui/src/renderer/components/NavigationBar.tsx
@@ -1,10 +1,12 @@
 import React, { useCallback, useContext, useLayoutEffect, useRef, useState } from 'react';
 import { colors } from '../../config.json';
+import { messages } from '../../shared/gettext';
 import CustomScrollbars, { IScrollEvent } from './CustomScrollbars';
 import {
   StyledBackBarItemButton,
   StyledBackBarItemIcon,
   StyledBackBarItemLabel,
+  StyledCloseBarItemButton,
   StyledCloseBarItemIcon,
   StyledNavigationBar,
   StyledNavigationBarSeparator,
@@ -239,14 +241,15 @@ export function CloseBarItem(props: ICloseBarItemProps) {
   // title bar.
   const iconName = process.platform === 'linux' ? 'icon-close-down' : 'icon-close';
   return (
-    <StyledCloseBarItemIcon
-      height={24}
-      width={24}
-      source={iconName}
-      onClick={props.action}
-      tintColor={colors.white60}
-      tintHoverColor={colors.white80}
-    />
+    <StyledCloseBarItemButton aria-label={messages.gettext('Close')} onClick={props.action}>
+      <StyledCloseBarItemIcon
+        height={24}
+        width={24}
+        source={iconName}
+        tintColor={colors.white60}
+        tintHoverColor={colors.white80}
+      />
+    </StyledCloseBarItemButton>
   );
 }
 
diff --git a/gui/src/renderer/components/NavigationBarStyles.tsx b/gui/src/renderer/components/NavigationBarStyles.tsx
index 9fd837bb0f..c141f4cfed 100644
--- a/gui/src/renderer/components/NavigationBarStyles.tsx
+++ b/gui/src/renderer/components/NavigationBarStyles.tsx
@@ -65,6 +65,14 @@ export const StyledTitleBarItemMeasuringLabel = styled(StyledTitleBarItemLabel)(
   opacity: 0,
 });
 
+export const StyledCloseBarItemButton = styled.button({
+  borderWidth: 0,
+  padding: 0,
+  margin: 0,
+  cursor: 'default',
+  backgroundColor: 'transparent',
+});
+
 export const StyledCloseBarItemIcon = styled(ImageView)({
   flex: 0,
 });