From b98a78ed33a36867f26c24c3c25f53088dcd3d53 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Germ=C3=A1n=20Saracca?= <gersaracca@gmail.com>
Date: Wed, 11 Dec 2024 23:14:17 -0300
Subject: [PATCH] fix: accesibility issues

---
 .../collection-items-panel/CollectionItemsPanel.tsx         | 5 ++++-
 .../filter-panel/facets-filters/FacetFilterGroup.tsx        | 6 ++++--
 .../filter-panel/facets-filters/FacetsFilters.module.scss   | 4 ++--
 .../selected-facets/SelectedFacets.module.scss              | 2 +-
 4 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/sections/collection/collection-items-panel/CollectionItemsPanel.tsx b/src/sections/collection/collection-items-panel/CollectionItemsPanel.tsx
index 981fa6b4c..21e7b066a 100644
--- a/src/sections/collection/collection-items-panel/CollectionItemsPanel.tsx
+++ b/src/sections/collection/collection-items-panel/CollectionItemsPanel.tsx
@@ -37,13 +37,16 @@ interface CollectionItemsPanelProps {
  * 2. When the user scrolls to the bottom of the list and there are more items to load
  * 3. When the user submits a search query in the search panel
  * 4. When the user changes the item types in the filter panel
- * 5. When the user navigates back and forward in the browser
+ * 5. When the user selects or removes a facet filter
+ * 6. When the user navigates back and forward in the browser
  *
  * It initializes the search criteria with the query params in the URL.
  * By default if no query params are present in the URL, the search query is empty and the item types are COLLECTION and DATASET.
  * Every time a load of items is triggered, the pagination info is updated and the URL is updated with the new query params so it can be shared and the user can navigate back and forward in the browser.
  */
 
+// TODO:ME - Fix Tests
+
 export const CollectionItemsPanel = ({
   collectionId,
   collectionRepository,
diff --git a/src/sections/collection/collection-items-panel/filter-panel/facets-filters/FacetFilterGroup.tsx b/src/sections/collection/collection-items-panel/filter-panel/facets-filters/FacetFilterGroup.tsx
index 1772de07f..4f9b7f90c 100644
--- a/src/sections/collection/collection-items-panel/filter-panel/facets-filters/FacetFilterGroup.tsx
+++ b/src/sections/collection/collection-items-panel/filter-panel/facets-filters/FacetFilterGroup.tsx
@@ -1,5 +1,6 @@
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import cn from 'classnames'
 import { Button, Col, Row } from '@iqss/dataverse-design-system'
 import { X as CloseIcon } from 'react-bootstrap-icons'
 import { CollectionItemsFacet } from '@/collection/domain/models/CollectionItemSubset'
@@ -64,8 +65,9 @@ export const FacetFilterGroup = ({
             <li key={label.name}>
               <Button
                 onClick={() => handleClickFacetLabel(facet.name, label.name)}
-                role="option"
-                aria-selected={isFacetLabelSelected}
+                className={cn(styles['facet-label-button'], {
+                  [styles['selected']]: isFacetLabelSelected
+                })}
                 aria-label={
                   isFacetLabelSelected
                     ? t('removeSelectedFacet', { labelName: label.name })
diff --git a/src/sections/collection/collection-items-panel/filter-panel/facets-filters/FacetsFilters.module.scss b/src/sections/collection/collection-items-panel/filter-panel/facets-filters/FacetsFilters.module.scss
index 86c8306f3..75b36b0e7 100644
--- a/src/sections/collection/collection-items-panel/filter-panel/facets-filters/FacetsFilters.module.scss
+++ b/src/sections/collection/collection-items-panel/filter-panel/facets-filters/FacetsFilters.module.scss
@@ -41,13 +41,13 @@
         display: flex;
       }
 
-      button {
+      .facet-label-button {
         padding: 0;
         text-align: left;
         text-decoration: none;
         text-wrap: nowrap;
 
-        &[aria-selected='true'] {
+        &.selected {
           font-weight: 600;
         }
 
diff --git a/src/sections/collection/collection-items-panel/selected-facets/SelectedFacets.module.scss b/src/sections/collection/collection-items-panel/selected-facets/SelectedFacets.module.scss
index 1f89c0e09..83ed78265 100644
--- a/src/sections/collection/collection-items-panel/selected-facets/SelectedFacets.module.scss
+++ b/src/sections/collection/collection-items-panel/selected-facets/SelectedFacets.module.scss
@@ -11,7 +11,7 @@
     align-items: center;
     padding-right: 2px;
     padding-block: 2px;
-    color: $dv-primary-color;
+    color: color.adjust($dv-primary-color, $blackness: 5%);
     font-weight: 600;
     font-size: 80%;
     background-color: color.adjust($dv-primary-color, $lightness: 50%);