fix(configsMenu): improve color picker accessibility and styling

- Update color picker input to be more accessible by associating it with a label - Refine color picker query selection method for better compatibility - Adjust CSS to ensure consistent styling across different environments
mustakshif · Oct 13, 2024 · 63ec80a · 63ec80a
1 parent bd276c9
commit 63ec80a
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 6 deletions.
diff --git a/src/modules/configsMenu/makeItems.ts b/src/modules/configsMenu/makeItems.ts
@@ -115,9 +115,9 @@ function createMenuItems() {
     const asriConfigMenuHTML = `
         <button class="b3-menu__separator asri-config"></button>
         <button class="b3-menu__item asri-config" id="pickColor">
-            <input id="asriColorPicker" type="color" value="${asriConfigs.userCustomColor}">
             <svg class="b3-menu__icon"></svg>
-            <label for="asriColorPicker" class="be-menu__label">${i18n['pickColor']}</label>            
+            <input id="asriColorPicker" type="color" value="${asriConfigs.userCustomColor}">
+            <label for="asriColorPicker" class="be-menu__label">${i18n['pickColor']}</label>
         </button>
         <button class="b3-menu__item asri-config" id="followSysAccent">
             <svg class="b3-menu__icon"></svg>
@@ -140,7 +140,7 @@ function createMenuItems() {
     followSysAccentBtn = document.getElementById('followSysAccent');
     pickColorBtn = document.getElementById('pickColor');
     asriChromaSlider = document.getElementById('asriChromaSlider') as HTMLInputElement | null;
-    colorPicker = pickColorBtn!.lastElementChild as HTMLInputElement | null;
+    colorPicker = pickColorBtn!.querySelector('input') as HTMLInputElement | null;
 
     if (!followSysAccentBtn || !pickColorBtn || !asriChromaSlider || !colorPicker) return;
 

diff --git a/style/features/colorful-asri.scss b/style/features/colorful-asri.scss
@@ -229,7 +229,7 @@
         }
     }
 
-    .body-asri--iosApp #pickColor {
+    body:where(.body-asri--iosApp) #pickColor {
         svg {
             display: none;
         }

diff --git a/theme.css b/theme.css
diff --git a/theme.js b/theme.js
-Original file line number
+Diff line change
@@ Expand Up / @@ -229,7 +229,7 @@ @@
             }
         }
-        .body-asri--iosApp #pickColor {
+        body:where(.body-asri--iosApp) #pickColor {
             svg {
                 display: none;
             }
@@ Expand Down @@