Accessibility

[iM-GeeKy]

Hey @lukewalczak, I'm adding you to this because typically you're the one who responds to all of my issues/questions, but if anyone knows the answer feel free to chime in.

I'm currently working on some accessibility fixes in my app and am not sure if there is a way to manipulate the Tooltip in order to have it's Text component inherit certain text props, such as maxFontSizeMultiplier. Is this possible? Perhaps the title attribute could take a Text component?

PS - If I find any other components that behave oddly I'll put them in here as well.

1. The Banner components label cannot be manipulated.
   

2. The Searchbar components placeholder string also behaves oddly. A workaround seems viable using the inputStyle prop, but it might make more sense if you could just a text component to placeholder.
   

3. The AnimatedFab components label cannot be manipulated.
   

4. The Snackbars components label cannot be manipulated.
   

5. The SegmentedButtons components label cannot be manipulated.
   

[lukewalczak]

I have an opened draft PR which is adding maxFontSizeMultiplier to all the Text components. Will be working on it today

[iM-GeeKy]

Are you still working on this? I've cherry picked most of your changes into a patch as a temporary workaround for those who might have come here.

diff --git a/node_modules/react-native-paper/src/components/Appbar/AppbarContent.tsx b/node_modules/react-native-paper/src/components/Appbar/AppbarContent.tsx
index e9b231c..d9a4d91 100644
--- a/node_modules/react-native-paper/src/components/Appbar/AppbarContent.tsx
+++ b/node_modules/react-native-paper/src/components/Appbar/AppbarContent.tsx
@@ -63,6 +63,10 @@ export type Props = $RemoveChildren<typeof View> & {
    * Custom color for the text.
    */
   color?: string;
+  /**
+   * Specifies the largest possible scale a title font can reach.
+   */
+  titleMaxFontSizeMultiplier?: number;
   /**
    * @internal
    */
@@ -105,6 +109,7 @@ const AppbarContent = ({
   titleRef,
   titleStyle,
   title,
+  titleMaxFontSizeMultiplier = 1.5,
   mode = 'small',
   theme: themeOverrides,
   testID = 'appbar-content',
@@ -165,6 +170,7 @@ const AppbarContent = ({
           // @ts-expect-error We keep old a11y props for backwards compat with old RN versions
           accessibilityTraits="header"
           testID={`${testID}-title-text`}
+          maxFontSizeMultiplier={titleMaxFontSizeMultiplier}
         >
           {title}
         </Text>
diff --git a/node_modules/react-native-paper/src/components/Avatar/AvatarText.tsx b/node_modules/react-native-paper/src/components/Avatar/AvatarText.tsx
index 3075938..d1807f3 100644
--- a/node_modules/react-native-paper/src/components/Avatar/AvatarText.tsx
+++ b/node_modules/react-native-paper/src/components/Avatar/AvatarText.tsx
@@ -37,6 +37,10 @@ export type Props = React.ComponentPropsWithRef<typeof View> & {
    * Style for the title.
    */
   labelStyle?: StyleProp<TextStyle>;
+  /**
+   * Specifies the largest possible scale a text font can reach.
+   */
+  maxFontSizeMultiplier?: number;
   /**
    * @optional
    */
@@ -63,6 +67,7 @@ const AvatarText = ({
   labelStyle,
   color: customColor,
   theme: themeOverrides,
+  maxFontSizeMultiplier = 1.5,
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
@@ -98,6 +103,7 @@ const AvatarText = ({
           labelStyle,
         ]}
         numberOfLines={1}
+        maxFontSizeMultiplier={maxFontSizeMultiplier}
       >
         {label}
       </Text>
diff --git a/node_modules/react-native-paper/src/components/Banner.tsx b/node_modules/react-native-paper/src/components/Banner.tsx
index 740a16c..f968b38 100644
--- a/node_modules/react-native-paper/src/components/Banner.tsx
+++ b/node_modules/react-native-paper/src/components/Banner.tsx
@@ -50,6 +50,10 @@ export type Props = $Omit<$RemoveChildren<typeof Surface>, 'mode'> & {
    * Changes Banner shadow and background on iOS and Android.
    */
   elevation?: 0 | 1 | 2 | 3 | 4 | 5 | Animated.Value;
+  /**
+   * Specifies the largest possible scale a text font can reach.
+   */
+  maxFontSizeMultiplier?: number;
   style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
   ref?: React.RefObject<View>;
   /**
@@ -123,6 +127,7 @@ const Banner = ({
   theme: themeOverrides,
   onShowAnimationFinished = () => {},
   onHideAnimationFinished = () => {},
+  maxFontSizeMultiplier = 1.5,
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
@@ -226,6 +231,7 @@ const Banner = ({
               ]}
               accessibilityLiveRegion={visible ? 'polite' : 'none'}
               accessibilityRole="alert"
+              maxFontSizeMultiplier={maxFontSizeMultiplier}
             >
               {children}
             </Text>
diff --git a/node_modules/react-native-paper/src/components/Button/Button.tsx b/node_modules/react-native-paper/src/components/Button/Button.tsx
index 82694f0..ba613b0 100644
--- a/node_modules/react-native-paper/src/components/Button/Button.tsx
+++ b/node_modules/react-native-paper/src/components/Button/Button.tsx
@@ -112,6 +112,10 @@ export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
    * Use this prop to apply custom height and width and to set the icon on the right with `flexDirection: 'row-reverse'`.
    */
   contentStyle?: StyleProp<ViewStyle>;
+  /**
+   * Specifies the largest possible scale a text font can reach.
+   */
+  maxFontSizeMultiplier?: number;
   style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
   /**
    * Style for the button text.
@@ -169,6 +173,7 @@ const Button = ({
   labelStyle,
   testID = 'button',
   accessible,
+  maxFontSizeMultiplier = 1.5,
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
@@ -358,6 +363,7 @@ const Button = ({
               textStyle,
               labelStyle,
             ]}
+            maxFontSizeMultiplier={maxFontSizeMultiplier}
           >
             {children}
           </Text>
diff --git a/node_modules/react-native-paper/src/components/Card/CardTitle.tsx b/node_modules/react-native-paper/src/components/Card/CardTitle.tsx
index e84ff36..8ab604c 100644
--- a/node_modules/react-native-paper/src/components/Card/CardTitle.tsx
+++ b/node_modules/react-native-paper/src/components/Card/CardTitle.tsx
@@ -96,6 +96,14 @@ export type Props = React.ComponentPropsWithRef<typeof View> & {
    * @internal
    */
   total?: number;
+  /**
+   * Specifies the largest possible scale a title font can reach.
+   */
+  titleMaxFontSizeMultiplier?: number;
+  /**
+   * Specifies the largest possible scale a subtitle font can reach.
+   */
+  subtitleMaxFontSizeMultiplier?: number;
   style?: StyleProp<ViewStyle>;
   /**
    * @optional
@@ -134,10 +142,12 @@ const CardTitle = ({
   titleStyle,
   titleNumberOfLines = 1,
   titleVariant = 'bodyLarge',
+  titleMaxFontSizeMultiplier = 1.5,
   subtitle,
   subtitleStyle,
   subtitleNumberOfLines = 1,
   subtitleVariant = 'bodyMedium',
+  subtitleMaxFontSizeMultiplier = 1.5,
   left,
   leftStyle,
   right,
@@ -168,6 +178,7 @@ const CardTitle = ({
             style={[styles.title, { marginBottom }, titleStyle]}
             numberOfLines={titleNumberOfLines}
             variant={titleVariant}
+            maxFontSizeMultiplier={titleMaxFontSizeMultiplier}
           >
             {title}
           </TitleComponent>
@@ -177,6 +188,7 @@ const CardTitle = ({
             style={[styles.subtitle, subtitleStyle]}
             numberOfLines={subtitleNumberOfLines}
             variant={subtitleVariant}
+            maxFontSizeMultiplier={subtitleMaxFontSizeMultiplier}
           >
             {subtitle}
           </SubtitleComponent>
diff --git a/node_modules/react-native-paper/src/components/Chip/Chip.tsx b/node_modules/react-native-paper/src/components/Chip/Chip.tsx
index ddb83a5..153d981 100644
--- a/node_modules/react-native-paper/src/components/Chip/Chip.tsx
+++ b/node_modules/react-native-paper/src/components/Chip/Chip.tsx
@@ -132,6 +132,10 @@ export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
    * Ellipsize Mode for the children text
    */
   ellipsizeMode?: EllipsizeProp;
+  /**
+   * Specifies the largest possible scale a text font can reach.
+   */
+  maxFontSizeMultiplier?: number;
 };
 
 /**
@@ -175,6 +179,7 @@ const Chip = ({
   ellipsizeMode,
   compact,
   elevated = false,
+  maxFontSizeMultiplier = 1.5,
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
@@ -360,6 +365,7 @@ const Chip = ({
               textStyle,
             ]}
             ellipsizeMode={ellipsizeMode}
+            maxFontSizeMultiplier={maxFontSizeMultiplier}
           >
             {children}
           </Text>
diff --git a/node_modules/react-native-paper/src/components/Dialog/DialogTitle.tsx b/node_modules/react-native-paper/src/components/Dialog/DialogTitle.tsx
index 9953fc5..a079bab 100644
--- a/node_modules/react-native-paper/src/components/Dialog/DialogTitle.tsx
+++ b/node_modules/react-native-paper/src/components/Dialog/DialogTitle.tsx
@@ -11,6 +11,10 @@ export type Props = React.ComponentPropsWithRef<typeof Title> & {
    * Title text for the `DialogTitle`.
    */
   children: React.ReactNode;
+  /**
+   * Specifies the largest possible scale a title font can reach.
+   */
+  titleMaxFontSizeMultiplier?: number;
   style?: StyleProp<TextStyle>;
   /**
    * @optional
@@ -50,6 +54,7 @@ const DialogTitle = ({
   children,
   theme: themeOverrides,
   style,
+  titleMaxFontSizeMultiplier = 1.5,
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
@@ -67,6 +72,7 @@ const DialogTitle = ({
       variant="headlineSmall"
       accessibilityRole="header"
       style={[styles.text, isV3 && styles.v3Text, headerTextStyle, style]}
+      maxFontSizeMultiplier={titleMaxFontSizeMultiplier}
       {...rest}
     >
       {children}
diff --git a/node_modules/react-native-paper/src/components/FAB/AnimatedFAB.tsx b/node_modules/react-native-paper/src/components/FAB/AnimatedFAB.tsx
index 8d55efe..056f58f 100644
--- a/node_modules/react-native-paper/src/components/FAB/AnimatedFAB.tsx
+++ b/node_modules/react-native-paper/src/components/FAB/AnimatedFAB.tsx
@@ -95,6 +95,10 @@ export type Props = $Omit<$RemoveChildren<typeof Surface>, 'mode'> & {
    * Whether `FAB` should start animation to extend.
    */
   extended: boolean;
+  /**
+   * Specifies the largest possible scale a label font can reach.
+   */
+  labelMaxFontSizeMultiplier?: number;
   /**
    * @supported Available in v5.x with theme version 3
    *
@@ -208,6 +212,7 @@ const AnimatedFAB = ({
   extended = false,
   iconMode = 'dynamic',
   variant = 'primary',
+  labelMaxFontSizeMultiplier = 1.5,
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
@@ -488,6 +493,7 @@ const AnimatedFAB = ({
           ]}
           theme={theme}
           testID={`${testID}-text`}
+          maxFontSizeMultiplier={labelMaxFontSizeMultiplier}
         >
           {label}
         </AnimatedText>
diff --git a/node_modules/react-native-paper/src/components/List/ListAccordion.tsx b/node_modules/react-native-paper/src/components/List/ListAccordion.tsx
index 98e80a6..8ac5b43 100644
--- a/node_modules/react-native-paper/src/components/List/ListAccordion.tsx
+++ b/node_modules/react-native-paper/src/components/List/ListAccordion.tsx
@@ -91,6 +91,14 @@ export type Props = {
    * exceed this number.
    */
   descriptionNumberOfLines?: number;
+  /**
+   * Specifies the largest possible scale a title font can reach.
+   */
+  titleMaxFontSizeMultiplier?: number;
+  /**
+   * Specifies the largest possible scale a description font can reach.
+   */
+  descriptionMaxFontSizeMultiplier?: number;
   /**
    * Id is used for distinguishing specific accordion when using List.AccordionGroup. Property is required when using List.AccordionGroup and has no impact on behavior when using standalone List.Accordion.
    */
@@ -167,6 +175,8 @@ const ListAccordion = ({
   expanded: expandedProp,
   accessibilityLabel,
   pointerEvents = 'none',
+  titleMaxFontSizeMultiplier = 1.5,
+  descriptionMaxFontSizeMultiplier = 1.5,
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
   const [expanded, setExpanded] = React.useState<boolean>(
@@ -256,6 +266,7 @@ const ListAccordion = ({
                   },
                   titleStyle,
                 ]}
+                maxFontSizeMultiplier={titleMaxFontSizeMultiplier}
               >
                 {title}
               </Text>
@@ -271,6 +282,7 @@ const ListAccordion = ({
                     descriptionStyle,
                   ]}
                   onTextLayout={onDescriptionTextLayout}
+                  maxFontSizeMultiplier={descriptionMaxFontSizeMultiplier}
                 >
                   {description}
                 </Text>
diff --git a/node_modules/react-native-paper/src/components/List/ListItem.tsx b/node_modules/react-native-paper/src/components/List/ListItem.tsx
index 2b6b3d5..0dd8dab 100644
--- a/node_modules/react-native-paper/src/components/List/ListItem.tsx
+++ b/node_modules/react-native-paper/src/components/List/ListItem.tsx
@@ -95,6 +95,14 @@ export type Props = $RemoveChildren<typeof TouchableRipple> & {
    * See [`ellipsizeMode`](https://reactnative.dev/docs/text#ellipsizemode)
    */
   descriptionEllipsizeMode?: EllipsizeProp;
+  /**
+   * Specifies the largest possible scale a title font can reach.
+   */
+  titleMaxFontSizeMultiplier?: number;
+  /**
+   * Specifies the largest possible scale a description font can reach.
+   */
+  descriptionMaxFontSizeMultiplier?: number;
 };
 
 /**
@@ -132,6 +140,8 @@ const ListItem = ({
   titleEllipsizeMode,
   descriptionEllipsizeMode,
   descriptionStyle,
+  descriptionMaxFontSizeMultiplier = 1.5,
+  titleMaxFontSizeMultiplier = 1.5,
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
@@ -169,6 +179,7 @@ const ListItem = ({
           descriptionStyle,
         ]}
         onTextLayout={onDescriptionTextLayout}
+        maxFontSizeMultiplier={descriptionMaxFontSizeMultiplier}
       >
         {description}
       </Text>
@@ -193,6 +204,7 @@ const ListItem = ({
         ellipsizeMode={titleEllipsizeMode}
         numberOfLines={titleNumberOfLines}
         style={[styles.title, { color: titleColor }, titleStyle]}
+        maxFontSizeMultiplier={descriptionMaxFontSizeMultiplier}
       >
         {title}
       </Text>
diff --git a/node_modules/react-native-paper/src/components/List/ListSubheader.tsx b/node_modules/react-native-paper/src/components/List/ListSubheader.tsx
index 46f264f..9c61f54 100644
--- a/node_modules/react-native-paper/src/components/List/ListSubheader.tsx
+++ b/node_modules/react-native-paper/src/components/List/ListSubheader.tsx
@@ -16,6 +16,10 @@ export type Props = React.ComponentProps<typeof Text> & {
    * Style that is passed to Text element.
    */
   style?: StyleProp<TextStyle>;
+  /**
+   * Specifies the largest possible scale a text font can reach.
+   */
+  maxFontSizeMultiplier?: number;
 };
 
 /**
@@ -31,7 +35,12 @@ export type Props = React.ComponentProps<typeof Text> & {
  * export default MyComponent;
  * ```
  */
-const ListSubheader = ({ style, theme: overrideTheme, ...rest }: Props) => {
+const ListSubheader = ({
+  style,
+  theme: overrideTheme,
+  maxFontSizeMultiplier = 1.5,
+  ...rest
+}: Props) => {
   const theme = useInternalTheme(overrideTheme);
 
   const textColor = theme.isV3
@@ -44,6 +53,7 @@ const ListSubheader = ({ style, theme: overrideTheme, ...rest }: Props) => {
     <Text
       variant="bodyMedium"
       numberOfLines={1}
+      maxFontSizeMultiplier={maxFontSizeMultiplier}
       {...rest}
       style={[
         styles.container,
diff --git a/node_modules/react-native-paper/src/components/RadioButton/RadioButtonItem.tsx b/node_modules/react-native-paper/src/components/RadioButton/RadioButtonItem.tsx
index 58fc42b..d8e8647 100644
--- a/node_modules/react-native-paper/src/components/RadioButton/RadioButtonItem.tsx
+++ b/node_modules/react-native-paper/src/components/RadioButton/RadioButtonItem.tsx
@@ -76,6 +76,10 @@ export type Props = {
    *  Body: `bodyLarge`, `bodyMedium`, `bodySmall`
    */
   labelVariant?: keyof typeof MD3TypescaleKey;
+  /**
+   * Specifies the largest possible scale a label font can reach.
+   */
+  labelMaxFontSizeMultiplier?: number;
   /**
    * @optional
    */
@@ -133,6 +137,7 @@ const RadioButtonItem = ({
   mode,
   position = 'trailing',
   labelVariant = 'bodyLarge',
+  labelMaxFontSizeMultiplier = 1.5,
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
   const radioButtonProps = { value, disabled, status, color, uncheckedColor };
@@ -197,6 +202,7 @@ const RadioButtonItem = ({
                   computedStyle,
                   labelStyle,
                 ]}
+                maxFontSizeMultiplier={labelMaxFontSizeMultiplier}
               >
                 {label}
               </Text>
diff --git a/node_modules/react-native-paper/src/components/Searchbar.tsx b/node_modules/react-native-paper/src/components/Searchbar.tsx
index ed1b1e4..7fec547 100644
--- a/node_modules/react-native-paper/src/components/Searchbar.tsx
+++ b/node_modules/react-native-paper/src/components/Searchbar.tsx
@@ -118,6 +118,10 @@ export type Props = React.ComponentPropsWithRef<typeof TextInput> & {
    * Changes Searchbar shadow and background on iOS and Android.
    */
   elevation?: 0 | 1 | 2 | 3 | 4 | 5 | Animated.Value;
+  /**
+   * Specifies the largest possible scale a text font can reach.
+   */
+  maxFontSizeMultiplier?: number;
   /**
    * Set style of the TextInput component inside the searchbar
    */
@@ -193,6 +197,7 @@ const Searchbar = forwardRef<TextInputHandles, Props>(
       value,
       loading = false,
       testID = 'search-bar',
+      maxFontSizeMultiplier,
       ...rest
     }: Props,
     ref
@@ -319,6 +324,7 @@ const Searchbar = forwardRef<TextInputHandles, Props>(
           ref={root}
           value={value}
           testID={testID}
+          maxFontSizeMultiplier={maxFontSizeMultiplier}
           {...rest}
         />
         {loading ? (
diff --git a/node_modules/react-native-paper/src/components/SegmentedButtons/SegmentedButtonItem.tsx b/node_modules/react-native-paper/src/components/SegmentedButtons/SegmentedButtonItem.tsx
index 26236f0..d5bb9d0 100644
--- a/node_modules/react-native-paper/src/components/SegmentedButtons/SegmentedButtonItem.tsx
+++ b/node_modules/react-native-paper/src/components/SegmentedButtons/SegmentedButtonItem.tsx
@@ -79,6 +79,10 @@ export type Props = {
    * Density is applied to the height, to allow usage in denser UIs.
    */
   density?: 'regular' | 'small' | 'medium' | 'high';
+  /**
+   * Specifies the largest possible scale a label font can reach.
+   */
+  labelMaxFontSizeMultiplier?: number;
   style?: StyleProp<ViewStyle>;
   /**
    * Style for the button label.
@@ -111,6 +115,7 @@ const SegmentedButtonItem = ({
   segment,
   density = 'regular',
   theme: themeOverrides,
+  labelMaxFontSizeMultiplier = 1.5,
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
 
@@ -225,6 +230,7 @@ const SegmentedButtonItem = ({
             selectable={false}
             numberOfLines={1}
             testID={`${testID}-label`}
+            maxFontSizeMultiplier={labelMaxFontSizeMultiplier}
           >
             {label}
           </Text>
diff --git a/node_modules/react-native-paper/src/components/Snackbar.tsx b/node_modules/react-native-paper/src/components/Snackbar.tsx
index f5d7ab4..022a3f2 100644
--- a/node_modules/react-native-paper/src/components/Snackbar.tsx
+++ b/node_modules/react-native-paper/src/components/Snackbar.tsx
@@ -69,6 +69,10 @@ export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
    * Changes Snackbar shadow and background on iOS and Android.
    */
   elevation?: 0 | 1 | 2 | 3 | 4 | 5 | Animated.Value;
+  /**
+   * Specifies the largest possible scale a text font can reach.
+   */
+  maxFontSizeMultiplier?: number;
   wrapperStyle?: StyleProp<ViewStyle>;
   style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
   ref?: React.RefObject<View>;
@@ -141,6 +145,7 @@ const Snackbar = ({
   wrapperStyle,
   style,
   theme: themeOverrides,
+  maxFontSizeMultiplier = 1.5,
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
@@ -243,6 +248,7 @@ const Snackbar = ({
         <Text
           variant="bodyMedium"
           style={[styles.content, { color: textColor }]}
+          maxFontSizeMultiplier={maxFontSizeMultiplier}
         >
           {children}
         </Text>
diff --git a/node_modules/react-native-paper/src/components/Tooltip/Tooltip.tsx b/node_modules/react-native-paper/src/components/Tooltip/Tooltip.tsx
index dd6fcfd..0f70f6d 100644
--- a/node_modules/react-native-paper/src/components/Tooltip/Tooltip.tsx
+++ b/node_modules/react-native-paper/src/components/Tooltip/Tooltip.tsx
@@ -34,6 +34,10 @@ export type Props = {
    * Tooltip title
    */
   title: string;
+  /**
+   * Specifies the largest possible scale a title font can reach.
+   */
+  titleMaxFontSizeMultiplier?: number;
   /**
    * @optional
    */
@@ -65,6 +69,7 @@ const Tooltip = ({
   leaveTouchDelay = 1500,
   title,
   theme: themeOverrides,
+  titleMaxFontSizeMultiplier = 1.5,
   ...rest
 }: Props) => {
   const isWeb = Platform.OS === 'web';
@@ -191,6 +196,7 @@ const Tooltip = ({
               selectable={false}
               variant="labelLarge"
               style={{ color: theme.colors.surface }}
+              maxFontSizeMultiplier={titleMaxFontSizeMultiplier}
             >
               {title}
             </Text>

[iM-GeeKy]

@lukewalczak I was starting to cherry pick some of your changes over from your branch into a patch and you are missing maxFontSizeMultiplier in Searchbar.tsx and Dialog.Title. Perhaps you hadn't quite finished yet, but I just wanted to let you know.