Skip to content

Feat: Support accessibilityLabel for Switch components #30706

@kj800x

Description

@kj800x

Description

This is a feature request. <Switch /> components do not support the accessibilityLabel prop.

Motivation: I am using the Appium testing framework as it is the preferred framework for integrating with BrowserStack. Appium highly recommends using accessibilityLabel to identify components, allowing developers to fallback on XPath as a last resort.

React Native version:

I am currently using react-native@0.62.1 but looking at the online docs for <Switch /> I see that the prop is still not supported in latest (0.63).

System:
    OS: macOS 10.15.7
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
    Memory: 125.42 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 12.14.1 - ~/.nvm/versions/node/v12.14.1/bin/node
    Yarn: 1.22.4 - ~/.nvm/versions/node/v12.14.1/bin/yarn
    npm: 6.13.4 - ~/.nvm/versions/node/v12.14.1/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.10.0 - /Users/kjohnson/.rbenv/shims/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 14.0, DriverKit 19.0, macOS 10.15, tvOS 14.0, watchOS 7.0
    Android SDK: Not Found
  IDEs:
    Android Studio: 3.2 AI-181.5540.7.32.5056338
    Xcode: 12.0.1/12A7300 - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.2 - /usr/bin/javac
    Python: 2.7.17 - /usr/local/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.11.0 => 16.11.0
    react-native: 0.62.1 => 0.62.1
  npmGlobalPackages:
    *react-native*: Not Found

Steps To Reproduce

  1. Render <Switch accessibilityLabel="test" />
  2. <android.widget.Switch> has no content-desc property. This property should have the same value as the accessibilityLabel prop.

Screen Shot 2021-01-08 at 11 54 07 AM

Expected Results

When viewed in Appium or another app view source explorer, the <android.widget.Switch> node in the rendered tree will have a content-desc="test" (see the ViewGroup for reference). The correct corresponding property will be set on iOS.

Snack, code example, screenshot, or link to a repository:

import React from 'react';
import { Switch, View } from 'react-native';

function App() {
  return <View><Switch accessibilityLabel="test" /></View>
}

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions