[Wizard.Step] accessibilityInfo prop is declared but not used in accessibilityLabel

[qyscott]

The Wizard.Step component declares an accessibilityInfo?: string prop in its TypeScript interface (WizardStepProps), suggesting that developers can provide custom accessibility text for screen readers.

However, this prop is never actually used when generating the accessibilityLabel. Instead, the component only reads accessibilityInfo from a global StatesConfig[state] object (e.g., StatesConfig.enabled.accessibilityInfo), making it impossible to customize accessibility text per step.

This leads to:

• Misleading documentation/type definitions
• Inability to provide meaningful, step-specific screen reader announcements
• Poor accessibility compliance (WCAG)
  platform:Android
  react-native : 0.77.1
  react-native-ui-lib : 7.43.0

[qyscott]

import React, { useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { Wizard, Button } from 'react-native-ui-lib';


const WizardScreen = () => {
  const [activeIndex, setActiveIndex] = useState(0);
  const [completedStepIndex, setCompletedStepIndex] = useState(-1);

  const steps = [
    { label: '基本信息' },
    { label: '详细信息' },
    { label: '确认信息' },
    { label: '完成' }
  ];

  const activeConfig = {
    color: '#3366FF',
    circleSize: 32,
    circleBackgroundColor: 'gray',
    circleColor: 'yellow',
  };

  const activeConfig1 = {
    color: '#10fc08ff',
    circleSize: 16,
    circleBackgroundColor: '#d6dff8ff',
    circleColor: 'red',
  };

  const handleNext = () => {
    if (activeIndex < steps.length - 1) {
      setActiveIndex(activeIndex + 1);
      setCompletedStepIndex(activeIndex);
    }
  };

  const handlePrev = () => {
    if (activeIndex > 0) {
      setActiveIndex(activeIndex - 1);
    }
  };

  return (

        <View style={styles.container}>
          <Text>设置accessibilityInfo </Text>
          <Wizard
            activeIndex={activeIndex}
            onActiveIndexChanged={setActiveIndex}
            activeConfig={activeConfig}
          >
            {steps.map((step, index) => (
              <Wizard.Step
                key={index}
                state={Wizard.States.ERROR}
                label={step.label}
                accessibilityInfo={"双击激活此步骤，填写您的姓名、年龄等基本信息"}
              />
            ))}
          </Wizard>

          <Text>未设置accessibilityInfo</Text>
          <Wizard
            activeIndex={activeIndex}
            onActiveIndexChanged={setActiveIndex}
            activeConfig={activeConfig}
          >
            {steps.map((step, index) => (
              <Wizard.Step
                key={index}
                state={Wizard.States.ENABLED}
                label={step.label}
              />
            ))}
          </Wizard>
        </View>

  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#FFFFFF',
  },

    comparisonBlock: {
    marginBottom: 24, // 增加两个测试用例之间的间距
  },
  subLabel: {
    fontSize: 12,
    color: '#666',
    fontFamily: 'monospace', // 代码字体显示样式值
    marginBottom: 8,
  },
    referenceContainer: {
    backgroundColor: '#ffd6ad', // 鲜明的橙色背景，用于衬托transparent效果
    padding: 4,
    borderRadius: 4,
    borderWidth: 1,
    borderColor: '#ffa726',
  },

  title: {
    fontSize: 24,
    fontWeight: 'bold',
    textAlign: 'center',
    marginBottom: 30,
    color: '#333333',
  },
  contentContainer: {
    flex: 1,
    marginTop: 30,
  },
  stepContent: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  stepTitle: {
    fontSize: 20,
    fontWeight: '600',
    marginBottom: 10,
    color: '#333333',
  },
  stepDescription: {
    fontSize: 16,
    textAlign: 'center',
    color: '#666666',
    lineHeight: 22,
  },
  buttonContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginTop: 'auto',
    paddingHorizontal: 10,
  },
  button: {
    minWidth: 100,
    height: 44,
  },
  disabledButton: {
    opacity: 0.5,
  },
});

export default WizardScreen;