From c35cf6e6aa16a31eceb07b5bcd2f6b059973cc3e Mon Sep 17 00:00:00 2001
From: timotheegoguely <timothee@goguely.com>
Date: Wed, 16 Oct 2024 17:56:45 +0200
Subject: [PATCH] Add counter on selected items

---
 src/assets/css/index.css                      |  1 +
 src/assets/css/src/3.utilities.counter.css    | 13 +++++++++
 .../add-images-modal/AddImagesModal.vue       | 17 -----------
 .../add-images-modal/ImagesResources.vue      |  5 ++--
 .../add-images-modal/MyImages.vue             |  5 ++--
 src/views/Project.vue                         | 29 +++++++++++++++----
 6 files changed, 44 insertions(+), 26 deletions(-)
 create mode 100644 src/assets/css/src/3.utilities.counter.css

diff --git a/src/assets/css/index.css b/src/assets/css/index.css
index a789e6a..c65682a 100644
--- a/src/assets/css/index.css
+++ b/src/assets/css/index.css
@@ -24,6 +24,7 @@
 /* UTILITY CLASSES */
 @import 'src/3.utilities.border.css';
 @import 'src/3.utilities.colors.css';
+@import 'src/3.utilities.counter.css';
 @import 'src/3.utilities.flex.css';
 @import 'src/3.utilities.flow.css';
 @import 'src/3.utilities.icons.css';
diff --git a/src/assets/css/src/3.utilities.counter.css b/src/assets/css/src/3.utilities.counter.css
new file mode 100644
index 0000000..8fdeb86
--- /dev/null
+++ b/src/assets/css/src/3.utilities.counter.css
@@ -0,0 +1,13 @@
+/* COUNTER UTILITY */
+
+.counter {
+  counter-reset: selected-items;
+}
+
+.counter > [aria-selected="true"]:first-of-type {
+  outline: 2px solid red;
+}
+
+.counter > [aria-selected="true"] {
+  counter-increment: selected-items;
+}
diff --git a/src/components/project/client-brief/add-images-modal/AddImagesModal.vue b/src/components/project/client-brief/add-images-modal/AddImagesModal.vue
index 0d1c6e1..8ff7a44 100644
--- a/src/components/project/client-brief/add-images-modal/AddImagesModal.vue
+++ b/src/components/project/client-brief/add-images-modal/AddImagesModal.vue
@@ -84,7 +84,6 @@ const deleteIsOpen = false;
 <style>
 #add-images {
   --sidebar-width: 12.5rem;
-  counter-set: selected-images;
   width: min(100vw - var(--gutter) * 2, 100rem);
   height: min(100vh - var(--gutter) * 2, 60rem);
   padding-top: var(--space-16);
@@ -121,25 +120,9 @@ const deleteIsOpen = false;
   aspect-ratio: 1/1;
 }
 #add-images .image {
-  counter-increment: selected-images;
   aspect-ratio: 1/1;
   border-radius: var(--rounded-xl);
 }
-#add-images .image::after {
-  content: counter(selected-images);
-  top: var(--space-12);
-  right: var(--space-12);
-  border-radius: 50%;
-  color: var(--color-white);
-  font-weight: 700;
-  background: var(--color-grey-800);
-  mask: none;
-  display: grid;
-  place-items: center;
-  text-align: center;
-  width: 1.5rem;
-  height: 1.5rem;
-}
 #add-images .image img {
   height: 100%;
   width: 100%;
diff --git a/src/components/project/client-brief/add-images-modal/ImagesResources.vue b/src/components/project/client-brief/add-images-modal/ImagesResources.vue
index 7dcaac4..346aedb 100644
--- a/src/components/project/client-brief/add-images-modal/ImagesResources.vue
+++ b/src/components/project/client-brief/add-images-modal/ImagesResources.vue
@@ -1,9 +1,10 @@
 <template>
-  <div class="auto-grid" style="--min: 15rem; --gap: 0.5rem">
+  <div class="auto-grid | counter" role="grid" multiselectable="true" style="--min: 15rem; --gap: 0.5rem">
     <figure
       v-for="image in tab.images"
       class="image"
-      :class="{ selected: isSelected(image) }"
+      role="gridcell"
+      :aria-selected="isSelected(image)"
     >
       <img
         :src="image.url"
diff --git a/src/components/project/client-brief/add-images-modal/MyImages.vue b/src/components/project/client-brief/add-images-modal/MyImages.vue
index 30273ee..fcaafd0 100644
--- a/src/components/project/client-brief/add-images-modal/MyImages.vue
+++ b/src/components/project/client-brief/add-images-modal/MyImages.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="auto-grid" style="--min: 15rem; --gap: 0.5rem">
+  <div class="auto-grid | counter" role="grid" multiselectable="true" style="--min: 15rem; --gap: 0.5rem">
     <FileUpload
       mode="basic"
       name="images[]"
@@ -44,7 +44,8 @@
     <figure
       v-for="image in tab.images"
       class="image"
-      :class="{ selected: isSelected(image) }"
+      role="gridcell"
+      :aria-selected="isSelected(image)"
     >
       <img
         :src="image.url"
diff --git a/src/views/Project.vue b/src/views/Project.vue
index a483440..7c974d8 100644
--- a/src/views/Project.vue
+++ b/src/views/Project.vue
@@ -215,11 +215,7 @@ function setStepStatus(stepName) {
   border-radius: var(--rounded-2xl);
   overflow: hidden;
   position: relative;
-}
-.image .tag {
-  position: absolute;
-  top: var(--space-12);
-  left: var(--space-12);
+  cursor: pointer;
 }
 .image.has-description::after {
   content: "";
@@ -235,6 +231,29 @@ function setStepStatus(stepName) {
   top: 1.25rem;
   right: 1.25rem;
 }
+.image[aria-selected="true"] {
+  outline: 2px solid var(--color-focus-ring);
+}
+.image[aria-selected="true"]::after {
+  content: counter(selected-items);
+  position: absolute;
+  top: var(--space-12);
+  right: var(--space-12);
+  border-radius: 50%;
+  color: var(--color-white);
+  font-weight: 700;
+  background: var(--color-grey-800);
+  display: grid;
+  place-items: center;
+  text-align: center;
+  width: 1.5rem;
+  height: 1.5rem;
+}
+.image .tag {
+  position: absolute;
+  top: var(--space-12);
+  left: var(--space-12);
+}
 
 /* Kanban */
 .kanban {