fix(text-input): address review feedback

Author: likevy

docs/6.x/docs/guides/migration.md

@@ -305,6 +305,10 @@ referenced by the input's `aria-describedby`. Additional IDs passed through
 included in `accessibilityHint`, alongside any hint you provide, because React
 Native does not support native described-by relationships.
 
+When no label or explicit accessible name is supplied, the placeholder names the
+field, including after text is entered. A disabled field always exposes its
+disabled state, even when `aria-disabled={false}` is supplied.
+
 Error supporting text uses `role="alert"`. Android uses an assertive live region;
 iOS announces changed error messages through `AccessibilityInfo`.
 Custom input renderers should forward the accessibility props they receive.
@@ -313,10 +317,10 @@ from `error` and the character counter.
 Empty fields remain visible to native accessibility before focus and after
 clearing. The field content no longer fades with the floating label.
 
-The filled resting indicator now uses `onSurfaceVariant` and changes to
-`onSurface` on hover. An invalid filled field uses `error` at rest and
-`onErrorContainer` on hover. The focused indicator continues to use `primary` (or
-`error` for an invalid field). Outlined fields continue to use `outline` at rest.
+The filled resting indicator now uses `onSurfaceVariant`; outlined fields use
+`outline` at rest. Both change to `onSurface` on hover. Invalid fields use `error`
+at rest and `onErrorContainer` on hover. Focus takes precedence over hover and
+uses `primary` (or `error` for an invalid field).
 
 #### Removed props
 

scripts/typescript-output-lint.ts

@@ -14,7 +14,6 @@ const output = join(root, 'lib', 'typescript');
  * More info: https://github.com/callstack/react-native-paper/pull/3603
  */
 const unusedViewProps = [
-  'nativeID',
   'accessibilityActions',
   'accessibilityValue',
   'onAccessibilityAction',

src/components/TextInput/utils.ts

@@ -190,15 +190,11 @@ export const getOutlineColor = ({
 
   if (isDisabled) return colors.onSurface;
   if (hasError) {
-    return variant === 'filled' && isHovered && !isFocused
-      ? colors.onErrorContainer
-      : colors.error;
+    return isHovered && !isFocused ? colors.onErrorContainer : colors.error;
   }
   if (isFocused) return colors.primary;
-  if (variant === 'filled') {
-    return isHovered ? colors.onSurface : colors.onSurfaceVariant;
-  }
-  return colors.outline;
+  if (isHovered) return colors.onSurface;
+  return variant === 'filled' ? colors.onSurfaceVariant : colors.outline;
 };
 
 /**
@@ -478,6 +474,7 @@ export const getOutlinedTextInputData = (
     isDisabled,
     isFocused,
     hasError,
+    isHovered: api.isHovered,
   });
 
   /**
@@ -611,10 +608,10 @@ export const getAccessibilityData = ({
 
   return {
     input: {
-      'aria-label': explicitLabel ?? label,
+      'aria-label': explicitLabel ?? label ?? props.placeholder,
       'aria-labelledby': labelledBy,
       'aria-describedby': describedBy,
-      'aria-disabled': props['aria-disabled'] ?? isDisabled,
+      'aria-disabled': isDisabled || (props['aria-disabled'] ?? false),
       'aria-invalid': props['aria-invalid'] ?? (hasError || isCounterExceeded),
       accessibilityHint: hint,
     },

src/components/__tests__/TextInputAccessibility.test.tsx

@@ -20,6 +20,43 @@ afterEach(() => {
   renderInput.mockClear();
 });
 
+it.each(['filled', 'outlined'] as const)(
+  'uses the placeholder as the name of an unlabelled %s field, including after typing',
+  async (variant) => {
+    await render(<TextInput variant={variant} placeholder="Search" />);
+
+    const input = screen.getByLabelText('Search');
+    await userEvent.type(input, 'Paper');
+    expect(screen.getByLabelText('Search')).toHaveDisplayValue('Paper');
+  }
+);
+
+it.each([
+  { label: 'Search products' },
+  { 'aria-label': 'Search products' },
+  { accessibilityLabel: 'Search products' },
+])('prefers a supplied name over the placeholder: %j', async (props) => {
+  await render(<TextInput {...props} placeholder="Search" />);
+
+  expect(screen.getByLabelText('Search products')).toBeOnTheScreen();
+  expect(screen.queryByLabelText('Search')).toBeNull();
+});
+
+it.each([
+  { disabled: true, 'aria-disabled': false, expectedDisabled: true },
+  { disabled: true, 'aria-disabled': true, expectedDisabled: true },
+  { disabled: false, 'aria-disabled': true, expectedDisabled: true },
+  { disabled: false, 'aria-disabled': false, expectedDisabled: false },
+])(
+  'keeps the disabled semantics consistent: %j',
+  async ({ expectedDisabled, ...props }) => {
+    await render(<TextInput {...props} label="Email" readOnly />);
+
+    const input = screen.getByLabelText('Email');
+    expect(input).toHaveProp('aria-disabled', expectedDisabled);
+  }
+);
+
 it.each(['filled', 'outlined'] as const)(
   'keeps an empty unfocused %s field visible to assistive technology',
   async (variant) => {
@@ -308,7 +345,7 @@ it('renders decorative accessories outside the accessibility tree without button
   ).toBeOnTheScreen();
 });
 
-it('preserves decorative loading and container visuals without accessible controls', async () => {
+it('preserves decorative loading and content styles without accessible controls', async () => {
   await render(
     <TextInput
       label="Search"
@@ -330,11 +367,6 @@ it('preserves decorative loading and container visuals without accessible contro
   expect(
     screen.getByRole('progressbar', { includeHiddenElements: true })
   ).toBeOnTheScreen();
-  expect(
-    screen.getByTestId('search-decoration-container', {
-      includeHiddenElements: true,
-    })
-  ).toHaveStyle({ backgroundColor: 'pink', borderWidth: 1 });
   expect(
     screen.getByTestId('search-decoration', { includeHiddenElements: true })
   ).toHaveStyle({ padding: 2 });

src/components/__tests__/TextInputStates.test.tsx

@@ -4,11 +4,11 @@ import { afterEach, expect, it, jest } from '@jest/globals';
 import { renderHook } from '@testing-library/react-native';
 
 import PaperProvider from '../../core/PaperProvider';
-import { getTheme } from '../../core/theming';
 import { act } from '../../test-utils';
+import { LightTheme as theme } from '../../theme/schemes';
 import { useTextInput } from '../TextInput/hooks';
+import { getOutlineColor } from '../TextInput/utils';
 
-const theme = getTheme();
 afterEach(() => {
   jest.restoreAllMocks();
 });
@@ -79,13 +79,56 @@ it('uses MD3 filled resting and hover colors without overriding the focused or d
   ).toBe(theme.colors.onSurfaceVariant);
 });
 
-it('preserves the outlined resting color on hover', async () => {
-  const { result } = await renderHook(
-    () => useTextInput({ variant: 'outlined' }),
-    { wrapper: PaperProvider }
+it('updates the outlined hover color for errors and ignores hover when disabled', async () => {
+  const { result, rerender } = await renderHook(
+    (props: { error?: boolean; disabled?: boolean }) =>
+      useTextInput({ variant: 'outlined', ...props }),
+    { initialProps: {}, wrapper: PaperProvider }
+  );
+  expect(StyleSheet.flatten(result.current.outlineStyles)?.borderColor).toBe(
+    theme.colors.outline
+  );
+  await act(() => result.current.onHoverIn());
+  expect(StyleSheet.flatten(result.current.outlineStyles)?.borderColor).toBe(
+    theme.colors.onSurface
+  );
+  await rerender({ error: true });
+  expect(StyleSheet.flatten(result.current.outlineStyles)?.borderColor).toBe(
+    theme.colors.onErrorContainer
+  );
+  await act(() => result.current.onHoverOut());
+  expect(StyleSheet.flatten(result.current.outlineStyles)?.borderColor).toBe(
+    theme.colors.error
   );
   await act(() => result.current.onHoverIn());
+  await rerender({ error: true, disabled: true });
+  expect(StyleSheet.flatten(result.current.outlineStyles)?.borderColor).toBe(
+    theme.colors.onSurface
+  );
+  await act(() => result.current.onHoverOut());
+  await rerender({});
   expect(StyleSheet.flatten(result.current.outlineStyles)?.borderColor).toBe(
     theme.colors.outline
   );
 });
+
+it.each(['filled', 'outlined'] as const)(
+  'preserves the focused %s indicator when hovered, invalid or disabled',
+  (variant) => {
+    const state = {
+      theme,
+      variant,
+      isFocused: true,
+      isHovered: true,
+      isDisabled: false,
+      hasError: false,
+    };
+    expect(getOutlineColor(state)).toBe(theme.colors.primary);
+    expect(getOutlineColor({ ...state, hasError: true })).toBe(
+      theme.colors.error
+    );
+    expect(
+      getOutlineColor({ ...state, hasError: true, isDisabled: true })
+    ).toBe(theme.colors.onSurface);
+  }
+);