chore: remove disabled accessibility trait for AppbarContent and `C…

…ard` (callstack#3794)

example/src/Examples/AppbarExample.tsx

@@ -8,6 +8,7 @@ import {
  List,
  Paragraph,
  RadioButton,
+ Snackbar,
  Switch,
  Text,
 } from 'react-native-paper';
@@ -36,6 +37,7 @@ const AppbarExample = ({ navigation }: Props) => {
  const [appbarMode, setAppbarMode] = React.useState<AppbarModes>('small');
  const [showCalendarIcon, setShowCalendarIcon] = React.useState(false);
  const [showElevated, setShowElevated] = React.useState(false);
+ const [showSnackbar, setShowSnackbar] = React.useState(false);
 
  const theme = useExampleTheme();
  const { bottom, left, right } = useSafeAreaInsets();
@@ -60,6 +62,7 @@ const AppbarExample = ({ navigation }: Props) => {
  <Appbar.Content
  title="Title"
  subtitle={showSubtitle ? 'Subtitle' : null}
+ onPress={() => setShowSnackbar(true)}
  />
  {isCenterAlignedMode
  ? false
@@ -216,6 +219,13 @@ const AppbarExample = ({ navigation }: Props) => {
  {theme.isV3 && renderFAB()}
  </Appbar>
  {!theme.isV3 && renderFAB()}
+ <Snackbar
+ visible={showSnackbar}
+ onDismiss={() => setShowSnackbar(false)}
+ duration={Snackbar.DURATION_SHORT}
+ >
+ Heading pressed
+ </Snackbar>
  </>
  );
 };

src/components/Appbar/AppbarContent.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import {
+ AccessibilityRole,
  GestureResponderEvent,
  Platform,
  StyleProp,
@@ -54,6 +55,10 @@ export type Props = $RemoveChildren<typeof View> & {
  * Function to execute on press.
  */
  onPress?: (e: GestureResponderEvent) => void;
+ /**
+ * If true, disable all interactions for this component.
+ */
+ disabled?: boolean;
  /**
  * Custom color for the text.
  */
@@ -99,6 +104,7 @@ const AppbarContent = ({
  subtitle,
  subtitleStyle,
  onPress,
+ disabled,
  style,
  titleRef,
  titleStyle,
@@ -128,56 +134,75 @@ const AppbarContent = ({
 
  const variant = modeTextVariant[mode] as MD3TypescaleKey;
 
- return (
- <TouchableWithoutFeedback
- accessibilityRole={onPress ? 'button' : 'text'}
- onPress={onPress}
- disabled={!onPress}
+ const content = (
+ <View
+ pointerEvents="box-none"
+ style={[styles.container, isV3 && modeContainerStyles[mode], style]}
+ testID={testID}
+ {...rest}
  >
- <View
- pointerEvents="box-none"
- style={[styles.container, isV3 && modeContainerStyles[mode], style]}
- testID={testID}
- {...rest}
- >
- {typeof title === 'string' ? (
- <Text
- {...(isV3 && { variant })}
- ref={titleRef}
- style={[
- {
-  color: titleTextColor,
-  ...(isV3
-  ? theme.fonts[variant]
-  : Platform.OS === 'ios'
-  ? theme.fonts.regular
-  : theme.fonts.medium),
-  },
-  !isV3 && styles.title,
- titleStyle,
- ]}
- numberOfLines={1}
- accessible
-  // @ts-ignore Type '"heading"' is not assignable to type ...
-  accessibilityRole={Platform.OS === 'web' ? 'heading' : 'header'}
-  testID={`${testID}-title-text`}
- >
-  {title}
- </Text>
- ) : (
-  title
- )}
-  {!isV3 && subtitle ? (
-  <Text
-  style={[styles.subtitle, { color: subtitleColor }, subtitleStyle]}
-  numberOfLines={1}
- >
-  {subtitle}
- </Text>
- ) : null}
- </View>
- </TouchableWithoutFeedback>
+ {typeof title === 'string' ? (
+ <Text
+  {...(isV3 && { variant })}
+  ref={titleRef}
+  style={[
+  {
+  color: titleTextColor,
+  ...(isV3
+  ? theme.fonts[variant]
+  : Platform.OS === 'ios'
+  ? theme.fonts.regular
+  : theme.fonts.medium),
+ },
+ !isV3 && styles.title,
+ titleStyle,
+ ]}
+ 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"
+ testID={`${testID}-title-text`}
+ >
+ {title}
+ </Text>
+ ) : (
+ title
+ )}
+ {!isV3 && subtitle ? (
+ <Text
+ style={[styles.subtitle, { color: subtitleColor }, subtitleStyle]}
+ numberOfLines={1}
+ >
+ {subtitle}
+ </Text>
+ ) : null}
+ </View>
  );
+
+ if (onPress) {
+ return (
+ // eslint-disable-next-line react-native-a11y/has-accessibility-props
+ <TouchableWithoutFeedback
+ accessibilityRole={touchableRole}
+ // @ts-expect-error We keep old a11y props for backwards compat with old RN versions
+ accessibilityTraits={touchableRole}
+ accessibilityComponentType="button"
+ onPress={onPress}
+ disabled={disabled}
+ >
+ {content}
+ </TouchableWithoutFeedback>
+ );
+ }
+
+ return content;
 };
 
 AppbarContent.displayName = 'Appbar.Content';
@@ -209,6 +234,12 @@ const styles = StyleSheet.create({
  },
 });
 
+const iosTouchableRole: readonly AccessibilityRole[] = ['button', 'header'];
+const touchableRole: AccessibilityRole = Platform.select({
+ ios: iosTouchableRole as unknown as 'button',
+ default: iosTouchableRole[0],
+});
+
 export default AppbarContent;
 
 // @component-docs ignore-next-line

src/components/Card/Card.tsx

@@ -9,6 +9,8 @@ import {
  ViewStyle,
 } from 'react-native';
 
+import useLatestCallback from 'use-latest-callback';
+
 import { useInternalTheme } from '../../core/theming';
 import type { ThemeProp } from '../../types';
 import Surface from '../Surface';
@@ -59,6 +61,10 @@ export type Props = React.ComponentProps<typeof Surface> & {
  * Function to execute on press.
  */
  onPress?: (e: GestureResponderEvent) => void;
+ /**
+ * If true, disable all interactions for this component.
+ */
+ disabled?: boolean;
  /**
  * The number of milliseconds a user must touch the element before executing `onLongPress`.
  */
@@ -141,6 +147,7 @@ const Card = ({
  theme: themeOverrides,
  testID = 'card',
  accessible,
+ disabled,
  ...rest
 }: (OutlinedCardProps | ElevatedCardProps | ContainedCardProps) & Props) => {
  const theme = useInternalTheme(themeOverrides);
@@ -208,13 +215,13 @@ const Card = ({
  }
  };
 
- const handlePressIn = () => {
+ const handlePressIn = useLatestCallback(() => {
  runElevationAnimation('in');
- };
+ });
 
- const handlePressOut = () => {
+ const handlePressOut = useLatestCallback(() => {
  runElevationAnimation('out');
- };
+ });
 
  const total = React.Children.count(children);
  const siblings = React.Children.map(children, (child) =>
@@ -235,6 +242,24 @@ const Card = ({
  borderColor = themedBorderColor,
  } = (StyleSheet.flatten(style) || {}) as ViewStyle;
 
+ const content = (
+ <View
+ style={[styles.innerContainer, contentStyle]}
+ testID={testID}
+ accessible={accessible}
+ >
+ {React.Children.map(children, (child, index) =>
+ React.isValidElement(child)
+ ? React.cloneElement(child as React.ReactElement<any>, {
+ index,
+ total,
+ siblings,
+ })
+ : child
+ )}
+ </View>
+ );
+
  return (
  <Surface
  style={[
@@ -269,29 +294,22 @@ const Card = ({
  ]}
  />
  )}
- <TouchableWithoutFeedback
- delayPressIn={0}
- disabled={!(onPress || onLongPress)}
- delayLongPress={delayLongPress}
- onLongPress={onLongPress}
- onPress={onPress}
- onPressIn={onPress || onLongPress ? handlePressIn : undefined}
- onPressOut={onPress || onLongPress ? handlePressOut : undefined}
- testID={testID}
- accessible={accessible}
- >
- <View style={[styles.innerContainer, contentStyle]}>
- {React.Children.map(children, (child, index) =>
- React.isValidElement(child)
- ? React.cloneElement(child as React.ReactElement<any>, {
- index,
- total,
- siblings,
- })
- : child
- )}
- </View>
- </TouchableWithoutFeedback>
+
+ {onPress || onLongPress ? (
+ <TouchableWithoutFeedback
+ delayPressIn={0}
+ disabled={disabled}
+ delayLongPress={delayLongPress}
+ onLongPress={onLongPress}
+ onPress={onPress}
+ onPressIn={handlePressIn}
+ onPressOut={handlePressOut}
+ >
+ {content}
+ </TouchableWithoutFeedback>
+ ) : (
+ content
+ )}
  </Surface>
  );
 };

src/components/Card/CardTitle.tsx

@@ -146,15 +146,9 @@ const CardTitle = ({
  theme: themeOverrides,
 }: Props) => {
  const theme = useInternalTheme(themeOverrides);
- const titleComponent = (props: any) =>
-  theme.isV3 ? <Text {...props} /> : <Title {...props} />;
+ const TitleComponent = theme.isV3 ? Text : Title;
+ const SubtitleComponent = theme.isV3 ? Text : Caption;
 
- const subtitleComponent = (props: any) =>
- theme.isV3 ? <Text {...props} /> : <Caption {...props} />;
-
- const TextComponent = React.memo(({ component, ...rest }: any) =>
- React.createElement(component, rest)
- );
  const minHeight = subtitle || left || right ? 72 : 50;
  const marginBottom = subtitle ? 0 : 2;
 
@@ -170,24 +164,22 @@ const CardTitle = ({
 
  <View style={[styles.titles]}>
  {title && (
- <TextComponent
- component={titleComponent}
+ <TitleComponent
  style={[styles.title, { marginBottom }, titleStyle]}
  numberOfLines={titleNumberOfLines}
  variant={titleVariant}
  >
  {title}
- </TextComponent>
+ </TitleComponent>
  )}
  {subtitle && (
- <TextComponent
- component={subtitleComponent}
+ <SubtitleComponent
  style={[styles.subtitle, subtitleStyle]}
  numberOfLines={subtitleNumberOfLines}
  variant={subtitleVariant}
  >
  {subtitle}
- </TextComponent>
+ </SubtitleComponent>
  )}
  </View>
  <View style={rightStyle}>{right ? right({ size: 24 }) : null}</View>