307 add visual focus to all clickable elements (#344)

Makes focus indicators consistent, and adds them back in where they were disabled. --------- Co-authored-by: Chris Wilton-Magras <[email protected]>
ScottLogic · Apr 8, 2024 · 80a78e3 · 80a78e3
1 parent 5d7ea0c
commit 80a78e3
Show file tree

Hide file tree

Showing 6 changed files with 106 additions and 94 deletions.
diff --git a/frontend/src/components/ControlPanel/ControlPanel.css b/frontend/src/components/ControlPanel/ControlPanel.css
@@ -1,18 +1,29 @@
-#control-panel {
+.control-panel {
   height: 100%;
   overflow-y: auto;
   padding: 30px;
 }
 
-.control-collapsible-section {
+.control-panel .control-collapsible-section {
   background-color: var(--control-body-background-colour);
-  margin-bottom: 12px;
-  border-radius: 8px;
-  overflow: hidden;
+  margin-bottom: 0.75rem;
+  border-radius: 0.5rem;
 }
 
-.control-collapsible-section-header {
+.control-panel .control-collapsible-section-header {
   background-color: var(--control-header-background-colour);
-  padding: 12px 14px;
+  padding: 0.75rem;
+  border-radius: 0.5rem;
   cursor: default;
 }
+
+.control-panel
+  .control-collapsible-section[open]
+  .control-collapsible-section-header {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.control-panel .control-collapsible-section-header:focus-visible {
+  border-radius: 0;
+}
diff --git a/frontend/src/components/ControlPanel/ControlPanel.tsx b/frontend/src/components/ControlPanel/ControlPanel.tsx
@@ -52,7 +52,7 @@ function ControlPanel({
   }
 
   return (
-    <div id="control-panel">
+    <div className="control-panel">
       {/* hide defence box on levels 1 and 2 */}
       {(currentLevel === LEVEL_NAMES.LEVEL_3 ||
         currentLevel === LEVEL_NAMES.SANDBOX) && (

diff --git a/frontend/src/components/DefenceBox/DefenceBox.css b/frontend/src/components/DefenceBox/DefenceBox.css
@@ -1,3 +1,3 @@
-#defence-box {
+.defence-box {
   position: relative;
 }
diff --git a/frontend/src/components/DefenceBox/DefenceBox.tsx b/frontend/src/components/DefenceBox/DefenceBox.tsx
@@ -24,7 +24,7 @@ function DefenceBox({
   ) => Promise<boolean>;
 }) {
   return (
-    <div id="defence-box">
+    <div className="defence-box">
       {defences.map((defence, index) => {
         return (
           <DefenceMechanism

diff --git a/frontend/src/components/DefenceBox/DefenceMechanism.css b/frontend/src/components/DefenceBox/DefenceMechanism.css
@@ -1,89 +1,92 @@
 .defence-mechanism {
-  position: relative;
-  padding: 12px 14px;
   cursor: default;
 }
 
-.defence-mechanism details summary {
-  font-size: 1rem;
-  font-style: normal;
-  font-weight: 400;
-  margin: 0;
-}
-
-.defence-mechanism > .info-box {
-  font-size: 0.875rem;
-  margin-top: 4px;
+.defence-mechanism > * {
+  padding: 0.75rem;
 }
 
-.validation-text {
-  font-size: 0.875rem;
-  font-weight: 600;
+.defence-mechanism > summary {
+  position: relative;
+  font-size: 1rem;
 }
 
 /*
  * Modified from https://www.w3schools.com/howto/howto_css_switch.asp
 */
 
 /* The switch - the box around the slider */
-.switch {
+.defence-mechanism label.switch {
   position: absolute;
-  display: inline-block;
-  width: 29px;
-  height: 13px;
-  right: 16px;
-  top: 15px;
+  width: 2rem;
+  height: 1rem;
+  right: 0.75rem;
+  top: 0.75rem;
+}
+
+.defence-mechanism label.switch:focus-within {
+  outline-style: auto;
+  border-radius: 0.5rem;
 }
 
 /* Hide default HTML checkbox */
-.switch input {
+.defence-mechanism label.switch > input {
   opacity: 0;
   width: 0;
   height: 0;
 }
 
+.defence-mechanism label.switch > input:checked + .slider {
+  background-color: var(--main-toggle-on-colour);
+}
+
+.defence-mechanism label.switch > input:focus + .slider {
+  box-shadow: 0 0 1px var(--main-toggle-on-colour);
+}
+
+.defence-mechanism label.switch > input:checked + .slider:before {
+  transform: translateX(1rem);
+}
+
 /* The slider */
-.slider {
+.defence-mechanism label.switch > .slider {
   position: absolute;
   cursor: pointer;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: var(--main-toggle-off-colour);
-  -webkit-transition: 0.4s;
   transition: 0.4s;
 }
 
-.slider:before {
-  position: absolute;
+.defence-mechanism label.switch > .slider:before {
   content: "";
-  height: 13px;
-  width: 13px;
+  position: absolute;
+  height: 1rem;
+  width: 1rem;
   background-color: var(--main-toggle-ball-colour);
-  -webkit-transition: 0.4s;
   transition: 0.4s;
 }
 
-input:checked + .slider {
-  background-color: var(--main-toggle-on-colour);
+/* Rounded sliders */
+.defence-mechanism label.switch > .slider.round {
+  border-radius: 0.5rem;
 }
 
-input:focus + .slider {
-  box-shadow: 0 0 1px var(--main-toggle-on-colour);
+.defence-mechanism label.switch > .slider.round:before {
+  border-radius: 50%;
 }
 
-input:checked + .slider:before {
-  -webkit-transform: translateX(16px);
-  -ms-transform: translateX(16px);
-  transform: translateX(16px);
+.defence-mechanism .info-box {
+  font-size: 0.875rem;
 }
 
-/* Rounded sliders */
-.slider.round {
-  border-radius: 34px;
+.defence-mechanism .info-box :first-child {
+  margin-top: 0;
 }
 
-.slider.round:before {
-  border-radius: 50%;
+.defence-mechanism .info-box .validation-text {
+  font-size: inherit;
+  font-weight: 600;
 }
diff --git a/frontend/src/components/DefenceBox/DefenceMechanism.tsx b/frontend/src/components/DefenceBox/DefenceMechanism.tsx
@@ -65,48 +65,46 @@ function DefenceMechanism({
   }
 
   return (
-    <div className="defence-mechanism">
-      <details>
-        <summary>{defenceDetail.name}</summary>
-        <div className="info-box">
-          <p>{defenceDetail.info}</p>
-
-          {showConfigurations &&
-            defenceDetail.config.map((config) => {
-              return (
-                <DefenceConfiguration
-                  key={config.id}
-                  isActive={defenceDetail.isActive}
-                  config={config}
-                  setConfigurationValue={setConfigurationValue}
-                />
-              );
-            })}
-
-          {isConfigured &&
-            (configValidated ? (
-              <p className="validation-text">
-                <TiTick /> defence successfully configured
-              </p>
-            ) : (
-              <p className="validation-text">
-                <TiTimes /> invalid input - configuration failed
-              </p>
-            ))}
-        </div>
-      </details>
-      <label className="switch">
-        <input
-          type="checkbox"
-          placeholder="defence-toggle"
-          onChange={toggleDefence}
-          // set checked if defence is active
-          checked={defenceDetail.isActive}
-          aria-label="toggle defence"
-        />
-        <span className="slider round"></span>
-      </label>
-    </div>
+    <details className="defence-mechanism">
+      <summary>
+        <span>{defenceDetail.name}</span>
+        <label className="switch">
+          <input
+            type="checkbox"
+            placeholder="defence-toggle"
+            onChange={toggleDefence}
+            // set checked if defence is active
+            checked={defenceDetail.isActive}
+            aria-label="toggle defence"
+          />
+          <span className="slider round"></span>
+        </label>
+      </summary>
+      <div className="info-box">
+        <p>{defenceDetail.info}</p>
+        {showConfigurations &&
+          defenceDetail.config.map((config) => {
+            return (
+              <DefenceConfiguration
+                key={config.id}
+                isActive={defenceDetail.isActive}
+                config={config}
+                setConfigurationValue={setConfigurationValue}
+              />
+            );
+          })}
+        {isConfigured &&
+          (configValidated ? (
+            <p className="validation-text">
+              <TiTick /> defence successfully configured
+            </p>
+          ) : (
+            <p className="validation-text">
+              <TiTimes /> invalid input - configuration failed
+            </p>
+          ))}
+      </div>
+    </details>
   );
 }