From 133a63ee2a913a51723af8f79e4f09735d39a15b Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Thu, 3 Oct 2024 20:55:41 +0300
Subject: [PATCH] Tokens for ImageCompare

---
 .../doc/imagecompare/AccessibilityDoc.vue     | 76 ++++++++++++++++++-
 .../src/imagecompare/BaseImageCompare.vue     | 15 +++-
 .../imagecompare/style/ImageCompareStyle.js   | 37 +++++----
 .../src/presets/aura/imagecompare/index.js    | 21 ++++-
 .../src/presets/lara/imagecompare/index.js    | 20 +++++
 .../presets/lara/imagecompare/package.json    |  5 ++
 packages/themes/src/presets/lara/index.js     |  2 +
 .../presets/material/imagecompare/index.js    | 20 +++++
 .../material/imagecompare/package.json        |  5 ++
 packages/themes/src/presets/material/index.js |  2 +
 .../src/presets/nora/imagecompare/index.js    | 20 +++++
 .../presets/nora/imagecompare/package.json    |  5 ++
 packages/themes/src/presets/nora/index.js     |  2 +
 13 files changed, 211 insertions(+), 19 deletions(-)
 create mode 100644 packages/themes/src/presets/lara/imagecompare/index.js
 create mode 100644 packages/themes/src/presets/lara/imagecompare/package.json
 create mode 100644 packages/themes/src/presets/material/imagecompare/index.js
 create mode 100644 packages/themes/src/presets/material/imagecompare/package.json
 create mode 100644 packages/themes/src/presets/nora/imagecompare/index.js
 create mode 100644 packages/themes/src/presets/nora/imagecompare/package.json

diff --git a/apps/showcase/doc/imagecompare/AccessibilityDoc.vue b/apps/showcase/doc/imagecompare/AccessibilityDoc.vue
index 05d727668..1ca1094f1 100644
--- a/apps/showcase/doc/imagecompare/AccessibilityDoc.vue
+++ b/apps/showcase/doc/imagecompare/AccessibilityDoc.vue
@@ -1,9 +1,81 @@
 <template>
     <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
         <h3>Screen Reader</h3>
-        <p>IftaLabel does not require any roles and attributes.</p>
+        <p>ImageComponent component uses a native range <i>slider</i> internally. Value to describe the component can be defined using <i>aria-labelledby</i> and <i>aria-label</i> props.</p>
+
+        <DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
 
         <h3>Keyboard Support</h3>
-        <p>Component does not include any interactive elements.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>tab</i></td>
+                        <td>Moves focus to the component.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <span class="inline-flex flex-col">
+                                <i class="mb-1">left arrow</i>
+                                <i>up arrow</i>
+                            </span>
+                        </td>
+                        <td>Decrements the value.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <span class="inline-flex flex-col">
+                                <i class="mb-1">right arrow</i>
+                                <i>down arrow</i>
+                            </span>
+                        </td>
+                        <td>Increments the value.</td>
+                    </tr>
+                    <tr>
+                        <td><i>home</i></td>
+                        <td>Set the minimum value.</td>
+                    </tr>
+                    <tr>
+                        <td><i>end</i></td>
+                        <td>Set the maximum value.</td>
+                    </tr>
+                    <tr>
+                        <td><i>page up</i></td>
+                        <td>Increments the value by 10 steps.</td>
+                    </tr>
+                    <tr>
+                        <td><i>page down</i></td>
+                        <td>Decrements the value by 10 steps.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
     </DocSectionText>
 </template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<span id="image_label">Compare Images</span>
