fix: apply style for span role img (#420)

* fix: apply style for span role img * fix: role image to span missing
anct-cartographie-nationale · Dec 19, 2023 · 74d15a2 · 74d15a2
1 parent 480a8c2
commit 74d15a2
Show file tree

Hide file tree

Showing 6 changed files with 8 additions and 8 deletions.
diff --git a/...components/lieux-mediation-numerique-details/boutons-action/boutons-action.component.html b/...components/lieux-mediation-numerique-details/boutons-action/boutons-action.component.html
@@ -30,7 +30,7 @@
       type="button"
       class="btn btn-tile px-md-0 py-md-4 p-2 d-flex flex-md-column flex-row"
       (click)="openImpressionChoiceModal.emit($event); onPrintFromActionButton()">
-      <span role="img" class="ri-circled bg-primary text-light fw-normal">
+      <span class="ri-circled bg-primary text-light fw-normal">
         <span role="img" class="ri-printer-line" aria-hidden="true"></span>
       </span>
       <span class="mt-md-2 mb-md-0 ms-md-0 ms-2 fw-bold">Imprimer</span>

diff --git a/...iation-numerique-details/modalites-accompagnement/modalites-accompagnement.component.html b/...iation-numerique-details/modalites-accompagnement/modalites-accompagnement.component.html
@@ -1,7 +1,7 @@
 <div class="row d-print-none">
   <div class="text-center col-md col-6 my-md-0 my-3" *ngFor="let modaliteAccompagnement of modalitesAccompagnement">
     <span class="ri-circled bg-light fw-normal">
-      <i [ngClass]="modaliteAccompagnement.icon" aria-hidden="true"></i>
+      <span role="img" [ngClass]="modaliteAccompagnement.icon" aria-hidden="true"></span>
     </span>
     <div class="mt-2">
       <b class="text-lowercase">{{ modaliteAccompagnement.label }}</b>

diff --git a/...artographie/components/lieux-mediation-numerique-details/services/services.component.html b/...artographie/components/lieux-mediation-numerique-details/services/services.component.html
@@ -3,7 +3,7 @@ <h2 class="h5 text-muted-dark">Services proposés</h2>
   <div *ngFor="let service of services" class="col-6 my-2">
     <div class="bg-light py-3 d-flex align-items-center">
       <span class="ri-circled-sm bg-primary text-light fw-normal d-sm-block d-none me-3 ms-3 text-center">
-        <i [ngClass]="getIconFromServices(service)" aria-hidden="true"></i>
+        <span role="img" [ngClass]="getIconFromServices(service)" aria-hidden="true"></span>
       </span>
       <small>{{ service }}</small>
     </div>

diff --git a/src/features/cartographie/layouts/cartographie/cartographie.layout.html b/src/features/cartographie/layouts/cartographie/cartographie.layout.html
@@ -171,8 +171,8 @@ <h3 class="card-title text-primary">
             href="https://labase.anct.gouv.fr/base/356?tags=&page=0&tab=resources"
             target="_blank"
             rel="noopener noreferrer">
-            <span role="img" class="ri-circled bg-primary text-light fw-normal me-3" aria-hidden="true">
-              <span class="ri-link"></span>
+            <span class="ri-circled bg-primary text-light fw-normal me-3" aria-hidden="true">
+              <span role="img" class="ri-link"></span>
             </span>
             <span class="orientation-btn-label my-auto text-start lh-sm">
               La Cartographie nationale sur la Base

diff --git a/src/features/orientation/components/besoin-link/besoin-link.component.html b/src/features/orientation/components/besoin-link/besoin-link.component.html
@@ -12,7 +12,7 @@
     <span role="img" class="ri-check-line m-auto" aria-hidden="true"></span>
   </span>
   <span class="ri-circled bg-primary text-light fw-normal me-3 mt-3 d-sm-block d-none">
-    <i [ngClass]="serviceItem.icon" aria-hidden="true"></i>
+    <span role="img" [ngClass]="serviceItem.icon" aria-hidden="true"></span>
   </span>
   <span class="text-start py-lg-3 py-2">
     <span class="orientation-btn-label">{{ serviceItem.label }}</span>

diff --git a/src/scss/components/_icons.scss b/src/scss/components/_icons.scss
@@ -98,7 +98,7 @@ $font-family-icons-lower: string.to-lower-case($font-family-icons);
   width: $square-lg;
   height: $square-lg;
 
-  i {
+  span[role='img'] {
     position: absolute;
     left: 0;
     top: 0;
@@ -117,7 +117,7 @@ $font-family-icons-lower: string.to-lower-case($font-family-icons);
   width: $square-sm;
   height: $square-sm;
 
-  i {
+  span[role='img'] {
     position: absolute;
     left: 0;
     top: 0;