MWPW-164458: Fix - Breadcrumb has capital I in iPhone (#3499)

MWPW-164458: Breadcrumb has capital I in iPhone
adobecom · Jan 23, 2025 · 7d4a28d · 7d4a28d
1 parent 13d8ef0
commit 7d4a28d
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 1 deletion.
diff --git a/libs/blocks/global-navigation/features/breadcrumbs/breadcrumbs.js b/libs/blocks/global-navigation/features/breadcrumbs/breadcrumbs.js
@@ -57,9 +57,11 @@ const createBreadcrumbs = (element) => {
     if (hiddenEntries.includes(li.innerText?.toLowerCase().trim())) li.remove();
   });
 
+  const noTransform = element.classList.contains('no-transform') ? ' no-transform' : '';
+
   const breadcrumbs = toFragment`
     <div class="feds-breadcrumbs-wrapper">
-      <nav class="feds-breadcrumbs" aria-label="Breadcrumb">${ul}</nav>
+      <nav class="feds-breadcrumbs${noTransform}" aria-label="Breadcrumb">${ul}</nav>
     </div>
   `;
   ul.querySelector('li:last-of-type')?.setAttribute('aria-current', 'page');

diff --git a/libs/blocks/global-navigation/global-navigation.css b/libs/blocks/global-navigation/global-navigation.css
@@ -378,6 +378,11 @@ header.global-navigation {
   text-transform: capitalize;
 }
 
+.feds-breadcrumbs.no-transform a,
+.feds-breadcrumbs.no-transform [aria-current] {
+  text-transform: none;
+}
+
 .feds-breadcrumbs a {
   display: block;
   color: var(--feds-color-link-breadcrumbs);

diff --git a/test/blocks/global-navigation/features/breadcrumbs.test.js b/test/blocks/global-navigation/features/breadcrumbs.test.js
@@ -19,6 +19,20 @@ export const breadcrumbMock = () => toFragment`
   </div>
 `;
 
+const breadcrumbWithCase = () => toFragment`
+  <div class="breadcrumbs no-transform">
+    <div>
+      <div>
+        <ul>
+          <li><a href="http://www.google.com/">Home</a></li>
+          <li><a href="http://localhost:2000/">Adobe Photoshop</a></li>
+          <li>Photoshop on iPhone</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+`;
+
 export const assertBreadcrumb = ({ breadcrumb, length }) => {
   expect(breadcrumb.querySelector('nav')).to.exist;
   expect(breadcrumb.querySelector('ul').children.length).to.equal(length);
@@ -51,6 +65,12 @@ describe('breadcrumbs', () => {
     assertBreadcrumb({ breadcrumb, length: 2 });
   });
 
+  it('should use make the breadcrumnbs preserve case using css when no-transform modifier is added to block', async () => {
+    const breadcrumb = await breadcrumbs(breadcrumbWithCase());
+    assertBreadcrumb({ breadcrumb, length: 3 });
+    expect(breadcrumb.querySelector('nav').className.includes('no-transform')).to.be.true;
+  });
+
   it('should use a custom page title and show the current page if set', async () => {
     document.head.innerHTML = '<meta name="breadcrumbs-page-title" content="Custom Title"><meta name="breadcrumbs-show-current-page" content="on">';
     const breadcrumb = await breadcrumbs(breadcrumbMock());