@tarojs/components-react 4.1.12-beta.62 → 4.1.12-beta.64

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

@@ -18,6 +18,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; // 可见行数
@@ -128,6 +138,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);
@@ -288,7 +300,19 @@ function PickerGroupBasic(props) {
     get children() {
       return [createComponent(View, {
         className: "taro-picker__mask",
-        ariaHidden: true
+        style: a11yOpen ? {
+          pointerEvents: 'auto'
+        } : undefined,
+        ariaRole: "slider",
+        ariaLabel: ariaLabel,
+        ariaAction: [{
+          name: 'increment',
+          label: 'increment'
+        }, {
+          name: 'decrement',
+          label: 'decrement'
+        }],
+        onAriaAction: handleAriaAction
       }), createComponent(View, mergeProps({
         className: "taro-picker__indicator",
         ariaHidden: true
@@ -299,11 +323,7 @@ function PickerGroupBasic(props) {
         scrollY: true,
         showScrollbar: false,
         className: "taro-picker__content",
-        ariaHidden: true
-      }, {
-        accessibilityElementsHidden: true,
-        importantForAccessibility: 'no-hide-descendants'
-      }, {
+        ariaHidden: true,
         style: {
           height: PICKER_LINE_HEIGHT * PICKER_VISIBLE_ITEMS
         },
@@ -316,28 +336,6 @@ function PickerGroupBasic(props) {
         onScrollEnd: handleScrollEnd,
         scrollWithAnimation: true,
         children: realPickerItems
-      })), createComponent(View, mergeProps({
-        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
       }))];
     }
   });
@@ -361,6 +359,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);
@@ -537,7 +536,19 @@ function PickerGroupTime(props) {
     get children() {
       return [createComponent(View, {
         className: "taro-picker__mask",
-        ariaHidden: true
+        style: a11yOpen ? {
+          pointerEvents: 'auto'
+        } : undefined,
+        ariaRole: "slider",
+        ariaLabel: ariaLabel,
+        ariaAction: [{
+          name: 'increment',
+          label: 'increment'
+        }, {
+          name: 'decrement',
+          label: 'decrement'
+        }],
+        onAriaAction: handleAriaAction
       }), createComponent(View, mergeProps({
         className: "taro-picker__indicator",
         ariaHidden: true
@@ -548,11 +559,7 @@ function PickerGroupTime(props) {
         scrollY: true,
         showScrollbar: false,
         className: "taro-picker__content",
-        ariaHidden: true
-      }, {
-        accessibilityElementsHidden: true,
-        importantForAccessibility: 'no-hide-descendants'
-      }, {
+        ariaHidden: true,
         style: {
           height: PICKER_LINE_HEIGHT * PICKER_VISIBLE_ITEMS
         },
@@ -565,28 +572,6 @@ function PickerGroupTime(props) {
         onScrollEnd: handleScrollEnd,
         scrollWithAnimation: true,
         children: realPickerItems
-      })), createComponent(View, mergeProps({
-        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
       }))];
     }
   });
@@ -607,6 +592,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);
@@ -762,7 +748,19 @@ function PickerGroupDate(props) {
     get children() {
       return [createComponent(View, {
         className: "taro-picker__mask",
-        ariaHidden: true
+        style: a11yOpen ? {
+          pointerEvents: 'auto'
+        } : undefined,
+        ariaRole: "slider",
+        ariaLabel: ariaLabel,
+        ariaAction: [{
+          name: 'increment',
+          label: 'increment'
+        }, {
+          name: 'decrement',
+          label: 'decrement'
+        }],
+        onAriaAction: handleAriaAction
       }), createComponent(View, mergeProps({
         className: "taro-picker__indicator",
         ariaHidden: true
@@ -773,11 +771,7 @@ function PickerGroupDate(props) {
         scrollY: true,
         showScrollbar: false,
         className: "taro-picker__content",
-        ariaHidden: true
-      }, {
-        accessibilityElementsHidden: true,
-        importantForAccessibility: 'no-hide-descendants'
-      }, {
+        ariaHidden: true,
         style: {
           height: PICKER_LINE_HEIGHT * PICKER_VISIBLE_ITEMS
         },
@@ -790,28 +784,6 @@ function PickerGroupDate(props) {
         onScrollEnd: handleScrollEnd,
         scrollWithAnimation: true,
         children: realPickerItems
-      })), createComponent(View, mergeProps({
-        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
       }))];
     }
   });
@@ -836,6 +808,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);
@@ -999,7 +972,19 @@ function PickerGroupRegion(props) {
     get children() {
       return [createComponent(View, {
         className: "taro-picker__mask",
-        ariaHidden: true
+        style: a11yOpen ? {
+          pointerEvents: 'auto'
+        } : undefined,
+        ariaRole: "slider",
+        ariaLabel: ariaLabel,
+        ariaAction: [{
+          name: 'increment',
+          label: 'increment'
+        }, {
+          name: 'decrement',
+          label: 'decrement'
+        }],
+        onAriaAction: handleAriaAction
       }), createComponent(View, mergeProps({
         className: "taro-picker__indicator",
         ariaHidden: true
@@ -1010,11 +995,7 @@ function PickerGroupRegion(props) {
         scrollY: true,
         showScrollbar: false,
         className: "taro-picker__content",
-        ariaHidden: true
-      }, {
-        accessibilityElementsHidden: true,
-        importantForAccessibility: 'no-hide-descendants'
-      }, {
+        ariaHidden: true,
         style: {
           height: PICKER_LINE_HEIGHT * PICKER_VISIBLE_ITEMS
         },
@@ -1027,28 +1008,6 @@ function PickerGroupRegion(props) {
         onScrollEnd: handleScrollEnd,
         scrollWithAnimation: true,
         children: realPickerItems
-      })), createComponent(View, mergeProps({
-        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
       }))];
     }
   });