@tarojs/components-react 4.1.12-beta.61 → 4.1.12-beta.63

package/dist/components/picker/picker-group-slider.js

@@ -17,6 +17,16 @@ function usePickerItemScrollIntoView() {
   }, []);
   return [scrollIntoView, scrollToItemId];
 }
+/** 系统读屏是否开启：开启时 mask 需可命中（关掉 pointer-events:none） */
+function useA11yOpen() {
+  const [a11yOpen, setA11yOpen] = React.useState(false);
+  React.useEffect(() => {
+    Taro.checkIsOpenAccessibility().then(res => {
+      setA11yOpen(!!res.open);
+    }).catch(() => {});
+  }, []);
+  return a11yOpen;
+}
 // 定义常量
 const PICKER_LINE_HEIGHT = 34; // px
 const PICKER_VISIBLE_ITEMS = 7; // 可见行数
@@ -127,6 +137,8 @@ function PickerGroupBasic(props) {
   const [currentIndex, setCurrentIndex] = React.useState(selectedIndex);
   // 触摸状态用于优化用户体验
   const isTouchingRef = React.useRef(false);
+  // 系统读屏开启时关闭 mask 的 pointer-events:none，便于无障碍命中；未开启则保持穿透以便手势滚动
+  const a11yOpen = useA11yOpen();
   const lengthScaleRatioRef = React.useRef(1);
   const useMeasuredScaleRef = React.useRef(false);
   const itemHeightRef = React.useRef(PICKER_LINE_HEIGHT);
@@ -281,10 +293,23 @@ function PickerGroupBasic(props) {
     },
     children: [/*#__PURE__*/jsx(View, {
       className: "taro-picker__mask",
-      ariaHidden: true
+      style: a11yOpen ? {
+        pointerEvents: 'auto'
+      } : undefined,
+      ariaRole: "slider",
+      ariaLabel: ariaLabel
+      // @ts-expect-error Taro View 未声明无障碍扩展 props
+      ,
+      ariaAction: [{
+        name: 'increment',
+        label: 'increment'
+      }, {
+        name: 'decrement',
+        label: 'decrement'
+      }],
+      onAriaAction: handleAriaAction
     }), /*#__PURE__*/jsx(View, {
       className: "taro-picker__indicator",
-      ariaHidden: true,
       ...(indicatorStyle ? {
         style: indicatorStyle
       } : {})
@@ -294,8 +319,6 @@ function PickerGroupBasic(props) {
       showScrollbar: false,
       className: "taro-picker__content",
       ariaHidden: true,
-      accessibilityElementsHidden: true,
-      importantForAccessibility: 'no-hide-descendants',
       style: {
         height: PICKER_LINE_HEIGHT * PICKER_VISIBLE_ITEMS
       },
@@ -308,28 +331,6 @@ function PickerGroupBasic(props) {
       onScrollEnd: handleScrollEnd,
       scrollWithAnimation: true,
       children: realPickerItems
-    }), /*#__PURE__*/jsx(View, {
-      className: "taro-picker__a11y-overlay",
-      style: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        pointerEvents: 'none'
-      },
-      ariaRole: "slider",
-      ...(ariaLabel !== undefined ? {
-        ariaLabel
-      } : {}),
-      ariaAction: [{
-        name: 'increment',
-        label: 'increment'
-      }, {
-        name: 'decrement',
-        label: 'decrement'
-      }],
-      onAriaAction: handleAriaAction
     })]
   });
 }
@@ -352,6 +353,7 @@ function PickerGroupTime(props) {
   const scrollViewRef = React.useRef(null);
   const [currentIndex, setCurrentIndex] = React.useState(selectedIndex);
   const isTouchingRef = React.useRef(false);
+  const a11yOpen = useA11yOpen();
   const lengthScaleRatioRef = React.useRef(1);
   const useMeasuredScaleRef = React.useRef(false);
   const itemHeightRef = React.useRef(PICKER_LINE_HEIGHT);
@@ -522,7 +524,21 @@ function PickerGroupTime(props) {
     },
     children: [/*#__PURE__*/jsx(View, {
       className: "taro-picker__mask",
-      ariaHidden: true
+      style: a11yOpen ? {
+        pointerEvents: 'auto'
+      } : undefined,
+      ariaRole: "slider",
+      ariaLabel: ariaLabel
+      // @ts-expect-error Taro View 未声明无障碍扩展 props
+      ,
+      ariaAction: [{
+        name: 'increment',
+        label: 'increment'
+      }, {
+        name: 'decrement',
+        label: 'decrement'
+      }],
+      onAriaAction: handleAriaAction
     }), /*#__PURE__*/jsx(View, {
       className: "taro-picker__indicator",
       ariaHidden: true,
@@ -549,28 +565,6 @@ function PickerGroupTime(props) {
       onScrollEnd: handleScrollEnd,
       scrollWithAnimation: true,
       children: realPickerItems
-    }), /*#__PURE__*/jsx(View, {
-      className: "taro-picker__a11y-overlay",
-      style: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        pointerEvents: 'none'
-      },
-      ariaRole: "slider",
-      ...(ariaLabel !== undefined ? {
-        ariaLabel
-      } : {}),
-      ariaAction: [{
-        name: 'increment',
-        label: 'increment'
-      }, {
-        name: 'decrement',
-        label: 'decrement'
-      }],
-      onAriaAction: handleAriaAction
     })]
   });
 }
