Skip to content

feat(button & stepper): ensure minimum 48x48 hit target for better accessibility #3522

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 8 commits into from
Feb 27, 2025
Merged

feat(button & stepper): ensure minimum 48x48 hit target for better accessibility #3522

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
84887cc
Added hitslop calculation for button
nitzanyiz Feb 19, 2025
07a98bd
fixed ts error - not sure why it popped now
nitzanyiz Feb 19, 2025
9214d71
Updated snapshots with hitslop
nitzanyiz Feb 23, 2025
772e72e
Merge remote-tracking branch 'origin' into feat/button-accesibility-h…
nitzanyiz Feb 23, 2025
c1b3ba1
Refactor getAccessibleHitSlop to simplify width calculation and impro…
nitzanyiz Feb 24, 2025
7a9736a
Merge branch 'master' into feat/button-accesibility-hit-target
nitzanyiz Feb 25, 2025
8b6de1b
Revert "Refactor getAccessibleHitSlop to simplify width calculation a…
nitzanyiz Feb 27, 2025
e073cf3
fix(button): rename variable for clarity in getAccessibleHitSlop method
nitzanyiz Feb 27, 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
24 changes: 20 additions & 4 deletions demo/src/screens/__tests__/__snapshots__/TextFieldScreen.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3555,6 +3555,14 @@ exports[`TextField Screen renders screen 1`] = `
accessible={true}
collapsable={false}
focusable={true}
hitSlop={
{
"bottom": 15,
"left": 0,
"right": 0,
"top": 15,
}
}
onClick={[Function]}
onLayout={[Function]}
onResponderGrant={[Function]}
Expand Down Expand Up @@ -3891,10 +3899,10 @@ exports[`TextField Screen renders screen 1`] = `
focusable={true}
hitSlop={
{
"bottom": 20,
"left": 20,
"right": 20,
"top": 20,
"bottom": 7.5,
"left": 10,
"right": 10,
"top": 7.5,
}
}
onClick={[Function]}
Expand Down Expand Up @@ -4613,6 +4621,14 @@ exports[`TextField Screen renders screen 1`] = `
accessible={true}
collapsable={false}
focusable={true}
hitSlop={
{
"bottom": 7.5,
"left": 10,
"right": 10,
"top": 7.5,
}
}
onClick={[Function]}
onLayout={[Function]}
onResponderGrant={[Function]}
Expand Down
7 changes: 7 additions & 0 deletions src/components/button/ButtonConstants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,4 +22,11 @@ export const MIN_WIDTH = {
LARGE: 90
};

export const SIZE_TO_VERTICAL_HITSLOP = {
[ButtonSize.xSmall]: 30,
[ButtonSize.small]: 25,
[ButtonSize.medium]: 20,
[ButtonSize.large]: 15
} as const;

export const DEFAULT_SIZE = ButtonSize.large;
Loading