nuka-carousel - npm Package Compare versions

Comparing version 6.0.3 to 7.0.0

dist/index.d.ts

@@ -75,3 +75,3 @@ import React$1, { ReactNode, CSSProperties } from 'react';
 }) => string;
-interface ControlProps extends Pick<InternalCarouselProps, 'cellAlign' | 'cellSpacing' | 'defaultControlsConfig' | 'onUserNavigation' | 'scrollMode' | 'slidesToScroll' | 'slidesToShow' | 'vertical' | 'wrapAround'> {
+interface ControlProps extends Pick<InternalCarouselProps, 'carouselId' | 'cellAlign' | 'cellSpacing' | 'defaultControlsConfig' | 'carouselId' | 'onUserNavigation' | 'scrollMode' | 'slidesToScroll' | 'slidesToShow' | 'tabbed' | 'vertical' | 'wrapAround'> {
     /**
@@ -166,2 +166,6 @@ * Current slide index
     /**
+     * Unique id attribute for the carousel which may be referenced by aria attributes.
+     */
+    carouselId?: string;
+    /**
      * When displaying more than one slide,
@@ -220,3 +224,3 @@ * sets which position to anchor the current slide to
     /**
-     * Customize the aria-label of the frame container of the carousel. This is useful when you have more than one carousel on the page.
+     * Customize the aria-label of the frame container of the carousel.
      */
@@ -229,2 +233,6 @@ frameAriaLabel?: string;
     /**
+     * Whether the carousel should be designated as a landmark region.
+     */
+    landmark: boolean;
+    /**
      * optional callback function
@@ -325,2 +333,6 @@ */
     /**
+     * Whether tab pagination is used to set appropriate roles for slides.
+     */
+    tabbed: boolean;
+    /**
      * Not migrated yet
@@ -355,6 +367,6 @@ *
 
-declare const PreviousButton: ({ previousSlide, defaultControlsConfig: { prevButtonClassName, prevButtonStyle, prevButtonText, prevButtonOnClick, }, onUserNavigation, previousDisabled: disabled, }: ControlProps) => JSX.Element;
-declare const NextButton: ({ nextSlide, defaultControlsConfig: { nextButtonClassName, nextButtonStyle, nextButtonText, nextButtonOnClick, }, nextDisabled: disabled, onUserNavigation, }: ControlProps) => JSX.Element;
-declare const PagingDots: ({ pagingDotsIndices, defaultControlsConfig: { pagingDotsContainerClassName, pagingDotsClassName, pagingDotsStyle, pagingDotsOnClick, }, currentSlide, onUserNavigation, slideCount, goToSlide, }: ControlProps) => JSX.Element;
+declare const PreviousButton: ({ previousSlide, defaultControlsConfig: { prevButtonClassName, prevButtonStyle, prevButtonText, prevButtonOnClick, }, onUserNavigation, carouselId, previousDisabled: disabled, }: ControlProps) => JSX.Element;
+declare const NextButton: ({ nextSlide, defaultControlsConfig: { nextButtonClassName, nextButtonStyle, nextButtonText, nextButtonOnClick, }, carouselId, nextDisabled: disabled, onUserNavigation, }: ControlProps) => JSX.Element;
+declare const PagingDots: ({ pagingDotsIndices, defaultControlsConfig: { pagingDotsContainerClassName, pagingDotsClassName, pagingDotsStyle, pagingDotsOnClick, }, carouselId, currentSlide, onUserNavigation, slideCount, goToSlide, tabbed, }: ControlProps) => JSX.Element | null;
 
 export { Alignment, CarouselProps, CarouselState, CellAlign, ControlProps, Directions, EasingFunction, InternalCarouselProps, KeyCodeConfig, KeyCodeFunction, KeyCodeMap, NextButton, PagingDots, Positions, PreviousButton, RenderControlFunctionNames, ScrollMode, Slide, SlideHeight, Carousel as default };

dist/index.js

@@ -151,3 +151,5 @@ "use strict";
   id,
-  carouselRef
+  carouselRef,
+  carouselId,
+  tabbed
 }) => {
@@ -197,2 +199,5 @@ var _a;
       ),
+      id: typeOfSlide ? void 0 : `${carouselId}-slide-${index + 1}`,
+      role: tabbed ? "tabpanel" : "group",
+      "aria-roledescription": tabbed ? void 0 : "slide",
       children
@@ -345,2 +350,3 @@ })
   onUserNavigation,
+  carouselId,
   previousDisabled: disabled
@@ -364,2 +370,3 @@ }) => {
       "aria-label": "previous",
+      "aria-controls": `${carouselId}-slider-frame`,
       type: "button",
@@ -396,2 +403,3 @@ children: prevButtonText || "Prev"
   },
+  carouselId,
   nextDisabled: disabled,
@@ -416,2 +424,3 @@ onUserNavigation
       "aria-label": "next",
+      "aria-controls": `${carouselId}-slider-frame`,
       type: "button",
@@ -484,6 +493,8 @@ children: nextButtonText || "Next"
   },
+  carouselId,
   currentSlide,
   onUserNavigation,
   slideCount,
-  goToSlide
+  goToSlide,
+  tabbed
 }) => {
@@ -509,13 +520,22 @@ const listStyles = {
   const currentSlideBounded = getBoundedIndex(currentSlide, slideCount);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("ul", { className: pagingDotsContainerClassName, style: listStyles, children: pagingDotsIndices.map((slideIndex, i) => {
-    const isActive = currentSlideBounded === slideIndex || // sets navigation dots active if the current slide falls in the current index range
-    currentSlideBounded < slideIndex && (i === 0 || currentSlideBounded > pagingDotsIndices[i - 1]);
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      "li",
-      {
-        className: isActive ? "paging-item active" : "paging-item",
-        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  if (!tabbed)
+    return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "div",
+    {
+      className: pagingDotsContainerClassName,
+      style: listStyles,
+      role: "tablist",
+      "aria-label": "Choose slide to display.",
+      children: pagingDotsIndices.map((slideIndex, i) => {
+        const isActive = currentSlideBounded === slideIndex || // sets navigation dots active if the current slide falls in the current index range
+        currentSlideBounded < slideIndex && (i === 0 || currentSlideBounded > pagingDotsIndices[i - 1]);
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           "button",
           {
-            className: pagingDotsClassName,
+            className: [
+              "paging-item",
+              pagingDotsClassName,
+              isActive ? "active" : null
+            ].join(" "),
             type: "button",
@@ -530,4 +550,6 @@ style: __spreadValues(__spreadValues({}, getButtonStyles(isActive)), pagingDotsStyle),
             },
-            "aria-label": `slide ${slideIndex + 1} bullet`,
+            "aria-label": `slide ${slideIndex + 1}`,
             "aria-selected": isActive,
+            "aria-controls": `${carouselId}-slide-${slideIndex + 1}`,
+            role: "tab",
             children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -545,8 +567,8 @@ "svg",
             )
-          }
-        )
-      },
-      slideIndex
-    );
-  }) });
+          },
+          slideIndex
+        );
+      })
+    }
+  );
 };
@@ -826,2 +848,3 @@
               defaultControlsConfig: props.defaultControlsConfig || {},
+              carouselId: props.carouselId,
               pagingDotsIndices,
@@ -838,2 +861,3 @@ goToSlide,
               slidesToShow: props.slidesToShow || 1,
+              tabbed: props.tabbed,
               vertical: props.vertical,
@@ -874,3 +898,3 @@ wrapAround: props.wrapAround
   enableKeyboardControls: false,
-  frameAriaLabel: "carousel-slider",
+  frameAriaLabel: "Slider",
   keyCodeConfig: {
@@ -883,2 +907,3 @@ nextSlide: [39, 68, 38, 87],
   },
+  landmark: false,
   onDragStart: () => {
@@ -903,2 +928,3 @@ },
   swiping: true,
+  tabbed: true,
   vertical: false,
@@ -990,2 +1016,3 @@ withoutControls: false,
     const props = rawProps;
+    const internalCarouselId = (0, import_react10.useId)();
     const {
@@ -1000,2 +1027,3 @@ adaptiveHeight,
       beforeSlide,
+      carouselId = internalCarouselId,
       cellAlign: propsCellAlign,
@@ -1011,2 +1039,3 @@ cellSpacing,
       keyCodeConfig,
+      landmark,
       onDrag,
@@ -1026,2 +1055,3 @@ onDragEnd,
       swiping: mobileDraggingEnabled,
+      tabbed,
       wrapAround,
@@ -1437,2 +1467,3 @@ zoomScale
             id: `${typeOfSlide}-${index}`,
+            carouselId,
             count: slideCount,
@@ -1453,2 +1484,3 @@ index,
             carouselRef,
+            tabbed,
             children: child
@@ -1470,2 +1502,7 @@ },
         onMouseLeave,
+        "aria-label": frameAriaLabel,
+        role: landmark ? "region" : "group",
+        "aria-roledescription": "carousel",
+        id: carouselId,
+        "data-testid": carouselId,
         children: [
@@ -1483,3 +1520,3 @@ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           controls_default(
-            props,
+            __spreadProps(__spreadValues({}, props), { carouselId }),
             slideCount,
@@ -1507,4 +1544,2 @@ currentSlide,
               }, style),
-              "aria-label": frameAriaLabel,
-              role: "region",
               tabIndex: enableKeyboardControls ? 0 : -1,
@@ -1520,2 +1555,4 @@ onKeyDown: enableKeyboardControls ? onKeyDown : void 0,
               onTouchMove,
+              id: `${carouselId}-slider-frame`,
+              "data-testid": `${carouselId}-slider-frame`,
               children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
@@ -1522,0 +1559,0 @@ SliderList,

package.json

 {
   "name": "nuka-carousel",
-  "version": "6.0.3",
+  "version": "7.0.0",
   "description": "Pure React Carousel",
@@ -13,8 +13,7 @@ "main": "dist/index.js",
     "@babel/core": "^7.17.2",
-    "@storybook/addon-actions": "^6.5.9",
-    "@storybook/addon-essentials": "^6.5.9",
-    "@storybook/addon-links": "^6.5.9",
-    "@storybook/builder-webpack5": "^6.5.9",
-    "@storybook/manager-webpack5": "^6.5.9",
-    "@storybook/react": "^6.5.9",
+    "@storybook/addon-actions": "^7.4.6",
+    "@storybook/addon-essentials": "^7.4.6",
+    "@storybook/addon-links": "^7.4.6",
+    "@storybook/react": "^7.4.6",
+    "@storybook/react-webpack5": "^7.4.6",
     "@testing-library/jest-dom": "^5.16.5",
@@ -24,2 +23,3 @@ "@testing-library/react": "^13.3.0",
     "@types/exenv": "^1.2.0",
+    "@types/jest-axe": "^3.5.6",
     "@types/node": "^18.7.5",
@@ -33,2 +33,3 @@ "@types/react": "^18.0.0",
     "exenv": "^1.2.0",
+    "jest-axe": "^8.0.0",
     "jest-environment-jsdom": "^28.1.3",
@@ -40,2 +41,3 @@ "prop-types": "^15.6.0",
     "require-from-string": "^2.0.2",
+    "storybook": "^7.4.6",
     "tsup": "^6.7.0",
@@ -92,6 +94,6 @@ "typescript": "^4.5.2",
     "package": "pnpm pack",
-    "storybook": "start-storybook -p 6006",
-    "storybook:build": "build-storybook",
+    "storybook": "storybook dev -p 6006",
+    "storybook:build": "storybook build",
     "chromatic": "chromatic --exit-zero-on-changes"
   }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

318007

increased by2.14%

Lines of code

3444

increased by2.56%

Worsened metrics

Dev dependency count

33

increased by6.45%

Published versions last months

0

decreased by-100%

No dependency changes