Merge branch 'main' of github.com:MrMuzyk/react-native-paper into refactor/modrnize-badge-component

Author: MrMuzyk

src/components/ActivityIndicator.tsx

@@ -146,8 +146,8 @@ const ActivityIndicator = ({
       style={[styles.container, style]}
       {...rest}
       accessible
-      accessibilityRole="progressbar"
-      accessibilityState={{ busy: animating }}
+      role="progressbar"
+      aria-busy={animating}
     >
       <Animated.View
         style={[{ width: size, height: size, opacity: fade }]}

src/components/Appbar/AppbarAction.tsx

@@ -32,7 +32,7 @@ export type Props = React.ComponentPropsWithoutRef<typeof IconButton> & {
   /**
    * Accessibility label for the button. This is read by the screen reader when the user taps the button.
    */
-  accessibilityLabel?: string;
+  'aria-label'?: string;
   /**
    * Function to execute on press.
    */
@@ -79,7 +79,7 @@ const AppbarAction = ({
   icon,
   disabled,
   onPress,
-  accessibilityLabel,
+  'aria-label': ariaLabel,
   isLeading,
   theme: themeOverrides,
   ref,
@@ -101,7 +101,7 @@ const AppbarAction = ({
       iconColor={actionIconColor}
       icon={icon}
       disabled={disabled}
-      accessibilityLabel={accessibilityLabel}
+      aria-label={ariaLabel}
       animated
       ref={ref}
       {...rest}

src/components/Appbar/AppbarBackAction.tsx

@@ -31,7 +31,7 @@ export type Props = $Omit<
   /**
    * Accessibility label for the button. This is read by the screen reader when the user taps the button.
    */
-  accessibilityLabel?: string;
+  'aria-label'?: string;
   /**
    * Function to execute on press.
    */
@@ -58,12 +58,12 @@ export type Props = $Omit<
  * ```
  */
 const AppbarBackAction = ({
-  accessibilityLabel = 'Back',
+  'aria-label': ariaLabel = 'Back',
   ref,
   ...rest
 }: Props) => (
   <AppbarAction
-    accessibilityLabel={accessibilityLabel}
+    aria-label={ariaLabel}
     {...rest}
     icon={AppbarBackIcon}
     isLeading

src/components/Appbar/AppbarContent.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
-import { Platform, StyleSheet, Pressable, View } from 'react-native';
+import { StyleSheet, Pressable, View } from 'react-native';
 import type {
-  AccessibilityRole,
   GestureResponderEvent,
   StyleProp,
   TextStyle,
@@ -140,15 +139,7 @@ const AppbarContent = ({
           ]}
           numberOfLines={1}
           accessible
-          accessibilityRole={
-            onPress
-              ? 'none'
-              : Platform.OS === 'web'
-                ? ('heading' as 'header')
-                : 'header'
-          }
-          // @ts-expect-error We keep old a11y props for backwards compat with old RN versions
-          accessibilityTraits="header"
+          role={onPress ? 'none' : 'heading'}
           testID={`${testID}-title-text`}
           maxFontSizeMultiplier={titleMaxFontSizeMultiplier}
         >
@@ -162,13 +153,9 @@ const AppbarContent = ({
 
   if (onPress) {
     return (
-      // eslint-disable-next-line react-native-a11y/has-accessibility-props
       <Pressable
-        accessibilityRole={touchableRole}
-        // @ts-expect-error We keep old a11y props for backwards compat with old RN versions
-        accessibilityTraits={touchableRole}
-        accessibilityComponentType="button"
-        accessbilityState={disabled ? 'disabled' : null}
+        role="button"
+        aria-disabled={disabled}
         onPress={onPress}
         disabled={disabled}
         {...contentWrapperProps}
@@ -204,8 +191,6 @@ const styles = StyleSheet.create({
   },
 });
 
-const touchableRole: AccessibilityRole = 'button';
-
 export default AppbarContent;
 
 // @component-docs ignore-next-line

src/components/Banner.tsx

@@ -232,8 +232,8 @@ const Banner = ({
                   color: colors.onSurface,
                 },
               ]}
-              accessibilityLiveRegion={visible ? 'polite' : 'none'}
-              accessibilityRole="alert"
+              aria-live={visible ? 'polite' : 'off'}
+              role="alert"
               maxFontSizeMultiplier={maxFontSizeMultiplier}
             >
               {children}

src/components/BottomNavigation/BottomNavigation.tsx

@@ -23,7 +23,7 @@ export type BaseRoute = {
   focusedIcon?: IconSource;
   unfocusedIcon?: IconSource;
   badge?: string | number | boolean;
-  accessibilityLabel?: string;
+  'aria-label'?: string;
   testID?: string;
   lazy?: boolean;
 };
@@ -77,7 +77,7 @@ export type Props<Route extends BaseRoute> = {
    * - `focusedIcon`:  icon to use as the focused tab icon, can be a string, an image source or a react component @renamed Renamed from 'icon' to 'focusedIcon' in v5.x
    * - `unfocusedIcon`:  icon to use as the unfocused tab icon, can be a string, an image source or a react component @supported Available in v5.x with theme version 3
    * - `badge`: badge to show on the tab icon, can be `true` to show a dot, `string` or `number` to show text.
-   * - `accessibilityLabel`: accessibility label for the tab button
+   * - `aria-label`: accessibility label for the tab button
    * - `testID`: test id for the tab button
    *
    * Example:
@@ -164,7 +164,7 @@ export type Props<Route extends BaseRoute> = {
   renderTouchable?: (props: TouchableProps<Route>) => React.ReactNode;
   /**
    * Get accessibility label for the tab button. This is read by the screen reader when the user taps the tab.
-   * Uses `route.accessibilityLabel` by default.
+   * Uses `route['aria-label']` by default.
    */
   getAccessibilityLabel?: (props: { route: Route }) => string | undefined;
   /**
@@ -523,7 +523,7 @@ const BottomNavigation = <Route extends BaseRoute>({
             <BottomNavigationRouteScreen
               key={route.key}
               pointerEvents={focused ? 'auto' : 'none'}
-              accessibilityElementsHidden={!focused}
+              aria-hidden={!focused}
               importantForAccessibility={
                 focused ? 'auto' : 'no-hide-descendants'
               }

src/components/BottomNavigation/BottomNavigationBar.tsx

@@ -34,7 +34,10 @@ type BaseRoute = {
   focusedIcon?: IconSource;
   unfocusedIcon?: IconSource;
   badge?: string | number | boolean;
-  accessibilityLabel?: string;
+  /**
+   * Accessibility label for the tab. This is read by the screen reader when the user focuses the tab.
+   */
+  'aria-label'?: string;
   testID?: string;
   lazy?: boolean;
 };
@@ -88,7 +91,7 @@ export type Props<Route extends BaseRoute> = {
    * - `focusedIcon`:  icon to use as the focused tab icon, can be a string, an image source or a react component @renamed Renamed from 'icon' to 'focusedIcon' in v5.x
    * - `unfocusedIcon`:  icon to use as the unfocused tab icon, can be a string, an image source or a react component @supported Available in v5.x with theme version 3
    * - `badge`: badge to show on the tab icon, can be `true` to show a dot, `string` or `number` to show text.
-   * - `accessibilityLabel`: accessibility label for the tab button
+   * - `aria-label`: accessibility label for the tab button
    * - `testID`: test id for the tab button
    *
    * Example:
@@ -131,7 +134,7 @@ export type Props<Route extends BaseRoute> = {
   renderTouchable?: (props: TouchableProps<Route>) => React.ReactNode;
   /**
    * Get accessibility label for the tab button. This is read by the screen reader when the user taps the tab.
-   * Uses `route.accessibilityLabel` by default.
+   * Uses `route['aria-label']` by default.
    */
   getAccessibilityLabel?: (props: { route: Route }) => string | undefined;
   /**
@@ -305,8 +308,7 @@ const BottomNavigationBar = <Route extends BaseRoute>({
   ),
   getLabelText = ({ route }: { route: Route }) => route.title,
   getBadge = ({ route }: { route: Route }) => route.badge,
-  getAccessibilityLabel = ({ route }: { route: Route }) =>
-    route.accessibilityLabel,
+  getAccessibilityLabel = ({ route }: { route: Route }) => route['aria-label'],
   getTestID = ({ route }: { route: Route }) => route.testID,
   activeColor,
   inactiveColor,
@@ -507,7 +509,7 @@ const BottomNavigationBar = <Route extends BaseRoute>({
               maxWidth: maxTabBarWidth,
             },
           ]}
-          accessibilityRole={'tablist'}
+          role={'tablist'}
           testID={`${testID}-content-wrapper`}
         >
           {routes.map((route, index) => {
@@ -585,9 +587,9 @@ const BottomNavigationBar = <Route extends BaseRoute>({
               onPress: () => onTabPress(eventForIndex(index)),
               onLongPress: () => onTabLongPress?.(eventForIndex(index)),
               testID: getTestID({ route }),
-              accessibilityLabel: getAccessibilityLabel({ route }),
-              accessibilityRole: Platform.OS === 'ios' ? 'button' : 'tab',
-              accessibilityState: { selected: focused },
+              'aria-label': getAccessibilityLabel({ route }),
+              role: Platform.OS === 'ios' ? 'button' : 'tab',
+              'aria-selected': focused,
               style: [styles.item, styles.v3Item],
               children: (
                 <View

src/components/Button/Button.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { Animated, Platform, StyleSheet, View } from 'react-native';
 import type {
-  AccessibilityRole,
   ColorValue,
   GestureResponderEvent,
   PressableAndroidRippleConfig,
+  Role,
   StyleProp,
   TextStyle,
   ViewStyle,
@@ -80,15 +80,15 @@ export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
   /**
    * Accessibility label for the button. This is read by the screen reader when the user taps the button.
    */
-  accessibilityLabel?: string;
+  'aria-label'?: string;
   /**
    * Accessibility hint for the button. This is read by the screen reader when the user taps the button.
    */
   accessibilityHint?: string;
   /**
    * Accessibility role for the button. The "button" role is set by default.
    */
-  accessibilityRole?: AccessibilityRole;
+  role?: Role;
   /**
    * Function to execute on press.
    */
@@ -169,9 +169,9 @@ const Button = ({
   buttonColor: customButtonColor,
   textColor: customTextColor,
   children,
-  accessibilityLabel,
+  'aria-label': ariaLabel,
   accessibilityHint,
-  accessibilityRole = 'button',
+  role = 'button',
   hitSlop,
   onPress,
   onPressIn,
@@ -352,10 +352,10 @@ const Button = ({
         onPressIn={hasPassedTouchHandler ? handlePressIn : undefined}
         onPressOut={hasPassedTouchHandler ? handlePressOut : undefined}
         delayLongPress={delayLongPress}
-        accessibilityLabel={accessibilityLabel}
+        aria-label={ariaLabel}
         accessibilityHint={accessibilityHint}
-        accessibilityRole={accessibilityRole}
-        accessibilityState={{ disabled }}
+        role={role}
+        aria-disabled={disabled}
         accessible={accessible}
         hitSlop={hitSlop}
         disabled={disabled}

src/components/Checkbox/Checkbox.tsx

@@ -247,14 +247,12 @@ const Checkbox = ({
     rest.accessible === false
       ? {}
       : {
-          accessibilityRole: 'checkbox' as const,
-          accessibilityState: {
-            disabled: !!disabled,
-            checked: (status === 'indeterminate'
-              ? 'mixed'
-              : status === 'checked') as boolean | 'mixed',
-          },
-          accessibilityLiveRegion: 'polite' as const,
+          role: 'checkbox' as const,
+          'aria-disabled': !!disabled,
+          'aria-checked': (status === 'indeterminate'
+            ? 'mixed'
+            : status === 'checked') as boolean | 'mixed',
+          'aria-live': 'polite' as const,
         };
 
   return (

src/components/Checkbox/CheckboxItem.tsx

@@ -44,7 +44,7 @@ export type Props = {
   /**
    * Accessibility label for the touchable. This is read by the screen reader when the user taps the touchable.
    */
-  accessibilityLabel?: string;
+  'aria-label'?: string;
   /**
    * Custom color for unchecked checkbox.
    */
@@ -129,7 +129,7 @@ const CheckboxItem = ({
   theme: themeOverrides,
   testID,
   position = 'trailing',
-  accessibilityLabel = label,
+  'aria-label': ariaLabel = label,
   disabled,
   labelVariant = 'bodyLarge',
   labelMaxFontSizeMultiplier = 1.5,
@@ -154,12 +154,10 @@ const CheckboxItem = ({
 
   return (
     <TouchableRipple
-      accessibilityLabel={accessibilityLabel}
-      accessibilityRole="checkbox"
-      accessibilityState={{
-        checked: status === 'indeterminate' ? 'mixed' : status === 'checked',
-        disabled,
-      }}
+      aria-label={ariaLabel}
+      role="checkbox"
+      aria-checked={status === 'indeterminate' ? 'mixed' : status === 'checked'}
+      aria-disabled={disabled}
       onPress={onPress}
       onLongPress={onLongPress}
       testID={testID}