Adding pager, scrollview, viewgroup, webview, drawer roles (#34477)

Summary: - adds missing roles - adds custom roles that don't exist in TalkBack (see the [compositor.json][10] and [string.xml][11] files). - fixes [issues with Drawer][12] - fixes issues with ScrollView missing roles - seek control already exist as adjustable https://github.com/facebook/react-native/pull/34477/commits/d460d097ac0f5df8002e072711023517905f9ca9 Relevant https://github.com/facebook/react-native/issues/30839#issuecomment-1222293556 fixes https://github.com/facebook/react-native/issues/30839 ## Changelog [Android] [Fixed] - Adding pager, scrollview, viewgroup, webview, drawer roles Pull Request resolved: https://github.com/facebook/react-native/pull/34477 Test Plan: Android - Drawer Layout and ScrollView (02/09/22) https://github.com/facebook/react-native/pull/34477#issuecomment-1235293165 - sliding drawer, drawer layout, icon menu https://github.com/facebook/react-native/pull/34477#issuecomment-1224112650 - Horizontal and Vertical ScrollView https://github.com/facebook/react-native/pull/34477#issuecomment-1225478289 - Toast https://github.com/facebook/react-native/pull/34477#issuecomment-1225369629 - CheckedTextView https://github.com/facebook/react-native/pull/34477#discussion_r959329833 - Spinner (dropdownlist) https://github.com/facebook/react-native/pull/34477#discussion_r959374894 - EditText https://github.com/facebook/react-native/pull/34477#discussion_r959412185 - WebView https://github.com/facebook/react-native/pull/34477#discussion_r959417518 - Testing chime_up and chime_down sound feedback in Scrollable https://github.com/facebook/react-native/pull/34477#issuecomment-1238882030 iOS https://github.com/facebook/react-native/pull/34477#issuecomment-1232418595 [10]: https://github.com/google/talkback/blob/771de7cdbf55b6adb4ca4c64c27a52584f2337cc/compositor/src/main/res/raw/compositor.json#L1082-L1108 [11]: https://github.com/google/talkback/blob/771de7cdbf55b6adb4ca4c64c27a52584f2337cc/compositor/src/main/res/values/strings.xml#L223 [12]: https://github.com/facebook/react-native/pull/34477#issuecomment-1224112650 Reviewed By: NickGerleman Differential Revision: D39894307 Pulled By: blavalla fbshipit-source-id: 4a8da78bae485ead0523689631d88d1031a07b74
2025-11-01 09:14:26 +00:00 · 2022-11-07 23:25:33 -08:00
parent 78aabd29ca
commit 55c0df43b9
9 changed files with 357 additions and 106 deletions
@@ -0,0 +1,100 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @flow
+ */
+
+'use strict';
+
+import React, {useRef, useState} from 'react';
+import type {Node} from 'react';
+import {
+  Button,
+  DrawerLayoutAndroid,
+  Text,
+  StyleSheet,
+  View,
+} from 'react-native';
+
+const Drawer = () => {
+  const drawer = useRef(null);
+  const [drawerPosition, setDrawerPosition] = useState('left');
+  const changeDrawerPosition = () => {
+    if (drawerPosition === 'left') {
+      setDrawerPosition('right');
+    } else {
+      setDrawerPosition('left');
+    }
+  };
+
+  const navigationView = () => (
+    <View style={[styles.container, styles.navigationContainer]}>
+      <Text style={styles.paragraph}>I'm in the Drawer!</Text>
+      <Button
+        title="Close drawer"
+        /* $FlowFixMe */
+        onPress={() => drawer.current.closeDrawer()}
+      />
+    </View>
+  );
+
+  return (
+    <DrawerLayoutAndroid
+      /* $FlowFixMe */
+      ref={drawer}
+      accessibilityRole="drawerlayout"
+      drawerWidth={300}
+      drawerPosition={drawerPosition}
+      renderNavigationView={navigationView}>
+      <View style={styles.container}>
+        <Text style={styles.paragraph}>Drawer on the {drawerPosition}!</Text>
+        <Button
+          title="Change Drawer Position"
+          onPress={() => changeDrawerPosition()}
+        />
+        <Text style={styles.paragraph}>
+          Swipe from the side or press button below to see it!
+        </Text>
+        <Button
+          title="Open drawer"
+          /* $FlowFixMe */
+          onPress={() => drawer.current.openDrawer()}
+        />
+      </View>
+    </DrawerLayoutAndroid>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 16,
+  },
+  navigationContainer: {
+    backgroundColor: '#ecf0f1',
+  },
+  paragraph: {
+    padding: 16,
+    fontSize: 15,
+    textAlign: 'center',
+  },
+});
+
+exports.title = 'DrawerLayoutAndroid';
+exports.documentationURL =
+  'https://reactnative.dev/docs/next/drawerlayoutandroid';
+exports.description = 'Drawer Example';
+exports.examples = [
+  {
+    title: 'Drawer Example',
+    render(): Node {
+      return <Drawer />;
+    },
+  },
+];