Skip to content

feat(checkbox/radioButton): ensure minimum 48x48 hit target for better accessibility #3518

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.

Sign up for GitHub

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

Merged
merged 15 commits into from
Mar 3, 2025
Merged

feat(checkbox/radioButton): ensure minimum 48x48 hit target for better accessibility #3518

Show file tree
Hide file tree
Changes from 13 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
10c3c97
feat(checkbox/radioButton): ensure minimum 48x48 hit target for bette…
devin-ai-integration[bot] Feb 19, 2025
18aca35
refactor: destructure props at top of render functions
devin-ai-integration[bot] Feb 19, 2025
29c3852
fix: use destructured iconOnRight prop
devin-ai-integration[bot] Feb 19, 2025
9ce4651
refactor(checkbox/radioButton): move hitSlop calculation to dedicated…
devin-ai-integration[bot] Feb 19, 2025
e3f67db
fix(radioButton): revert iconOnRight prop destructuring
devin-ai-integration[bot] Feb 19, 2025
14921a6
fix(radioButton): revert iconOnRight prop destructuring changes
devin-ai-integration[bot] Feb 19, 2025
e5e72ff
fix(radioButton): only apply hitSlop to top and bottom
devin-ai-integration[bot] Feb 23, 2025
c7d9235
fix(radioButton): remove unused horizontalPadding variable
devin-ai-integration[bot] Feb 23, 2025
84eb5b9
refactor(checkbox): simplify hitSlop padding variable
devin-ai-integration[bot] Feb 23, 2025
d73d48e
Update src/components/checkbox/index.tsx
nitzanyiz Feb 24, 2025
f8133df
fix(checkbox): update getAccessibleHitSlop to accept size parameter
nitzanyiz Feb 26, 2025
2a1a3cf
Changed getAccessibleHitSlop to get size as argument
nitzanyiz Feb 26, 2025
3b19c50
Added gap to RadioGroup example to fit new hit target
nitzanyiz Feb 26, 2025
1413792
Merge remote-tracking branch 'origin' into devin/1739968065-checkbox-…
nitzanyiz Mar 3, 2025
4d29687
fix(checkbox): increase right margin for improved layout
nitzanyiz Mar 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions demo/src/screens/componentScreens/RadioButtonScreen.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ export default class RadioButtonScreen extends Component {
Radio Buttons
</Text>

<RadioGroup initialValue={this.state.color || null} onValueChange={value => this.setState({color: value})}>
<RadioGroup gap-s4 initialValue={this.state.color || null} onValueChange={value => this.setState({color: value})}>
<Text marginB-20 text60 $textDefault>
Select a color{'\n'}
(enum with default value)
Expand All @@ -82,6 +82,7 @@ export default class RadioButtonScreen extends Component {
</RadioGroup>

<RadioGroup
gap-s4
marginT-30
initialValue={this.state.textSide}
onValueChange={value => this.setState({textSide: value})}
Expand All @@ -96,7 +97,7 @@ export default class RadioButtonScreen extends Component {
<Text marginT-10>You chose: {this.state.textSide}</Text>
</RadioGroup>

<RadioGroup marginT-30 initialValue={this.state.value} onValueChange={value => this.setState({value})}>
<RadioGroup gap-s4 marginT-30 initialValue={this.state.value} onValueChange={value => this.setState({value})}>
<Text marginB-20 text60 $textDefault>
Yes or No?
</Text>
Expand All @@ -112,6 +113,7 @@ export default class RadioButtonScreen extends Component {
</Text>
<View row centerV marginB-10>
<RadioButton
gap-s4
selected={this.state.individualValue2}
onPress={() => this.setState({individualValue2: !this.state.individualValue2})}
label="Individual Radio Button (with style)"
Expand Down
6 changes: 6 additions & 0 deletions src/components/checkbox/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -252,8 +252,13 @@ class Checkbox extends Component<CheckboxProps, CheckboxState> {
};
};

getAccessibleHitSlop(size: number) {
return Math.max(0, (48 - size) / 2);
}

renderCheckbox() {
const {selectedIcon, label, testID, style, containerStyle, indeterminate, ...others} = this.props;

return (
//@ts-ignore
<TouchableOpacity
Expand All @@ -263,6 +268,7 @@ class Checkbox extends Component<CheckboxProps, CheckboxState> {
{...others}
style={[this.getBorderStyle(), style, !label && containerStyle]}
onPress={this.onPress}
hitSlop={this.getAccessibleHitSlop(this.props.size || DEFAULT_SIZE)}
>
{
<Animated.View
Expand Down
10 changes: 10 additions & 0 deletions src/components/radioButton/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -257,6 +257,15 @@ class RadioButton extends PureComponent<Props, RadioButtonState> {
);
}

getAccessibleHitSlop(size: number) {
const verticalPadding = Math.max(0, (48 - size) / 2);
Copy link
Collaborator

@Inbal-Tish Inbal-Tish Feb 26, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

Why only vertical?

Copy link
Collaborator

@nitzanyiz nitzanyiz Feb 26, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

Horizontally the CheckBox takes as much room as it can so it depends on the parent


return {
top: verticalPadding,
bottom: verticalPadding
};
}

render() {
const {onPress, onValueChange, containerStyle, contentOnLeft, ...others} = this.props;
const Container = onPress || onValueChange ? TouchableOpacity : View;
Expand All @@ -271,6 +280,7 @@ class RadioButton extends PureComponent<Props, RadioButtonState> {
style={containerStyle}
onPress={this.onPress}
{...this.getAccessibilityProps()}
hitSlop={this.getAccessibleHitSlop(this.props.size || DEFAULT_SIZE)}
>
{!contentOnLeft && this.renderButton()}
{this.props.iconOnRight ? this.renderLabel() : this.renderIcon()}
Expand Down