fix(ui): Widen touchable button area (#3249)

Currently, player buttons clickable area are 24px by 32px which is not close to WCAG guidelines(44px by 44px) Solution would be moving margins around buttons to paddings since padding rendered as touchable area. This makes player buttons 34*32px. (and makes focus indicators look nicer too :) Co-authored-by: Joey Parrish <joeyparrish@users.noreply.github.com>
shaka-project · Jun 2, 2022 · 6c0283e · 6c0283e
1 parent 5987458
commit 6c0283e
Show file tree

Hide file tree

Showing 4 changed files with 3 additions and 3 deletions.
diff --git a/demo/demo.less b/demo/demo.less
@@ -73,7 +73,6 @@ main.mdl-layout__content {
 
   /* Give the button a round background, meant to look like the play button. */
   border-radius: 50%;
-  width: 32px;
   color: #000;
   background: rgba(255 255 255 / 85%);
 }

diff --git a/ui/less/containers.less b/ui/less/containers.less
@@ -161,7 +161,7 @@
     /* Consistent margins (external) and padding (internal) between controls. */
     .bottom-panels-elements-margin();
 
-    padding: 0;
+    padding: 0 5px;
 
     /* Transparent backgrounds, no borders, and a pointer when you mouse over
      * them. */

diff --git a/ui/less/general.less b/ui/less/general.less
@@ -37,7 +37,7 @@
 }
 
 .bottom-panels-elements-margin() {
-  margin: 1px 6px;
+  margin: 1px;
 }
 
 /* For containers which host elements overlaying other things. */

diff --git a/ui/less/range_elements.less b/ui/less/range_elements.less
@@ -140,6 +140,7 @@
 
 .shaka-volume-bar-container {
   width: 100px;
+  padding: 0;
 }
 
 .shaka-range-element {