@skyscanner/backpack-web 33.1.0 → 33.2.0

package/bpk-component-horizontal-nav/src/BpkHorizontalNav.js

@@ -78,6 +78,7 @@ class BpkHorizontalNav extends Component {
   };
   render() {
     const {
+      ariaLabel,
       autoScrollToSelected,
       children: rawChildren,
       className,
@@ -113,6 +114,7 @@ class BpkHorizontalNav extends Component {
       /*#__PURE__*/
       // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
       _jsx(BpkMobileScrollContainer, {
+        ariaLabel: ariaLabel,
         innerContainerTagName: "nav",
         className: classNames,
         leadingIndicatorClassName: leadingScrollIndicatorClassName,
@@ -131,6 +133,7 @@ class BpkHorizontalNav extends Component {
   }
 }
 BpkHorizontalNav.propTypes = {
+  ariaLabel: PropTypes.string,
   children: PropTypes.node.isRequired,
   /**
    * Ensures that the selected item is within view when loaded on narrow-screened devices.
@@ -139,7 +142,7 @@ BpkHorizontalNav.propTypes = {
   className: PropTypes.string,
   leadingScrollIndicatorClassName: PropTypes.string,
   /**
-   * When set to "false", the bottom border on the component isn't included. This refers 
+   * When set to "false", the bottom border on the component isn't included. This refers
    * to the underline on the whole "BpkHorizontalNav", not the line that appears under the selected item.
    */
   showUnderline: PropTypes.bool,
@@ -147,6 +150,7 @@ BpkHorizontalNav.propTypes = {
   type: PropTypes.oneOf(Object.keys(HORIZONTAL_NAV_TYPES))
 };
 BpkHorizontalNav.defaultProps = {
+  ariaLabel: null,
   autoScrollToSelected: false,
   className: null,
   leadingScrollIndicatorClassName: null,

package/bpk-component-mobile-scroll-container/src/BpkMobileScrollContainer.js

@@ -59,6 +59,7 @@ const computeScrollIndicatorClassName = (scrollerEl, leadingIndicatorClassName =
   return classNames;
 };
 const propTypes = {
+  ariaLabel: PropTypes.string,
   children: PropTypes.node.isRequired,
   scrollerRef: PropTypes.func,
   innerContainerTagName: PropTypes.string,
@@ -69,6 +70,7 @@ const propTypes = {
   showScrollbar: PropTypes.bool
 };
 const defaultProps = {
+  ariaLabel: null,
   scrollerRef: null,
   innerContainerTagName: 'div',
   className: null,
@@ -121,6 +123,7 @@ class BpkMobileScrollContainer extends Component {
   render() {
     const classNames = [getClassName('bpk-mobile-scroll-container')];
     const {
+      ariaLabel,
       children,
       className,
       innerContainerTagName,
@@ -156,6 +159,7 @@ class BpkMobileScrollContainer extends Component {
         onScroll: this.setScrollIndicatorClassName,
         className: scrollerClassNames,
         children: /*#__PURE__*/_jsx(InnerContainer, {
+          "aria-label": ariaLabel,
           ref: el => {
             this.innerEl = el;
           },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "33.1.0",
+  "version": "33.2.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",