fix: retours accessibilité page structure

src/app/shared/components/structure-hours/structure-hours-list.component.html

@@ -7,8 +7,10 @@
     <div *ngIf="!day.value.open" class="openingTime">Fermé</div>
     <div *ngIf="day.value.open" class="openingTime">
       <ng-container *ngFor="let timeRange of day.value.time; let isLast = last">
-        {{ timeRange.formatOpeningDate() }} - {{ timeRange.formatClosingDate() }}
-        <span *ngIf="!isLast"> / </span>
+        <div class="time-range">
+          {{ timeRange.formatOpeningDate() }} - {{ timeRange.formatClosingDate() }}
+        </div>
+        <div *ngIf="!isLast" class="separator">/</div>
       </ng-container>
     </div>
   </li>

src/app/shared/components/structure-hours/structure-hours-list.component.scss

@@ -9,34 +9,36 @@ ul.hoursContainer {
   list-style: none;
   padding: 0;
   margin: 0;
-
+  @media (max-width: 370px) {
+    width: 80%;
+  }
   li.hours {
     width: 350px;
     display: flex;
     flex-direction: row;
-    align-items: center;
-
+    align-items: flex-start;
+    @media (max-width: 370px) {
+      width: 100%;
+    }
     span.circle {
+      padding: 0 8px;
+      background-repeat: no-repeat;
+      background-position: center center;
+      background-size: 11px 10px;
+      background-image: url('../../../../assets/form/hours-open.svg');
+      &.closed {
+        background-image: url('../../../../assets/form/hours-closed.svg');
+      }
       &::before {
         content: '';
         position: absolute;
         border-left: 1px solid $border-hours;
         z-index: -1;
-
         top: 7px;
         left: 8px;
         height: 90%;
       }
-      padding: 0px 8px;
-      background-repeat: no-repeat;
-      background-position: center center;
-      background-size: 11px 10px;
-      background-image: url('../../../../assets/form/hours-open.svg');
-      &.closed {
-        background-image: url('../../../../assets/form/hours-closed.svg');
-      }
     }
-
     .left {
       display: flex;
       gap: 8px;
@@ -50,14 +52,24 @@ ul.hoursContainer {
       @include font-regular-13;
       color: $grey-4-5-1;
       display: flex;
+      flex-direction: row;
       gap: 8px;
+      .time-range {
+        white-space: nowrap;
+      }
+      @media (max-width: 370px) {
+        font-size: 12px;
+        flex-direction: column;
+        .separator {
+          display: none;
+        }
+      }
     }
   }
-
   &.compact {
     gap: 6px;
     li.hours {
-      .left.day {
+      .left .day {
         @include font-bold-12;
       }
       .openingTime {

src/app/shared/components/svg-icon/svg-icon.component.html

@@ -10,9 +10,10 @@
 
 <ng-template #svgIcon>
   <svg
-    aria-hidden="true"
     class="icon"
-    role="presentation"
+    [attr.role]="ariaLabel ? 'image' : 'presentation'"
+    [attr.aria-hidden]="!ariaLabel ? 'true' : 'false'"
+    [attr.aria-label]="ariaLabel ? ariaLabel : null"
     [ngClass]="iconClass"
     [attr.fill]="iconColor"
     [attr.stroke]="iconColor"

src/app/shared/components/svg-icon/svg-icon.component.ts

@@ -19,5 +19,6 @@ export class SvgIconComponent {
   /** If should be interactive */
   @Input() asButton = false;
   @Input() ariaLabel?: string = null;
+
   @Output() action = new EventEmitter<void>();
 }

src/app/shared/components/tcl-stop-points/tcl-stop-points.component.html

@@ -3,14 +3,16 @@
     <span>{{ tclStop.name }}</span>
     <div class="inline listPoints">
       <p *ngFor="let sub of tclStop.subLines">
-        <app-svg-icon [folder]="'tcl'" [icon]="sub" [iconClass]="iconClass" />
+        <app-svg-icon [folder]="'tcl'" [icon]="sub" [iconClass]="iconClass" [ariaLabel]="'Métro ' + sub"/>
       </p>
       <p *ngFor="let tram of tclStop.tramLines">
-        <app-svg-icon [folder]="'tcl'" [icon]="tram" [iconClass]="iconClass" />
+        <app-svg-icon [folder]="'tcl'" [icon]="tram" [iconClass]="iconClass" [ariaLabel]="'Tram ' + tram"/>
       </p>
       <p *ngFor="let bus of tclStop.busLines">
-        <app-svg-icon [folder]="'tcl'" [icon]="bus" [iconClass]="iconClass" />
+        <app-svg-icon [folder]="'tcl'" [icon]="bus" [iconClass]="iconClass" [ariaLabel]="'Bus ' + bus"/>
       </p>
     </div>
   </div>
 </div>
+
+

src/app/structure-list/components/structure-details/structure-details.component.scss

@@ -19,10 +19,19 @@
     width: 100%;
   }
 
+  -webkit-hyphens: auto;
+  hyphens: auto;
+
   h1 {
     @include font-bold-24;
   }
 
+  @media (max-width: 370px) {
+    h1 {
+      font-size: 18px;
+    }
+  }
+
   h2 {
     @include font-bold-18;
     text-transform: uppercase;
@@ -38,7 +47,7 @@
   overflow-y: auto;
   scrollbar-gutter: stable;
   width: 600px;
-  box-shadow: 0px 12px 24px 0px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.1);
   background-color: $white;
 
   @media #{$tablet} {