Increase buttons for accessibility, exclude some

Inwerpsel · Apr 13, 2024 · 1b3fbf1 · 1b3fbf1
1 parent 0c2096e
commit 1b3fbf1
Show file tree

Hide file tree

Showing 10 changed files with 69 additions and 57 deletions.
diff --git a/docs/demo/dist/bundle.js b/docs/demo/dist/bundle.js
diff --git a/docs/demo/dist/bundle.js.map b/docs/demo/dist/bundle.js.map
diff --git a/docs/demo/dist/main.css b/docs/demo/dist/main.css
diff --git a/docs/demo/dist/main.css.map b/docs/demo/dist/main.css.map
diff --git a/src/components/Hotkeys.jsx b/src/components/Hotkeys.jsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo } from 'react';
+import { useEffect } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { get, use } from '../state';
 import { flipDebugMode } from './RenderInfo';

diff --git a/src/components/inspector/GroupControl.jsx b/src/components/inspector/GroupControl.jsx
@@ -95,7 +95,7 @@ export const GroupControl = props => {
     return null;
   }
 
-  const previewSize = '20px';
+  const previewSize = '28px';
 
   const isOpen = !!openGroups[group.label];
 
@@ -144,7 +144,6 @@ export const GroupControl = props => {
               - "{search}"
               <button
                 style={{
-                  fontSize: '7px',
                   padding: '3px 3px 1px',
                   position: 'relative',
                   bottom: '4px',
@@ -185,8 +184,9 @@ export const GroupControl = props => {
                       backgroundColor: `${value}`,
                       backgroundRepeat: `no-repeat`,
                       backgroundSize: 'cover',
-                      marginTop: '7px',
+                      marginTop: '3px',
                       marginLeft: '6px',
+                      paddingTop: '3.5px',
                       fontSize: '14px',
                       textAlign: 'center',
                       textShadow: isVar ? 'white 0px 3px' : 'white 2px 2px'

diff --git a/src/components/properties/ColorControl.jsx b/src/components/properties/ColorControl.jsx
@@ -156,7 +156,6 @@ export const ColorControl = props => {
           style={ {
             fontSize: '12px',
             float: 'right',
-            width: PREVIEW_SIZE,
             opacity: value === 'transparent' ? 1 : .4,
           }}
         >

diff --git a/src/components/ui/Palette.tsx b/src/components/ui/Palette.tsx
@@ -311,7 +311,6 @@ export function Palette() {
         }}
       >
         <CompactModeButton />
-        <br/>
         {values.length === 0 && <span>Empty<br/></span>}
         {compact ? <MiniPalette {...{values, setValues}}/> : <MaxiPalette  {...{values, setValues}}/>}
         <Tutorial el={Palette} tasks={[

diff --git a/src/css/movable.scss b/src/css/movable.scss
@@ -304,8 +304,8 @@ $area-speed: .2s;
 
   padding-top: 2px;
 
-  width: 24px;
-  height: 24px;
+  min-width: 24px !important;
+  min-height: 24px !important;
 
   top: 0;
   right: 0;

diff --git a/src/style.scss b/src/style.scss
@@ -1,5 +1,6 @@
 $accent-color: var(--theme-editor--acent-color, #007cba);
 $subtle-grey: rgb(179, 162, 162);
+$min-button-height: 44px;
 
 html,
 body {
@@ -28,6 +29,12 @@ $focus-outline: 3px solid rgb(40, 155, 255);
     border-radius: 6px;
     font-size: 16px;
   }
+
+  button, input:not([type=checkbox], [type=radio]), select, label:has(>[type=checkbox]) {
+    min-width: $min-button-height;
+    min-height: $min-button-height;
+  }
+
   h4 {
     _-- {
       white-space: break-spaces;
@@ -236,6 +243,7 @@ $focus-outline: 3px solid rgb(40, 155, 255);
 }
 
 .var-group {
+  min-height: $min-button-height + 5px;
   background: white !important;
   border: 1px solid black !important;
   margin-bottom: 3px !important;
@@ -594,6 +602,7 @@ li[data-done=true]:before {
   content: "✓";
   color: green;
 }
+
 button:disabled {
   filter: opacity(.5);
-}
+}