fix: styling issues

intershop · Feb 16, 2024 · 55eb2e3 · 55eb2e3
1 parent 2dfcd92
commit 55eb2e3
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 17 deletions.
diff --git a/src/app/shared/components/filter/filter-swatch-images/filter-swatch-images.component.html b/src/app/shared/components/filter/filter-swatch-images/filter-swatch-images.component.html
@@ -1,19 +1,20 @@
 <ul class="filter-list clearfix" [id]="'filter-list_' + filterElement.name">
   <ng-container *ngFor="let facet of filterElement.facets">
     <li class="filter-item filter-color" [ngClass]="{ 'filter-selected': facet.selected }">
-      <button
-        type="button"
-        class="filter-swatch btn btn-link btn-link-action"
+      <a
+        class="filter-swatch"
         [title]="facet.displayName + ' (' + facet.count + ')'"
         (click)="filter(facet)"
+        (keypress.down)="filter(facet)"
         [attr.data-testing-id]="'filter-link-' + (facet.displayName | sanitize)"
+        tabindex="0"
       >
         <span
           [style.background-image]="getBackgroundImage(facet)"
           [style.background-color]="getBackgroundColor(facet)"
           [style.border]="facet.displayName.toLowerCase() === 'white' ? '1px solid #ddd' : null"
         ></span>
-      </button>
+      </a>
     </li>
   </ng-container>
 </ul>
diff --git a/...ts/product/product-variation-select-swatch/product-variation-select-swatch.component.html b/...ts/product/product-variation-select-swatch/product-variation-select-swatch.component.html
@@ -1,17 +1,17 @@
 <ul>
   <li *ngFor="let option of group.options" [ngClass]="{ selected: option.active }">
-    <button
-      type="button"
-      class="btn btn-link btn-link-action"
+    <a
       (click)="optionChange(group.id, option.value)"
+      (keydown.enter)="optionChange(group.id, option.value)"
       title="{{ option.label }}"
+      tabindex="0"
     >
       <span
         *ngIf="group.attributeType === 'colorCode'"
         [ngStyle]="{ 'background-color': '#' + option.metaData }"
         [ngClass]="{ 'light-color': option.label.toLowerCase() === 'white' }"
       ></span>
       <img *ngIf="group.attributeType === 'swatchImage'" [src]="option.metaData" alt="{{ option.label }}" />
-    </button>
+    </a>
   </li>
 </ul>
diff --git a/...ts/product/product-variation-select-swatch/product-variation-select-swatch.component.scss b/...ts/product/product-variation-select-swatch/product-variation-select-swatch.component.scss
@@ -14,7 +14,7 @@ ul {
       border: 1px solid $border-color-light;
     }
 
-    button {
+    a {
       display: block;
       border: 1px solid transparent;
       border-radius: 50%;

diff --git a/src/app/shell/header/header-navigation/header-navigation.component.html b/src/app/shell/header/header-navigation/header-navigation.component.html
@@ -19,19 +19,20 @@
       {{ category.name }}
     </a>
     <ng-container *ngIf="0 < mainNavigationMaxSubCategoriesDepth && category.hasChildren">
-      <button
-        type="button"
-        class="dropdown-toggle btn btn-link btn-link-action"
+      <a
+        class="dropdown-toggle"
         (click)="toggleOpen(category.uniqueId)"
+        (keydown.enter)="toggleOpen(category.uniqueId)"
         [attr.aria-label]="
           isOpened(category.uniqueId)
             ? ('header.navigation.collapse_category.aria_label' | translate : { '0': category.name })
             : ('header.navigation.expand_category.aria_label' | translate : { '0': category.name })
         "
+        tabindex="0"
       >
         <fa-icon *ngIf="isOpened(category.uniqueId); else closed" [icon]="['fas', 'minus']" />
         <ng-template #closed> <fa-icon [icon]="['fas', 'plus']" /> </ng-template>
-      </button>
+      </a>
       <ish-sub-category-navigation [categoryUniqueId]="category.uniqueId" [subCategoriesDepth]="1" [view]="view" />
     </ng-container>
   </li>

diff --git a/src/app/shell/header/sub-category-navigation/sub-category-navigation.component.html b/src/app/shell/header/sub-category-navigation/sub-category-navigation.component.html
@@ -16,20 +16,21 @@
       >{{ subcategory.name }}</a
     >
     <ng-container *ngIf="subCategoriesDepth < mainNavigationMaxSubCategoriesDepth && subcategory.hasChildren">
-      <button
-        type="button"
-        class="dropdown-toggle btn btn-link btn-link-action"
+      <a
+        class="dropdown-toggle"
         [ngClass]="{ 'd-none': view === 'full' }"
         (click)="toggleOpen(subcategory.uniqueId)"
+        (keydown.enter)="toggleOpen(subcategory.uniqueId)"
         [attr.aria-label]="
           isOpened(subcategory.uniqueId)
             ? ('header.navigation.collapse_category.aria_label' | translate : { '0': subcategory.name })
             : ('header.navigation.expand_category.aria_label' | translate : { '0': subcategory.name })
         "
+        tabindex="0"
       >
         <fa-icon *ngIf="isOpened(subcategory.uniqueId); else closed" [icon]="['fas', 'minus']" />
         <ng-template #closed> <fa-icon [icon]="['fas', 'plus']" /> </ng-template>
-      </button>
+      </a>
       <ish-sub-category-navigation
         [categoryUniqueId]="subcategory.uniqueId"
         [subCategoriesDepth]="subCategoriesDepth + 1"

diff --git a/src/styles/global/buttons.scss b/src/styles/global/buttons.scss
@@ -71,6 +71,12 @@
     margin-left: 0;
   }
 
+  &.btn-link {
+    font-family: $font-family-regular;
+    text-decoration: none;
+    text-transform: unset;
+  }
+
   &.btn-link-inline {
     display: inline;
     padding: 0;
@@ -112,6 +118,7 @@ button.btn-link {
 
   &.btn-link-action {
     padding: 0;
+    font-size: unset;
   }
 
   &:hover,