Merge pull request #1369 from maykinmedia/fix/2665-safari-format

🐛 [#2665] Fix phone-parsing Safari (iOS only)
maykinmedia · Jan 30, 2025 · 6b18dc3 · 6b18dc3
2 parents 7267440 + 2bcc9a0
commit 6b18dc3
Show file tree

Hide file tree

Showing 8 changed files with 31 additions and 15 deletions.
diff --git a/src/open_inwoner/conf/parts/case_document_notification.html b/src/open_inwoner/conf/parts/case_document_notification.html
@@ -22,7 +22,7 @@ <h1>Nieuw:</h1>
             <h2>{{ type_description }}</h2>
         </td>
         <td class="td--responsive td-mail td-mail__bg-info td__padding-all td__rightcell td__alignright" colspan="3">
-            <p><span class="text-color__small-gray-900">Zaaknummer: </span><br/>{{ identification }}</p>
+            <p><span class="text-color__small-gray-900 skip-phone-parsing">Zaaknummer: </span><br/>&zwj;{{ identification }}</p>
         </td>
     </tr>
 

diff --git a/src/open_inwoner/conf/parts/case_status_notification.html b/src/open_inwoner/conf/parts/case_status_notification.html
@@ -22,7 +22,7 @@ <h1>Nieuw:</h1>
             <h2>{{ type_description }}</h2>
         </td>
         <td class="td--responsive td-mail td-mail__bg-info td__padding-all td__rightcell td__alignright" colspan="3">
-            <p><span class="text-color__small-gray-900">Zaaknummer: </span><br/>{{ identification }}</p>
+            <p><span class="text-color__small-gray-900 skip-phone-parsing">Zaaknummer: </span><br/>&zwj;{{ identification }}</p>
         </td>
     </tr>
 

diff --git a/src/open_inwoner/conf/parts/case_status_notification_action_required.html b/src/open_inwoner/conf/parts/case_status_notification_action_required.html
@@ -22,7 +22,7 @@ <h1>Nieuw:</h1>
             <h2>{{ type_description }}</h2>
         </td>
         <td class="td--responsive td-mail td-mail__bg-danger td__padding-all td__rightcell td__alignright" colspan="3">
-            <p><span class="text-color__small-gray-900">Zaaknummer: </span><br/>{{ identification }}</p>
+            <p><span class="text-color__small-gray-900 skip-phone-parsing">Zaaknummer: </span><br/>&zwj;{{ identification }}</p>
         </td>
     </tr>
 

diff --git a/src/open_inwoner/scss/components/AccessibilityHeader/AccessibilityHeader.scss b/src/open_inwoner/scss/components/AccessibilityHeader/AccessibilityHeader.scss
@@ -57,17 +57,6 @@
       line-height: var(--font-line-height-body-medium);
     }
   }
-
-  .skip-link {
-    position: absolute;
-    top: -50px;
-    transition: top 0.2s;
-
-    &:focus {
-      position: relative;
-      top: 0;
-    }
-  }
 }
 
 // Accessibility header within different components

diff --git a/src/open_inwoner/scss/components/AccessibilitySkipLink/AccessibilitySkipLink.scss b/src/open_inwoner/scss/components/AccessibilitySkipLink/AccessibilitySkipLink.scss
@@ -4,7 +4,10 @@
   text-decoration: none;
 
   &--visible-on-focus {
+    left: 100%;
+
     &:focus {
+      left: initial;
       text-decoration: none;
     }
   }

diff --git a/src/open_inwoner/scss/views/_view.scss b/src/open_inwoner/scss/views/_view.scss
@@ -62,4 +62,14 @@
       display: inline;
     }
   }
+
+  // Remove Safari iOS phone-parsing from specific elements
+  .skip-phone-parsing {
+    pointer-events: none;
+  }
+  // Hide style for iOS-rendered anchor element
+  .skip-phone-parsing > a {
+    text-decoration: none;
+    color: inherit;
+  }
 }
diff --git a/src/open_inwoner/static/mailcss/email.css b/src/open_inwoner/static/mailcss/email.css
@@ -260,6 +260,17 @@ strong .color--primary, strong .color--secondary {
     border-top: 3px solid #999999;
 }
 
+/* iOS specific */
+
+.skip-phone-parsing {
+    pointer-events: none;
+}
+
+.skip-phone-parsing > a {
+    text-decoration: none;
+    color: inherit;
+}
+
 /* CKEditor only */
 
 .cke_editable a {

diff --git a/src/open_inwoner/templates/pages/cases/list_inner.html b/src/open_inwoner/templates/pages/cases/list_inner.html
@@ -82,7 +82,10 @@ <h2 class="card__heading-2">{{ case.description }}</h2>
                             {% else %}
                                 {% list_item case.current_status caption=_("Status") compact=True strong=False %}
                             {% endif %}
-                            {% list_item case.identification caption=_("Zaaknummer") compact=True strong=False %}
+                            <li class="list-item list-item--compact">
+                               <p class="utrecht-paragraph list-item__caption">Zaaknummer</p>
+                               <p class="utrecht-paragraph skip-phone-parsing">&zwj;{{ case.identification }}</p>
+                            </li>
                         {% endrender_list %}
 
                         <span class="link link--icon link--secondary">