+<ImageCompare class="shadow-lg rounded-2xl" aria-labelledby="image-label">
+    ...
+</ImageCompare>
+
+<ImageCompare class="shadow-lg rounded-2xl" aria-label="Compare Images">
+    ...
+</ImageCompare>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/packages/primevue/src/imagecompare/BaseImageCompare.vue b/packages/primevue/src/imagecompare/BaseImageCompare.vue
index bfecc6ea1..b0413a7b1 100644
--- a/packages/primevue/src/imagecompare/BaseImageCompare.vue
+++ b/packages/primevue/src/imagecompare/BaseImageCompare.vue
@@ -5,7 +5,20 @@ import ImageCompareStyle from 'primevue/imagecompare/style';
 export default {
     name: 'BaseImageCompare',
     extends: BaseComponent,
-    props: {},
+    props: {
+        tabindex: {
+            type: Number,
+            default: 0
+        },
+        ariaLabelledby: {
+            type: String,
+            default: null
+        },
+        ariaLabel: {
+            type: String,
+            default: null
+        }
+    },
     style: ImageCompareStyle,
     provide() {
         return {
diff --git a/packages/primevue/src/imagecompare/style/ImageCompareStyle.js b/packages/primevue/src/imagecompare/style/ImageCompareStyle.js
index 2c27d6c94..5ceccd1b0 100644
--- a/packages/primevue/src/imagecompare/style/ImageCompareStyle.js
+++ b/packages/primevue/src/imagecompare/style/ImageCompareStyle.js
@@ -21,32 +21,39 @@ const theme = ({ dt }) => `
 .p-imagecompare-slider {
     position: relative;
     -webkit-appearance: none;
-    width: calc(100% + 40px);
+    width: calc(100% + ${dt('imagecompare.handle.size')});
     height: 100%;
-    margin-left: -20px;
+    margin-left: calc(-1 * calc(${dt('imagecompare.handle.size')} / 2));
     background-color: transparent;
     outline: none;
 }
 
 .p-imagecompare-slider::-webkit-slider-thumb {
     -webkit-appearance: none;
-    height: 45px;
-    width: 45px;
-    background: #ffffff33;
-    border: 3px solid #ffffff99;
-    border-radius: 50%;
+    height: ${dt('imagecompare.handle.size')};
+    width: ${dt('imagecompare.handle.size')};
+    background: ${dt('imagecompare.handle.background')};
+    border: ${dt('imagecompare.handle.border.width')} ${dt('imagecompare.handle.border.style')} ${dt('imagecompare.handle.border.color')};
+    border-radius: ${dt('imagecompare.handle.border.radius')};
+    background-size: contain;
+    cursor: ew-resize;
+    transition: all ${dt('transition.duration')};
+}
+
+.p-imagecompare-slider::-moz-range-thumb {
+    height: ${dt('imagecompare.handle.size')};
+    width: ${dt('imagecompare.handle.size')};
+    background: ${dt('imagecompare.handle.background')};
+    border: ${dt('imagecompare.handle.border.width')} ${dt('imagecompare.handle.border.style')} ${dt('imagecompare.handle.border.color')};
+    border-radius: ${dt('imagecompare.handle.border.radius')};
     background-size: contain;
     cursor: ew-resize;
 }
 
-.p-imagecompare-slider::-moz-range-thumb {
-    height: 45px;
-    width: 45px;
-    background: #ffffff33;
-    border: 3px solid #ffffff99;
-    border-radius: 50%;
-    background-size: contain;
-    cursor: ew-resize;
+.p-imagecompare-slider:focus-visible::-webkit-slider-thumb {
+    box-shadow: ${dt('imagecompare.handle.focus.ring.shadow')};
+    outline: ${dt('imagecompare.handle.focus.ring.width')} ${dt('imagecompare.handle.focus.ring.style')} ${dt('imagecompare.handle.focus.ring.color')};
+    outline-offset: ${dt('imagecompare.handle.focus.ring.offset')};
 }
 `;
 
diff --git a/packages/themes/src/presets/aura/imagecompare/index.js b/packages/themes/src/presets/aura/imagecompare/index.js
index ff8b4c563..3570e59e0 100644
--- a/packages/themes/src/presets/aura/imagecompare/index.js
+++ b/packages/themes/src/presets/aura/imagecompare/index.js
@@ -1 +1,20 @@
-export default {};
+export default {
+    handle: {
+        size: '30px',
+        background: 'rgba(255,255,255,0.3)',
+        border: {
+            width: '3px',
+            style: 'solid',
+            color: 'rgba(255,255,255,0.3)',
+            radius: '50%'
+        },
+        transitionDuration: '{transition.duration}',
+        focusRing: {
+            width: '{focus.ring.width}',
+            style: '{focus.ring.style}',
+            color: 'rgba(255,255,255,0.3)',
+            offset: '{focus.ring.offset}',
+            shadow: '{focus.ring.shadow}'
+        }
+    }
+};
diff --git a/packages/themes/src/presets/lara/imagecompare/index.js b/packages/themes/src/presets/lara/imagecompare/index.js
new file mode 100644
index 000000000..3570e59e0
--- /dev/null
+++ b/packages/themes/src/presets/lara/imagecompare/index.js
@@ -0,0 +1,20 @@
+export default {
+    handle: {
+        size: '30px',
+        background: 'rgba(255,255,255,0.3)',
+        border: {
+            width: '3px',
+            style: 'solid',
+            color: 'rgba(255,255,255,0.3)',
+            radius: '50%'
+        },
+        transitionDuration: '{transition.duration}',
+        focusRing: {
+            width: '{focus.ring.width}',
+            style: '{focus.ring.style}',
+            color: 'rgba(255,255,255,0.3)',
+            offset: '{focus.ring.offset}',
+            shadow: '{focus.ring.shadow}'
+        }
+    }
+};
diff --git a/packages/themes/src/presets/lara/imagecompare/package.json b/packages/themes/src/presets/lara/imagecompare/package.json
new file mode 100644
index 000000000..eff82196e
--- /dev/null
+++ b/packages/themes/src/presets/lara/imagecompare/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./index.js",
+    "module": "./index.js",
+    "types": "../types/imagecompare/index.d.ts"
+}
diff --git a/packages/themes/src/presets/lara/index.js b/packages/themes/src/presets/lara/index.js
index 59e59dfab..ee1e9ff11 100644
--- a/packages/themes/src/presets/lara/index.js
+++ b/packages/themes/src/presets/lara/index.js
@@ -1,3 +1,4 @@
+import imagecompare from '@primevue/themes/aura/imagecompare';
 import accordion from '@primevue/themes/lara/accordion';
 import autocomplete from '@primevue/themes/lara/autocomplete';
 import avatar from '@primevue/themes/lara/avatar';
@@ -120,6 +121,7 @@ export default {
         galleria,
         iconfield,
         image,
+        imagecompare,
         inlinemessage,
         inplace,
         inputchips,
diff --git a/packages/themes/src/presets/material/imagecompare/index.js b/packages/themes/src/presets/material/imagecompare/index.js
new file mode 100644
index 000000000..3570e59e0
--- /dev/null
+++ b/packages/themes/src/presets/material/imagecompare/index.js
@@ -0,0 +1,20 @@
+export default {
+    handle: {
+        size: '30px',
+        background: 'rgba(255,255,255,0.3)',
+        border: {
+            width: '3px',
+            style: 'solid',
+            color: 'rgba(255,255,255,0.3)',
+            radius: '50%'
+        },
+        transitionDuration: '{transition.duration}',
+        focusRing: {
+            width: '{focus.ring.width}',
+            style: '{focus.ring.style}',
+            color: 'rgba(255,255,255,0.3)',
+            offset: '{focus.ring.offset}',
+            shadow: '{focus.ring.shadow}'
+        }
+    }
+};
diff --git a/packages/themes/src/presets/material/imagecompare/package.json b/packages/themes/src/presets/material/imagecompare/package.json
new file mode 100644
index 000000000..eff82196e
--- /dev/null
+++ b/packages/themes/src/presets/material/imagecompare/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./index.js",
+    "module": "./index.js",
+    "types": "../types/imagecompare/index.d.ts"
+}
diff --git a/packages/themes/src/presets/material/index.js b/packages/themes/src/presets/material/index.js
index 193cec53e..febd42705 100644
--- a/packages/themes/src/presets/material/index.js
+++ b/packages/themes/src/presets/material/index.js
@@ -1,3 +1,4 @@
+import imagecompare from '@primevue/themes/aura/imagecompare';
 import accordion from '@primevue/themes/material/accordion';
 import autocomplete from '@primevue/themes/material/autocomplete';
 import avatar from '@primevue/themes/material/avatar';
@@ -120,6 +121,7 @@ export default {
         galleria,
         iconfield,
         image,
+        imagecompare,
         inlinemessage,
         inplace,
         inputchips,
diff --git a/packages/themes/src/presets/nora/imagecompare/index.js b/packages/themes/src/presets/nora/imagecompare/index.js
new file mode 100644
index 000000000..3570e59e0
--- /dev/null
+++ b/packages/themes/src/presets/nora/imagecompare/index.js
@@ -0,0 +1,20 @@
+export default {
+    handle: {
+        size: '30px',
+        background: 'rgba(255,255,255,0.3)',
+        border: {
+            width: '3px',
+            style: 'solid',
+            color: 'rgba(255,255,255,0.3)',
+            radius: '50%'
+        },
+        transitionDuration: '{transition.duration}',
+        focusRing: {
+            width: '{focus.ring.width}',
+            style: '{focus.ring.style}',
+            color: 'rgba(255,255,255,0.3)',
+            offset: '{focus.ring.offset}',
+            shadow: '{focus.ring.shadow}'
+        }
+    }
+};
diff --git a/packages/themes/src/presets/nora/imagecompare/package.json b/packages/themes/src/presets/nora/imagecompare/package.json
new file mode 100644
index 000000000..eff82196e
--- /dev/null
+++ b/packages/themes/src/presets/nora/imagecompare/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./index.js",
+    "module": "./index.js",
+    "types": "../types/imagecompare/index.d.ts"
+}
diff --git a/packages/themes/src/presets/nora/index.js b/packages/themes/src/presets/nora/index.js
index 4ee42eddd..4a242dce8 100644
--- a/packages/themes/src/presets/nora/index.js
+++ b/packages/themes/src/presets/nora/index.js
@@ -1,3 +1,4 @@
+import imagecompare from '@primevue/themes/aura/imagecompare';
 import accordion from '@primevue/themes/nora/accordion';
 import autocomplete from '@primevue/themes/nora/autocomplete';
 import avatar from '@primevue/themes/nora/avatar';
@@ -120,6 +121,7 @@ export default {
         galleria,
         iconfield,
         image,
+        imagecompare,
         inlinemessage,
         inplace,
         inputchips,