Question

我正在尝试为我的应用程序添加可访问性（公开，使用RN的0.59.8版本）。我有用来制作自定义按钮的SVG图像（每个图像位于单独的TSX文件中，称为“ IconClose”）。当我调用这些SVG时，我将它们包装在具有样式和onPress的TouchableOpacity中，以使其充当按钮。我尝试添加accessibilityLabel =“关闭按钮”并将accessibilityRole和accessibilityTraits设置为TouchableOpacity。它们可以用作按钮，并且可以完美地进行导航，但是当我检查可访问性时，我可以点击按钮以将其选中，但是在iOS的语音阅读器中，标签或提示没有显示。我尝试将其包装在View中，尝试在SVG中添加标题和aria标签。有没有办法使这些自定义按钮的语音阅读器可访问？

IconClose按钮

import React from 'react';
import Svg, { Path } from 'svgs';

export const IconClose = (props: any) => (
  <Svg viewBox="0 0 24 24" width="24" height="24" fill="#000000" {...props} >
    <Path
      d="M13.4 12l6.3-6.3c.4-.4.4-1 0-1.4s-1-.4-1.4 0L12 10.6 5.7 4.3c-.4-.4-1-.4-1.4 0s-.4 1 0 1.4l6.3 6.3-6.3 6.3c-.4.4-.4 1 0 1.4.2.2.4.3.7.3s.5-.1.7-.3l6.3-6.3 6.3 6.3c.2.2.5.3.7.3s.5-.1.7-.3c.4-.4.4-1 0-1.4L13.4 12z"
      fill="#231f20"
    />
  </Svg>
);

我在哪里叫按钮

export const Page: FC<IPageProps> = ({ imageSource, location, title, info, actions, content, footer, onCloseButtonPress }) => {
  const renderHeader = () => {
    return (
      <View style={styles.header}>
        {imageSource 
          ? <Image style={styles.image} source={imageSource} />
          : <IconImage width={120} height={120} fill={COLORS.TECH_GRAY} />
        }
        <TouchableOpacity 
          style={styles.closeIcon}
          onPress={onCloseButtonPress} 
          activeOpacity={0.8}
          accessibilityComponentType="button" 
          accessibilityLabel="close">
            <IconClose/>
        </TouchableOpacity>
    </View>
  );
};

SVG制作的自定义按钮的可访问性问题

0 个答案: