[IMP] color_picker : added accessibility to custom color picker

Enabled custom color picker to open by clicking on Custom part no matter where we click (not only on the +), beside the already added colors. Task-3223388 closes #2276 Signed-off-by: Rémi Rahir (rar) <[email protected]>
odoo · Apr 3, 2023 · d3234a5 · d3234a5
1 parent bbf4f48
commit d3234a5
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 10 deletions.
diff --git a/src/components/color_picker/color_picker.xml b/src/components/color_picker/color_picker.xml
@@ -21,13 +21,13 @@
           </div>
         </div>
         <div class="o-separator"/>
-        <div class="o-color-picker-section-name">
+        <div
+          class="o-color-picker-section-name o-color-picker-toggler"
+          t-on-click="toggleColorPicker">
           <span>Custom</span>
         </div>
-        <div class="colors-grid">
-          <div
-            class="o-color-picker-toggler o-color-picker-line-item"
-            t-on-click.stop="toggleColorPicker">
+        <div class="colors-grid o-color-picker-toggler" t-on-click.stop="toggleColorPicker">
+          <div class="o-color-picker-line-item o-color-picker-toggler">
             <div align="center">+</div>
           </div>
           <div

diff --git a/tests/components/color_picker.test.ts b/tests/components/color_picker.test.ts
@@ -51,12 +51,15 @@ describe("Color Picker buttons", () => {
     expect(onColorPicked).toHaveBeenCalledWith("");
   });
 
-  test("Click on '+' button toggle the custom color part", async () => {
+  test("Clicking on '+', custom section except custom added colors must toggle the custom color picker", async () => {
     await mountColorPicker();
-    await simulateClick(".o-color-picker-toggler");
-    expect(fixture.querySelector(".o-custom-selector")).toBeDefined();
-    await simulateClick(".o-color-picker-toggler");
-    expect(fixture.querySelector(".o-custom-selector")).toBeNull();
+    const elements = fixture.querySelectorAll(".o-color-picker-toggler");
+    for (const element of elements) {
+      await simulateClick(element);
+      expect(fixture.querySelector(".o-custom-selector")).toBeDefined();
+      await simulateClick(element);
+      expect(fixture.querySelector(".o-custom-selector")).toBeNull();
+    }
   });
 
   test("Can pick a standard color", async () => {