@watcha-authentic/react-slider 0.1.3 → 0.1.5

package/dist/cjs/component/view/slider.js

@@ -19,7 +19,7 @@ const _slidercontextprovider = require("../context/slider-context-provider");
  * - 드래그로 페이지 전환을 트리거하는 임계값 비율 (아이템 너비 기준)
  */ const CAN_SCROLL_THRESHOLD_RATIO = 0.15;
 const DEFAULT_SCROLL_THRESHOLD = 125;
-const SliderComponent = ({ animationDuration = 500, animationTimingFunction = "ease", defaultIndex = 0, enableDrag = true, gap = 0, itemProps, contentProps, items, visibleCount = 1, disableDraggableItems = true, wrapProps, onCreateItemView, onDraggingNow, onIndexChange, onItemKey }, ref)=>{
+const SliderComponent = ({ animationDuration = 500, animationTimingFunction = "ease", a11yOptions, defaultIndex = 0, enableDrag = true, gap = 0, itemProps, contentProps, items, visibleCount = 1, disableDraggableItems = true, wrapProps, onCreateItemView, onDraggingNow, onIndexChange, onItemKey }, ref)=>{
     const stableOnIndexChange = (0, _reacteventcallback.useEventCallback)(onIndexChange);
     /**
    * - 아이템이 부족할 경우 복제하여 확장된 아이템 배열을 생성합니다.
@@ -73,7 +73,6 @@ const SliderComponent = ({ animationDuration = 500, animationTimingFunction = "e
     const lastSliderInfoCurrentIndex = (0, _react.useRef)(sliderInfo.currentIndex);
     const animateNow = (0, _react.useRef)(false);
     const animateChecker = (0, _react.useRef)(undefined);
-    const capturedDefaultIndex = (0, _react.useRef)(defaultIndex);
     const stopAnimateCheck = (0, _react.useCallback)(()=>{
         clearTimeout(animateChecker.current);
         animateChecker.current = undefined;
@@ -441,7 +440,8 @@ const SliderComponent = ({ animationDuration = 500, animationTimingFunction = "e
                 event.preventDefault();
                 doNext();
             }
-        }
+        },
+        options: a11yOptions
     });
     (0, _react.useImperativeHandle)(ref, (0, _react.useCallback)(()=>{
         return {
@@ -456,6 +456,7 @@ const SliderComponent = ({ animationDuration = 500, animationTimingFunction = "e
     return /*#__PURE__*/ (0, _jsxruntime.jsx)("ul", {
         "aria-roledescription": "carousel",
         role: "region",
+        tabIndex: 0,
         ...wrapProps,
         ...withPointerMove,
         className: [

package/dist/esm/component/view/slider.js

@@ -9,7 +9,7 @@ import { SliderItemContextProvider } from "../context/slider-context-provider.js
  * - 드래그로 페이지 전환을 트리거하는 임계값 비율 (아이템 너비 기준)
  */ const CAN_SCROLL_THRESHOLD_RATIO = 0.15;
 const DEFAULT_SCROLL_THRESHOLD = 125;
-const SliderComponent = ({ animationDuration = 500, animationTimingFunction = "ease", defaultIndex = 0, enableDrag = true, gap = 0, itemProps, contentProps, items, visibleCount = 1, disableDraggableItems = true, wrapProps, onCreateItemView, onDraggingNow, onIndexChange, onItemKey }, ref)=>{
+const SliderComponent = ({ animationDuration = 500, animationTimingFunction = "ease", a11yOptions, defaultIndex = 0, enableDrag = true, gap = 0, itemProps, contentProps, items, visibleCount = 1, disableDraggableItems = true, wrapProps, onCreateItemView, onDraggingNow, onIndexChange, onItemKey }, ref)=>{
     const stableOnIndexChange = useEventCallback(onIndexChange);
     /**
    * - 아이템이 부족할 경우 복제하여 확장된 아이템 배열을 생성합니다.
@@ -63,7 +63,6 @@ const SliderComponent = ({ animationDuration = 500, animationTimingFunction = "e
     const lastSliderInfoCurrentIndex = useRef(sliderInfo.currentIndex);
     const animateNow = useRef(false);
     const animateChecker = useRef(undefined);
-    const capturedDefaultIndex = useRef(defaultIndex);
     const stopAnimateCheck = useCallback(()=>{
         clearTimeout(animateChecker.current);
         animateChecker.current = undefined;
@@ -431,7 +430,8 @@ const SliderComponent = ({ animationDuration = 500, animationTimingFunction = "e
                 event.preventDefault();
                 doNext();
             }
-        }
+        },
+        options: a11yOptions
     });
     useImperativeHandle(ref, useCallback(()=>{
         return {
@@ -446,6 +446,7 @@ const SliderComponent = ({ animationDuration = 500, animationTimingFunction = "e
     return /*#__PURE__*/ _jsx("ul", {
         "aria-roledescription": "carousel",
         role: "region",
+        tabIndex: 0,
         ...wrapProps,
         ...withPointerMove,
         className: [

package/dist/type/component/view/slider.d.ts

@@ -1,3 +1,4 @@
+import { type AccessibilityOptions } from "@watcha-authentic/react-a11y";
 import type { CSSProperties } from "react";
 import type { SlideTriggerEvent } from "../../script/type/slider-types";
 export type SliderRef = HTMLUListElement & {
@@ -53,6 +54,7 @@ type SliderProps<ItemType> = {
      */
     disableDraggableItems?: boolean;
     onDraggingNow?: (isDragging: boolean) => void;
+    a11yOptions?: AccessibilityOptions<HTMLUListElement>;
 };
 /**
  * # 루프 슬라이더 컴포넌트

package/package.json

@@ -6,7 +6,7 @@
     "slider",
     "swiper"
   ],
-  "version": "0.1.3",
+  "version": "0.1.5",
   "homepage": "https://github.com/frograms/bistro-house/tree/master/packages/react-slider#readme",
   "author": {
     "name": "@watcha-authentic#web-dev-group",
@@ -49,7 +49,7 @@
     "dist"
   ],
   "dependencies": {
-    "@watcha-authentic/react-a11y": "^0.1.0",
+    "@watcha-authentic/react-a11y": "^0.1.4",
     "@watcha-authentic/react-event-callback": "^0.1.0",
     "@watcha-authentic/react-motion": "^0.1.0"
   },