@@ -590,6 +584,7 @@ function PickerGroupDate(props) {
   const scrollViewRef = React.useRef(null);
   const [currentIndex, setCurrentIndex] = React.useState(selectedIndex);
   const isTouchingRef = React.useRef(false);
+  const a11yOpen = useA11yOpen();
   const lengthScaleRatioRef = React.useRef(1);
   const useMeasuredScaleRef = React.useRef(false);
   const itemHeightRef = React.useRef(PICKER_LINE_HEIGHT);
@@ -739,7 +734,21 @@ function PickerGroupDate(props) {
     },
     children: [/*#__PURE__*/jsx(View, {
       className: "taro-picker__mask",
-      ariaHidden: true
+      style: a11yOpen ? {
+        pointerEvents: 'auto'
+      } : undefined,
+      ariaRole: "slider",
+      ariaLabel: ariaLabel
+      // @ts-expect-error Taro View 未声明无障碍扩展 props
+      ,
+      ariaAction: [{
+        name: 'increment',
+        label: 'increment'
+      }, {
+        name: 'decrement',
+        label: 'decrement'
+      }],
+      onAriaAction: handleAriaAction
     }), /*#__PURE__*/jsx(View, {
       className: "taro-picker__indicator",
       ariaHidden: true,
@@ -766,28 +775,6 @@ function PickerGroupDate(props) {
       onScrollEnd: handleScrollEnd,
       scrollWithAnimation: true,
       children: realPickerItems
-    }), /*#__PURE__*/jsx(View, {
-      className: "taro-picker__a11y-overlay",
-      style: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        pointerEvents: 'none'
-      },
-      ariaRole: "slider",
-      ...(ariaLabel !== undefined ? {
-        ariaLabel
-      } : {}),
-      ariaAction: [{
-        name: 'increment',
-        label: 'increment'
-      }, {
-        name: 'decrement',
-        label: 'decrement'
-      }],
-      onAriaAction: handleAriaAction
     })]
   });
 }
@@ -811,6 +798,7 @@ function PickerGroupRegion(props) {
   const isTouchingRef = React.useRef(false);
   // 程序化滚动标记：开屏/受控同步预设值时置 true，避免被 region 级联门误判为用户滚动而重置后续列
   const syncScrollFromPropsRef = React.useRef(false);
+  const a11yOpen = useA11yOpen();
   const lengthScaleRatioRef = React.useRef(1);
   const useMeasuredScaleRef = React.useRef(false);
   const itemHeightRef = React.useRef(PICKER_LINE_HEIGHT);
@@ -968,7 +956,21 @@ function PickerGroupRegion(props) {
     },
     children: [/*#__PURE__*/jsx(View, {
       className: "taro-picker__mask",
-      ariaHidden: true
+      style: a11yOpen ? {
+        pointerEvents: 'auto'
+      } : undefined,
+      ariaRole: "slider",
+      ariaLabel: ariaLabel
+      // @ts-expect-error Taro View 未声明无障碍扩展 props
+      ,
+      ariaAction: [{
+        name: 'increment',
+        label: 'increment'
+      }, {
+        name: 'decrement',
+        label: 'decrement'
+      }],
+      onAriaAction: handleAriaAction
     }), /*#__PURE__*/jsx(View, {
       className: "taro-picker__indicator",
       ariaHidden: true,
@@ -995,28 +997,6 @@ function PickerGroupRegion(props) {
       onScrollEnd: handleScrollEnd,
       scrollWithAnimation: true,
       children: realPickerItems
-    }), /*#__PURE__*/jsx(View, {
-      className: "taro-picker__a11y-overlay",
-      style: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        pointerEvents: 'none'
-      },
-      ariaRole: "slider",
-      ...(ariaLabel !== undefined ? {
-        ariaLabel
-      } : {}),
-      ariaAction: [{
-        name: 'increment',
-        label: 'increment'
-      }, {
-        name: 'decrement',
-        label: 'decrement'
-      }],
-      onAriaAction: handleAriaAction
     })]
   });
 }