feat: improve touch, contrast & keyboard a11y

measuredco · Jan 12, 2024 · f975d87 · f975d87
1 parent 85b3768
commit f975d87
Show file tree

Hide file tree

Showing 19 changed files with 403 additions and 152 deletions.
diff --git a/packages/core/components/Button/Button.module.css b/packages/core/components/Button/Button.module.css
@@ -1,7 +1,7 @@
 .Button {
   appearance: none;
   background: none;
-  border: none;
+  border: 1px solid transparent;
   border-radius: 4px;
   color: var(--puck-color-white);
   display: inline-flex;
@@ -11,68 +11,83 @@
   font-family: var(--puck-font-family);
   font-size: 14px;
   font-weight: 400;
+  box-sizing: border-box;
   line-height: 1;
   text-align: center;
   text-decoration: none;
+  transition: background-color 50ms ease-in;
   cursor: pointer;
   white-space: nowrap;
   margin: 0;
 }
 
+.Button:hover,
+.Button:active {
+  transition: none;
+}
+
 .Button--medium {
-  padding-bottom: 8px;
-  padding-left: 20px;
-  padding-right: 20px;
-  padding-top: 8px;
+  min-height: 34px;
+  padding-bottom: 7px;
+  padding-left: 19px;
+  padding-right: 19px;
+  padding-top: 7px;
 }
 
 .Button--large {
-  padding-bottom: 12px;
-  padding-left: 20px;
-  padding-right: 20px;
-  padding-top: 12px;
+  padding-bottom: 11px;
+  padding-left: 19px;
+  padding-right: 19px;
+  padding-top: 11px;
 }
 
 .Button-icon {
   margin-top: 2px;
 }
 
