Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ExpandableOverlay - Focus accessibility after overlay close #3503

Merged
merged 7 commits into from
Feb 19, 2025

Conversation

nitzanyiz
Copy link
Collaborator

Description

Focused accessibility after over closes. Passed a ref to the TouchableOpacity and set the accessibility focus on it manually when it closes.

Changelog

ExpandableOverlay - Fix accessibility focus when overlay closes.

Additional info

MADS-4609

@nitzanyiz nitzanyiz marked this pull request as ready for review February 13, 2025 11:25
@nitzanyiz nitzanyiz requested a review from M-i-k-e-l February 13, 2025 11:25

export interface ExpandableOverlayMethods {
openExpandable: () => void;
closeExpandable: () => void;
toggleExpandable: () => void;
focusAccessibility: () => void;
Copy link
Contributor

Choose a reason for hiding this comment

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

I don't see a reason to expose focusAccessibility, it is activated on close

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

I thought I might need to use it in private but we don't and forgot to remove. Removed 👌

if (reactTag) {
AccessibilityInfo.setAccessibilityFocus(reactTag);
}
}, [containerRef]);
Copy link
Contributor

Choose a reason for hiding this comment

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

AFAIK you should not put a ref as a dependency, it won't trigger a change

Suggested change
}, [containerRef]);
}, []);

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Mistake. Removed 👌


import TouchableOpacity, {TouchableOpacityProps} from '../../components/touchableOpacity';
import View from '../../components/view';
import Modal, {ModalProps, ModalTopBarProps} from '../../components/modal';
import DialogOld from '../../components/dialog';
import DialogNew, {DialogMigrationProps} from '../dialog';
import {Colors} from 'style';
import {AccessibilityInfo, findNodeHandle} from 'react-native';
Copy link
Contributor

Choose a reason for hiding this comment

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

We usually put more general imports higher up; for example I'd put react-native below react

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Mistake 👌

@M-i-k-e-l M-i-k-e-l assigned nitzanyiz and unassigned M-i-k-e-l Feb 18, 2025
@nitzanyiz nitzanyiz assigned M-i-k-e-l and unassigned nitzanyiz Feb 18, 2025
@M-i-k-e-l M-i-k-e-l merged commit fd2cc0b into master Feb 19, 2025
1 check passed
@M-i-k-e-l M-i-k-e-l deleted the feat/ExpandableOverlayFocusAccessibilityAfterClose branch February 19, 2025 08:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants