Skip to content

Fix accessibilityState={{expanded: false}} ignored on iOS#56430

Open
QichenZhu wants to merge 1 commit intofacebook:mainfrom
QichenZhu:fix/56296-a11y-ios-collapsed-state-ignored-by-fabric
Open

Fix accessibilityState={{expanded: false}} ignored on iOS#56430
QichenZhu wants to merge 1 commit intofacebook:mainfrom
QichenZhu:fix/56296-a11y-ios-collapsed-state-ignored-by-fabric

Conversation

@QichenZhu
Copy link
Copy Markdown
Contributor

@QichenZhu QichenZhu commented Apr 14, 2026

Summary:

On iOS, accessibilityState={{ expanded: true }} works as expected, but accessibilityState={{ expanded: false }} is ignored. That means the collapsed state is not announced by VoiceOver, so users may not know the element can be expanded.

Fixes #56296

Changelog:

[IOS] [FIXED] - accessibilityState={{expanded: false}} ignored on iOS

Test Plan:

import type {RNTesterModuleExample} from '../../types/RNTesterTypes';

import * as React from 'react';
import {Pressable, Text, View} from 'react-native';

function Playground() {
  return (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      <Text>1. accessibilityState=&#123;"expanded": true&#125;</Text>
      <Pressable
        accessibilityState={{expanded: true}}
        style={{
          backgroundColor: 'lightgrey',
          margin: 16,
          marginBottom: 64,
          padding: 8,
        }}>
        <Text>Element 1</Text>
      </Pressable>
      <Text>2. accessibilityState=&#123;"expanded": false&#125;</Text>
      <Pressable
        accessibilityState={{expanded: false}}
        style={{
          backgroundColor: 'lightgrey',
          margin: 16,
          padding: 8,
        }}>
        <Text>Element 2</Text>
      </Pressable>
    </View>
  );
}

export default {
  title: 'Playground',
  name: 'playground',
  description: 'Test out new features and ideas.',
  render: (): React.Node => <Playground />,
} as RNTesterModuleExample;
  1. Put the code into packages/rn-tester/js/examples/Playground/RNTesterPlayground.js.
  2. Build and run RNTester on the iOS Simulator.
  3. Open Xcode > Open Developer Tool > Accessibility Inspector.
  4. Click Select an element to inspect and choose Element 1.
  5. Verify Value is expanded.
  6. Click Select an element to inspect and choose Element 2.
  7. Verify Value is collapsed.
Screenshot 2026-04-14 at 1 16 03 PM Screenshot 2026-04-14 at 1 16 09 PM

@meta-cla meta-cla bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Apr 14, 2026
@facebook-github-tools facebook-github-tools bot added the Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team. label Apr 14, 2026
Copy link
Copy Markdown
Contributor

@cipolleschi cipolleschi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for fixing this!

@meta-codesync
Copy link
Copy Markdown

meta-codesync bot commented Apr 14, 2026

@cipolleschi has imported this pull request. If you are a Meta employee, you can view this in D100784135.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[a11y][iOS] Collapsed state ignored by Fabric

2 participants