make buttons tabbable

fix issue where two radio groups were not both tabbable add focus layout for checkbox, radio, slider and sidebar item
snapcrunch · Sep 14, 2021 · 7d4fb5b · 7d4fb5b
1 parent 7008ccf
commit 7d4fb5b
Show file tree

Hide file tree

Showing 10 changed files with 61 additions and 36 deletions.
diff --git a/src/app/components/main/components/group/components/fields/checkbox/style.scss b/src/app/components/main/components/group/components/fields/checkbox/style.scss
@@ -1,5 +1,5 @@
 .field-checkbox {
-  
+
   .checkbox-option {
     display: block;
     position: relative;
@@ -10,15 +10,15 @@
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
-    
+
     input {
       position: absolute;
       opacity: 0;
       cursor: pointer;
       height: 0;
       width: 0;
     }
-    
+
     .check-square {
       position: absolute;
       top: 0;
@@ -29,34 +29,44 @@
       border: 1px solid #afb9c0;
       border-radius: 4px;
     }
-    
+
     &:hover input ~ .check-square {
       background-color: rgba(0,0,0,0.05);
     }
-    
+
     input:checked ~ .check-square {
       background-color: #0084ff;
       border-color: #0084ff;
+      border-width: 2px;
+    }
+
+    input:focus ~ .check-square {
+      border-color: #0084ff;
+      border-width: 2px;
+    }
+
+    input:checked:focus ~ .check-square {
+      border-color: #46a6ff;
     }
 
     &:hover input:checked ~ .check-square {
       background-color: #006dd9;
       border-color: #006dd9;
     }
-    
+
     .check-square:after {
       content: "";
       position: absolute;
       display: none;
     }
-    
+
     input:checked ~ .check-square:after {
       display: block;
     }
-    
+
     .check-square:after {
-      left: 6px;
-      top: 1px;
+      left: 5px;
+      top: 0;
       width: 5px;
       height: 10px;
       border: solid white;
@@ -68,7 +78,7 @@
       animation: zoom-in-check-square 0.3s 1;
       -webkit-animation: zoom-in-check-square 0.3s 1;
     }
-    
+
     @keyframes zoom-in-check-square {
       0%   {transform: scale(0.0) rotate(0deg);}
       25%  {transform: scale(0.3) rotate(30deg);}
@@ -82,15 +92,15 @@
   .field-checkbox {
 
     .checkbox-option {
-      
+
       &:hover input ~ .check-square {
         background-color: rgba(0,0,0,0.1);
       }
-      
+
       .check-square {
         border: 1px solid #0e0e0e;
       }
-      
+
       .check-square:after {
         border: solid #252525;
         border-width: 0 3px 3px 0;

diff --git a/src/app/components/main/components/group/components/fields/directory/index.jsx b/src/app/components/main/components/group/components/fields/directory/index.jsx
@@ -38,9 +38,9 @@ class DirectoryField extends React.Component {
 							: 'None'
 					}
 				</div>
-				<div className="bt" onClick={ this.choose }>
+				<button className="bt" onClick={ this.choose }>
 					{ btLabel }
-				</div>
+				</button>
 				{ help && <span className="help">{ help }</span> }
 			</div>
 		);

diff --git a/src/app/components/main/components/group/components/fields/file/index.jsx b/src/app/components/main/components/group/components/fields/file/index.jsx
@@ -38,9 +38,9 @@ class FileField extends React.Component {
 							: 'None'
 					}
 				</div>
-				<div className="bt" onClick={this.choose}>
+				<button className="bt" onClick={this.choose}>
 					{btLabel}
-				</div>
+				</button>
 				{help && <span className="help">{help}</span>}
 			</div>
 		);

diff --git a/src/app/components/main/components/group/components/fields/list/index.jsx b/src/app/components/main/components/group/components/fields/list/index.jsx
@@ -50,12 +50,12 @@ class ListField extends React.Component {
 						</select>
 					</div>
 					<div className="ep-list-button-container">
-						<span className="ep-list-button" onClick={ this.addClick }><span className="ep-list-button-text">+</span></span>
-						<span className="ep-list-button" onClick={ this.removeClick }><span className="ep-list-button-text">-</span></span>
+						<button className="ep-list-button" onClick={ this.addClick }><span className="ep-list-button-text">+</span></button>
+						<button className="ep-list-button" onClick={ this.removeClick }><span className="ep-list-button-text">-</span></button>
 						{ this.orderable
 					&& <React.Fragment>
-						<span className="ep-list-button" onClick={ this.upClick }><span className="ep-list-button-text">↑</span></span>
-						<span className="ep-list-button" onClick={ this.downClick }><span className="ep-list-button-text">↓</span></span>
+						<button className="ep-list-button" onClick={ this.upClick }><span className="ep-list-button-text">↑</span></button>
+						<button className="ep-list-button" onClick={ this.downClick }><span className="ep-list-button-text">↓</span></button>
 					</React.Fragment>
 						}
 					</div>

diff --git a/src/app/components/main/components/group/components/fields/radio/index.jsx b/src/app/components/main/components/group/components/fields/radio/index.jsx
@@ -17,7 +17,7 @@ class RadioField extends React.Component {
 			return (
 				<label htmlFor={ id } className="radio-option" key={ idx }>
 					{ option.label }
-					<input type="radio" id={ id } onChange={ this.onChange.bind(this) } checked={ option.value === this.value } />
+					<input type="radio" id={ id } onChange={ this.onChange.bind(this) } checked={ option.value === this.value } name={ fieldID } />
 					<span className="check-circle" />
 				</label>
 			);

diff --git a/src/app/components/main/components/group/components/fields/radio/style.scss b/src/app/components/main/components/group/components/fields/radio/style.scss
@@ -39,6 +39,11 @@
       border-color: #0084ff;
     }
 
+    input:focus ~ .check-circle {
+      background-color: #46a6ff;
+      border-color: #46a6ff;
+    }
+
     &:hover input:checked ~ .check-circle {
       background-color: #006dd9;
       border-color: #006dd9;
@@ -95,4 +100,4 @@
       }
     }
   }
-}
+}
diff --git a/src/app/components/main/components/group/components/fields/slider/style.scss b/src/app/components/main/components/group/components/fields/slider/style.scss
@@ -9,16 +9,16 @@
     opacity: 0.85;
     -webkit-transition: .2s;
     transition: opacity .2s;
-    
+
     &:focus {
       outline: none;
     }
-    
+
     &:hover {
       opacity: 1;
     }
   }
