Tokens for ImageCompare

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>

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 {

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;
+    height: ${dt('imagecompare.handle.size')};
-    width: 45px;
+    width: ${dt('imagecompare.handle.size')};
-    background: #ffffff33;
+    background: ${dt('imagecompare.handle.background')};
-    border: 3px solid #ffffff99;
+    border: ${dt('imagecompare.handle.border.width')} ${dt('imagecompare.handle.border.style')} ${dt('imagecompare.handle.border.color')};
-    border-radius: 50%;
+    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 {
+.p-imagecompare-slider:focus-visible::-webkit-slider-thumb {
-    height: 45px;
+    box-shadow: ${dt('imagecompare.handle.focus.ring.shadow')};
-    width: 45px;
+    outline: ${dt('imagecompare.handle.focus.ring.width')} ${dt('imagecompare.handle.focus.ring.style')} ${dt('imagecompare.handle.focus.ring.color')};
-    background: #ffffff33;
+    outline-offset: ${dt('imagecompare.handle.focus.ring.offset')};
-    border: 3px solid #ffffff99;
-    border-radius: 50%;
-    background-size: contain;
-    cursor: ew-resize;
 }
 `;
 

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}'
+        }
+    }
+};

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}'
+        }
+    }
+};

packages/themes/src/presets/lara/imagecompare/package.json

@@ -0,0 +1,5 @@
+{
+    "main": "./index.js",
+    "module": "./index.js",
+    "types": "../types/imagecompare/index.d.ts"
+}

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,

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}'
+        }
+    }
+};

packages/themes/src/presets/material/imagecompare/package.json

@@ -0,0 +1,5 @@
+{
+    "main": "./index.js",
+    "module": "./index.js",
+    "types": "../types/imagecompare/index.d.ts"
+}

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,

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}'
+        }
+    }
+};

packages/themes/src/presets/nora/imagecompare/package.json

@@ -0,0 +1,5 @@
+{
+    "main": "./index.js",
+    "module": "./index.js",
+    "types": "../types/imagecompare/index.d.ts"
+}

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,