Fix/SW-1563 accessibility

* fix(SW-1563): Added new IconButton component to the design system and removed Icon variant inside the Button component * fix(SW-1563): Added buttons around clickable images and changed to design system components * fix(SW-1563): Renamed variants to match Figma * fix(SW-1563): Renamed AriaButton to ButtonRAC Approved-by: Michael Zetterberg Approved-by: Matilda Landström
2025-05-02 06:27:30 +00:00
parent efcbde1647
commit 8b32abbefc
32 changed files with 909 additions and 547 deletions
--- a/apps/scandic-web/components/Lightbox/Gallery/gallery.module.css
+++ b/apps/scandic-web/components/Lightbox/Gallery/gallery.module.css
@@ -0,0 +1,160 @@
+.galleryContainer {
+  display: grid;
+  gap: var(--Space-x2);
+  padding: var(--Space-x2);
+  height: 100%;
+  overflow-y: auto;
+  background-color: var(--Base-Background-Primary-Normal);
+}
+
+.mobileGallery {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--Space-x1);
+  padding-bottom: var(--Space-x3);
+}
+
+.thumbnailContainer {
+  position: relative;
+  height: 242px;
+}
+
+.fullWidthImage {
+  grid-column: 1 / -1;
+  height: 240px;
+}
+
+.imageButton {
+  position: relative;
+  height: 100%;
+  width: 100%;
+  padding: 0;
+  border-width: 0;
+  background-color: transparent;
+  cursor: pointer;
+  border-radius: var(--Corner-radius-Medium);
+  overflow: hidden;
+  z-index: 0;
+
+  &:focus-visible {
+    outline-offset: -2px; /* Adjust the outline offset as wrappers uses overflow-hidden */
+  }
+}
+
+.image {
+  transition: opacity 0.3s ease-in-out;
+  object-fit: cover;
+  z-index: -1;
+}
+
+@media screen and (max-width: 767px) {
+  .desktopCloseIcon,
+  .desktopGallery {
+    display: none;
+  }
+
+  .closeButton {
+    justify-self: start;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .mobileGallery,
+  .mobileCloseIcon {
+    display: none;
+  }
+
+  .galleryContainer {
+    padding: var(--Spacing-x5) var(--Spacing-x6);
+  }
+
+  .closeButton {
+    position: absolute;
+    top: var(--Space-x2);
+    right: var(--Space-x2);
+    z-index: 1;
+  }
+
+  .desktopGallery {
+    display: grid;
+    grid-template-rows: 28px 1fr 7.8125rem;
+    row-gap: var(--Spacing-x-one-and-half);
+    background-color: var(--Base-Background-Primary-Normal);
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .galleryHeader {
+    display: flex;
+    align-items: center;
+  }
+
+  .imageCaption {
+    background-color: var(--Base-Surface-Subtle-Normal);
+    padding: var(--Spacing-x-half) var(--Spacing-x1);
+    border-radius: var(--Corner-radius-Small);
+    color: var(--Text-Secondary);
+  }
+
+  .mainImageWrapper {
+    position: relative;
+    width: 100%;
+  }
+
+  .mainImageContainer {
+    width: 100%;
+    height: 100%;
+    will-change: transform;
+    position: absolute;
+  }
+
+  .desktopThumbnailGrid {
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    gap: var(--Spacing-x1);
+    max-height: 7.8125rem;
+    overflow: hidden;
+  }
+
+  .thumbnailContainer {
+    height: 125px;
+  }
+
+  .fullWidthImage {
+    grid-column: auto;
+    height: auto;
+  }
+
+  .thumbnailContainer img {
+    border-radius: var(--Corner-radius-Small);
+  }
+
+  .navigationButton {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    background-color: var(--Component-Button-Inverted-Fill-Default);
+    color: var(--Component-Button-Inverted-On-fill-Default);
+    border-radius: var(--Corner-radius-rounded);
+    padding: 10px;
+    cursor: pointer;
+    border-width: 0;
+    display: flex;
+    z-index: 1;
+    box-shadow: 0px 0px 8px 1px #0000001a;
+
+    &:hover {
+      background-color: var(--Component-Button-Inverted-Fill-Hover);
+      color: var(--Component-Button-Inverted-On-fill-Hover);
+    }
+  }
+
+  .galleryPrevButton {
+    left: var(--Spacing-x2);
+  }
+
+  .galleryNextButton {
+    right: var(--Spacing-x2);
+  }
+}