-  
+
   input::-webkit-slider-runnable-track {
     background: rgba(0, 0, 0, 0.1);
     border: 0;
@@ -27,7 +27,7 @@
     height: 10px;
     cursor: pointer;
   }
-  
+
   input::-webkit-slider-thumb {
     margin-top: -10px;
     width: 15px;
@@ -38,11 +38,15 @@
     cursor: pointer;
     -webkit-appearance: none;
   }
-  
+
   input:focus::-webkit-slider-runnable-track {
     background: rgba(0, 0, 0, 0.15);
   }
-
+
+  input:focus::-webkit-slider-thumb {
+    background: #46a6ff;
+  }
+
   label {
     width: 8%;
     font-size: 14px;
@@ -60,7 +64,7 @@
         opacity: 0.85;
       }
     }
-    
+
     input::-webkit-slider-runnable-track {
       background: rgba(255, 255, 255, 0.05);
     }

diff --git a/src/app/components/main/components/group/style.scss b/src/app/components/main/components/group/style.scss
@@ -40,8 +40,10 @@
             font-weight: 700;
             text-transform: uppercase;
             transition: all ease-out 0.3s;
+            border: none;
+            outline: none;
 
-            &:hover {
+            &:hover, &:focus {
                 cursor: pointer;
                 background-color: rgba(0,0,0,0.4);
             }

diff --git a/src/app/components/sidebar/index.jsx b/src/app/components/sidebar/index.jsx
@@ -78,7 +78,6 @@ class Sidebar extends React.Component {
 
         const { activeSection, sections } = this;
         const sectionIds = sections.map(section => section.id);
-        console.log(activeSection, sectionIds);
         if (sectionIds.length <= 0)
             return;
 

diff --git a/src/app/components/sidebar/style.scss b/src/app/components/sidebar/style.scss
@@ -31,6 +31,7 @@
         color: #8C8C8C;
         font-weight: 600;
         cursor: pointer;
+        outline: none;
 
         &.active {
             //background-color: #0084ff;
@@ -41,7 +42,11 @@
                 background-color: #0084ff;
             }
         }
-
+
+        &:focus {
+            border: 2px solid #0084ff;
+        }
+
         &:hover {
             background-color: rgba(0,0,0,0.1);
         }
@@ -72,10 +77,10 @@
 @media (prefers-color-scheme: dark) {
     .sidebar {
         background-color: #212121;
-        
+
         .sidebar-section {
             color: #787878;
-            
+
             .section-icon {
                 background-color: #787878;
             }