fix: make close button focusable (#1092)

electron · Jun 1, 2022 · d3a6132 · d3a6132
1 parent db31829
commit d3a6132
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 14 deletions.
diff --git a/src/less/components/settings.less b/src/less/components/settings.less
@@ -126,6 +126,8 @@
     cursor: pointer;
     border-radius: 15px;
     color: var(--text-color-3);
+    padding: 0 0;
+    border: 0;
 
     &:hover {
       color: @text-color-1;

diff --git a/src/renderer/components/settings.tsx b/src/renderer/components/settings.tsx
@@ -129,9 +129,12 @@ export const Settings = observer(
             <ul>{this.renderOptions()}</ul>
           </div>
           <div className="settings-content">
-            <div className="settings-close" onClick={appState.toggleSettings}>
+            <button
+              className="settings-close"
+              onClick={appState.toggleSettings}
+            >
               <Icon icon="cross" iconSize={25} />
-            </div>
+            </button>
             {this.renderContent()}
           </div>
         </div>

diff --git a/tests/renderer/components/__snapshots__/settings-spec.tsx.snap b/tests/renderer/components/__snapshots__/settings-spec.tsx.snap
@@ -61,14 +61,14 @@ exports[`Settings component renders only the menu if page unknown 1`] = `
   <div
     className="settings-content"
   >
-    <div
+    <button
       className="settings-close"
     >
       <Blueprint3.Icon
         icon="cross"
         iconSize={25}
       />
-    </div>
+    </button>
   </div>
 </div>
 `;
@@ -134,14 +134,14 @@ exports[`Settings component renders the Credits page after a click 1`] = `
   <div
     className="settings-content"
   >
-    <div
+    <button
       className="settings-close"
     >
       <Blueprint3.Icon
         icon="cross"
         iconSize={25}
       />
-    </div>
+    </button>
     <settings-credits
       appState={
         Object {
@@ -214,14 +214,14 @@ exports[`Settings component renders the Electron page after a click 1`] = `
   <div
     className="settings-content"
   >
-    <div
+    <button
       className="settings-close"
     >
       <Blueprint3.Icon
         icon="cross"
         iconSize={25}
       />
-    </div>
+    </button>
     <settings-electron
       appState={
         Object {
@@ -294,14 +294,14 @@ exports[`Settings component renders the Electron page by default 1`] = `
   <div
     className="settings-content"
   >
-    <div
+    <button
       className="settings-close"
     >
       <Blueprint3.Icon
         icon="cross"
         iconSize={25}
       />
-    </div>
+    </button>
     <settings-general
       appState={
         Object {
@@ -375,14 +375,14 @@ exports[`Settings component renders the Execution page after a click 1`] = `
   <div
     className="settings-content"
   >
-    <div
+    <button
       className="settings-close"
     >
       <Blueprint3.Icon
         icon="cross"
         iconSize={25}
       />
-    </div>
+    </button>
     <ExecutionSettings
       appState={
         Object {
@@ -455,14 +455,14 @@ exports[`Settings component renders the General page after a click 1`] = `
   <div
     className="settings-content"
   >
-    <div
+    <button
       className="settings-close"
     >
       <Blueprint3.Icon
         icon="cross"
         iconSize={25}
       />
-    </div>
+    </button>
     <settings-general
       appState={
         Object {