@bbc/psammead-navigation - npm Package Compare versions

Comparing version 9.2.15 to 9.2.16

CHANGELOG.md

@@ -6,2 +6,3 @@ # Psammead Navigation Changelog
 |---------|-------------|
+| 9.2.16 | [PR#4599](https://github.com/bbc/psammead/pull/4599) Fix TalkBack reading nested spans incorrectly, and reading ',' as 'comma' in Dropdown Navigation|
 | 9.2.15 | [PR#4601](https://github.com/bbc/psammead/pull/4601) Bumps dependencies |
@@ -8,0 +9,0 @@ | 9.2.14 | [PR#4587](https://github.com/bbc/psammead/pull/4587) Fix TalkBack reading nested spans incorrectly |

package.json

 {
   "name": "@bbc/psammead-navigation",
-  "version": "9.2.15",
+  "version": "9.2.16",
   "description": "A navigation bar to use on index pages",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

src/DropdownNavigation/index.jsx

@@ -132,16 +132,29 @@ import React, { cloneElement, useRef } from 'react';
   dir,
-}) => (
-  <StyledDropdownLi role="listitem">
-    <StyledDropdownLink script={script} service={service} href={url}>
-      {active && currentPageText ? (
-        <StyledCurrentLink dir={dir}>
-          <VisuallyHiddenText>{currentPageText}, </VisuallyHiddenText>
-          {children}
-        </StyledCurrentLink>
-      ) : (
-        children
-      )}
-    </StyledDropdownLink>
-  </StyledDropdownLi>
-);
+}) => {
+  const ariaId = `dropdownNavigation-${children
+    .replace(/\s+/g, '-')
+    .toLowerCase()}`;
+  return (
+    // aria-labelledby is a temporary fix for the a11y nested span's bug experienced in TalkBack, refer to the following issue: https://github.com/bbc/simorgh/issues/9652
+    <StyledDropdownLi role="listitem">
+      <StyledDropdownLink
+        script={script}
+        service={service}
+        href={url}
+        aria-labelledby={ariaId}
+      >
+        {active && currentPageText ? (
+          // ID is a temporary fix for the a11y nested span's bug experienced in TalkBack, refer to the following issue: https://github.com/bbc/simorgh/issues/9652
+          <StyledCurrentLink dir={dir} id={ariaId}>
+            <VisuallyHiddenText>{`${currentPageText}, `}</VisuallyHiddenText>
+            {children}
+          </StyledCurrentLink>
+        ) : (
+          // ID is a temporary fix for the a11y nested span's bug experienced in TalkBack, refer to the following issue: https://github.com/bbc/simorgh/issues/9652
+          <span id={ariaId}>{children}</span>
+        )}
+      </StyledDropdownLink>
+    </StyledDropdownLi>
+  );
+};
 
@@ -148,0 +161,0 @@ DropdownLi.propTypes = {

src/index.stories.jsx

@@ -139,2 +139,59 @@ import React from 'react';
 
+const dropdownNavigationStory = (
+  currentPageText,
+  navData,
+  dir,
+  isAmp,
+  script,
+  service,
+  brandBackgroundColour,
+  brandForegroundColour,
+  brandBorderColour,
+  brandHighlightColour,
+) => (
+  <>
+    <Navigation
+      script={script}
+      service={service}
+      dir={dir}
+      brandBackgroundColour={brandBackgroundColour}
+      brandForegroundColour={brandForegroundColour}
+      brandBorderColour={brandBorderColour}
+      brandHighlightColour={brandHighlightColour}
+    >
+      <ScrollableNavigation
+        dir={dir}
+        brandBackgroundColour={brandBackgroundColour}
+        brandForegroundColour={brandForegroundColour}
+        brandBorderColour={brandBorderColour}
+        brandHighlightColour={brandHighlightColour}
+      >
+        <DropdownUl>
+          {navData.map((item, index) => {
+            const { title, url } = item;
+            const active = index === 0;
+
+            return (
+              <DropdownLi
+                key={title}
+                url={url}
+                script={script}
+                active={active}
+                currentPageText={currentPageText}
+                service={service}
+                dir={dir}
+                brandForegroundColour={brandForegroundColour}
+                brandHighlightColour={brandHighlightColour}
+                brandBorderColour={brandBorderColour}
+              >
+                {title}
+              </DropdownLi>
+            );
+          })}
+        </DropdownUl>
+      </ScrollableNavigation>
+    </Navigation>
+  </>
+);
+
 const navigationStory = (
@@ -359,2 +416,30 @@ currentPageText,
 
+canonicalStories.add(
+  'Dropdown Navigation',
+  ({
+    script,
+    service,
+    brandBackgroundColour,
+    brandForegroundColour,
+    brandBorderColour,
+    brandHighlightColour,
+  }) =>
+    dropdownNavigationStory(
+      navStoriesData[0].currentPageText,
+      igboNavData,
+      navStoriesData[0].dir,
+      false,
+      script,
+      service,
+      brandBackgroundColour,
+      brandForegroundColour,
+      brandBorderColour,
+      brandHighlightColour,
+    ),
+  {
+    notes,
+    knobs: { escapeHTML: false },
+  },
+);
+
 const ampStories = storiesOf('Components/Navigation/AMP', module)
@@ -361,0 +446,0 @@ .addDecorator(ampDecorator)

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

475177

increased by4.65%

Lines of code

3820

increased by4.97%

No dependency changes