fix: accesibility issues

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,

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 })

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

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%);