-.Button:hover {
-  text-decoration: none;
+.Button--primary {
+  background: var(--puck-color-azure-04);
 }
 
-.Button--primary {
-  background: var(--puck-color-blue);
+.Button:focus-visible {
+  outline: 2px solid var(--puck-color-azure-05);
+  outline-offset: 2px;
 }
 
-.Button--primary:hover {
-  opacity: 0.7;
-  transition: opacity 50ms ease-in;
+@media (hover: hover) and (pointer: fine) {
+  .Button--primary:hover {
+    background-color: var(--puck-color-azure-03);
+  }
 }
 
-.Button--secondary {
-  color: currentColor;
-  border: 1px solid currentColor;
+.Button--primary:active {
+  background-color: var(--puck-color-azure-02);
 }
 
-.Button--secondary:hover {
-  background-color: var(--puck-color-grey-11);
+.Button--secondary {
+  border: 1px solid var(--puck-color-grey-01);
   color: var(--puck-color-black);
-  opacity: 0.7;
 }
 
-.Button--flush {
-  border-radius: 0;
+@media (hover: hover) and (pointer: fine) {
+  .Button--secondary:hover {
+    background-color: var(--puck-color-azure-12);
+  }
 }
 
-.Button--disabled {
-  background: var(--puck-color-grey-11);
-  color: var(--puck-color-black);
-  cursor: not-allowed;
+.Button--secondary:active {
+  background-color: var(--puck-color-azure-11);
+}
+
+.Button--flush {
+  border-radius: 0;
 }
 
+.Button--disabled,
 .Button--disabled:hover {
-  opacity: 1;
+  background-color: var(--puck-color-grey-07);
+  color: var(--puck-color-grey-03);
+  cursor: not-allowed;
 }
 
 .Button--fullWidth {

diff --git a/packages/core/components/Button/Button.tsx b/packages/core/components/Button/Button.tsx
@@ -36,7 +36,7 @@ export const Button = ({
 
   useEffect(() => setLoading(loadingProp), [loadingProp]);
 
-  const ElementType = href ? "a" : onClick ? "button" : "div";
+  const ElementType = href ? "a" : type ? "button" : "span";
 
   const el = (
     <ElementType

diff --git a/packages/core/components/ComponentList/index.tsx b/packages/core/components/ComponentList/index.tsx
@@ -39,7 +39,7 @@ const ComponentList = ({
   return (
     <div className={getClassName({ isExpanded: expanded })}>
       {title && (
-        <div
+        <button
           className={getClassName("title")}
           onClick={() =>
             setUi({
@@ -62,7 +62,7 @@ const ComponentList = ({
           <div className={getClassName("titleIcon")}>
             {expanded ? <ChevronUp size={12} /> : <ChevronDown size={12} />}
           </div>
-        </div>
+        </button>
       )}
       <div className={getClassName("content")}>
         <Drawer droppableId={`component-list${title ? `:${title}` : ""}`}>

diff --git a/packages/core/components/ComponentList/styles.module.css b/packages/core/components/ComponentList/styles.module.css
@@ -15,24 +15,39 @@
 }
 
 .ComponentList-title {
+  background-color: transparent;
+  border: 0;
   color: var(--puck-color-grey-05);
+  cursor: pointer;
   display: flex;
+  font: inherit;
   font-size: var(--puck-font-size-xxxs);
   list-style: none;
+  margin-bottom: 6px;
   padding: 8px;
   text-transform: uppercase;
+  transition: background-color 50ms ease-in, color 50ms ease-in;
   gap: 4px;
   border-radius: 4px;
+  width: 100%;
 }
 
-.ComponentList--isExpanded .ComponentList-title {
-  margin-bottom: 4px;
+.ComponentList-title:focus-visible {
+  outline: 2px solid var(--puck-color-azure-05);
+  outline-offset: 2px;
 }
 
-.ComponentList-title:hover {
-  background-color: var(--puck-color-azure-11);
-  color: var(--puck-color-azure-05);
-  cursor: pointer;
+@media (hover: hover) and (pointer: fine) {
+  .ComponentList-title:hover {
+    background-color: var(--puck-color-azure-11);
+    color: var(--puck-color-azure-04);
+    transition: none;
+  }
+}
+
+.ComponentList-title:active {
+  background-color: var(--puck-color-azure-10);
+  transition: none;
 }
 
 .ComponentList-titleIcon {

diff --git a/packages/core/components/DragIcon/styles.module.css b/packages/core/components/DragIcon/styles.module.css
@@ -1,10 +1,13 @@
 .DragIcon {
   color: var(--puck-color-grey-05);
+  cursor: grab;
   padding: 4px;
   border-radius: 4px;
 }
 
-.DragIcon:hover {
-  cursor: grab;
-  background: var(--puck-color-grey-10);
+@media (hover: hover) and (pointer: fine) {
+  .DragIcon:hover {
+    color: var(--puck-color-azure-05);
+    background-color: var(--puck-color-azure-12);
+  }
 }
diff --git a/packages/core/components/DraggableComponent/styles.module.css b/packages/core/components/DraggableComponent/styles.module.css
@@ -3,6 +3,10 @@
   pointer-events: auto;
 }
 
+.DraggableComponent:focus-visible {
+  outline: 2px solid var(--puck-color-azure-05);
+}
+
 .DraggableComponent--isDragging {
   background: color-mix(in srgb, var(--puck-color-azure-08) 10%, transparent);
   outline: 2px var(--puck-color-azure-09) solid !important;
@@ -104,6 +108,7 @@
   border-radius: 8px;
   background: var(--puck-color-grey-01);
   color: var(--puck-color-white);
+  cursor: grab;
   display: none;
   font-family: var(--puck-font-family);
   gap: 4px;
@@ -136,13 +141,29 @@
   background: transparent;
   border: none;
   color: var(--puck-color-grey-08);
+  cursor: pointer;
   padding: 6px 8px;
   border-radius: 4px;
   overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: color 50ms ease-in;
 }
 
-.DraggableComponent-action:hover {
-  background: var(--puck-color-grey-03);
-  color: var(--puck-color-azure-06);
-  cursor: pointer;
+.DraggableComponent-action:focus-visible {
+  outline: 2px solid var(--puck-color-azure-05);
+  outline-offset: -2px;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .DraggableComponent-action:hover {
+    color: var(--puck-color-azure-06);
+    transition: none;
+  }
+}
+
+.DraggableComponent-action:active {
+  color: var(--puck-color-azure-07);
+  transition: none;
 }
diff --git a/packages/core/components/Drawer/styles.module.css b/packages/core/components/Drawer/styles.module.css
@@ -2,14 +2,15 @@
   font-family: var(--puck-font-family);
 }
 
-.DrawerItem:last-of-type .DrawerItem-default .DrawerItem-draggableWrapper {
-  padding-bottom: 0px;
-}
-
 .DrawerItem-default .DrawerItem-draggableWrapper {
+  /* padding required here to prevent bug when cancelling a drag) */
   padding-bottom: 12px;
 }
 
+.DrawerItem:last-of-type .DrawerItem-default .DrawerItem-draggableWrapper {
+  padding-bottom: 0;
+}
+
 .DrawerItem-draggable {
   background: var(--puck-color-white);
   padding: 12px;
@@ -20,11 +21,27 @@
   justify-content: space-between;
   align-items: center;
   cursor: grab;
+  transition: background-color 50ms ease-in, color 50ms ease-in;
+}
+
+.DrawerItem:focus-visible {
+  outline: 0;
+}
+
+.Drawer:not(.Drawer--isDraggingFrom)
+  .DrawerItem:focus-visible
+  .DrawerItem-draggable {
+  border-radius: 4px;
+  outline: 2px solid var(--puck-color-azure-05);
+  outline-offset: 2px;
 }
 
-.Drawer:not(.Drawer--isDraggingFrom) .DrawerItem-draggable:hover {
-  background-color: var(--puck-color-azure-11);
-  color: var(--puck-color-azure-05);
+@media (hover: hover) and (pointer: fine) {
+  .Drawer:not(.Drawer--isDraggingFrom) .DrawerItem-draggable:hover {
+    background-color: var(--puck-color-azure-12);
+    color: var(--puck-color-azure-04);
+    transition: none;
+  }
 }
 
 .DrawerItem-name {