Skip to content

Commit 39b3a42

Browse files
authored
refactor: default hint for a11y label (#424)
## Short description This pull request includes a change to the `ListItemRadioWithAmount` component to improve its accessibility by providing a default accessibility label ## List of changes proposed in this pull request - Added a `defaultAccessibilityLabel` that combines the `label`, `formattedAmountString`, and `suggestReason` if available, and used it as a fallback for `accessibilityLabel` when it's not provide ## How to test N/A
1 parent ecd3159 commit 39b3a42

File tree

2 files changed

+9
-1
lines changed

2 files changed

+9
-1
lines changed

src/components/listitems/ListItemRadioWithAmount.tsx

+5-1
Original file line numberDiff line numberDiff line change
@@ -48,11 +48,15 @@ export const ListItemRadioWithAmount = ({
4848

4949
const suggestColor: IOColors = "hanPurple-500";
5050

51+
const defaultAccessibilityLabel = `${label} ${formattedAmountString} ${
52+
suggestReason ?? ""
53+
}`;
54+
5155
return (
5256
<PressableListItemBase
5357
onPress={pressHandler}
5458
accessibilityRole="radio"
55-
accessibilityLabel={accessibilityLabel}
59+
accessibilityLabel={accessibilityLabel ?? defaultAccessibilityLabel}
5660
accessibilityState={{
5761
checked: selected ?? toggleValue
5862
}}

src/components/listitems/__test__/__snapshots__/listitem.test.tsx.snap

+4
Original file line numberDiff line numberDiff line change
@@ -767,6 +767,7 @@ exports[`Test List Item Components - Experimental Enabled ListItemNavAlert Snap
767767

768768
exports[`Test List Item Components - Experimental Enabled ListItemRadioWithAmount Snapshot 1`] = `
769769
<View
770+
accessibilityLabel="label € 1.000,00 suggestReason"
770771
accessibilityRole="radio"
771772
accessibilityState={
772773
{
@@ -1140,6 +1141,7 @@ exports[`Test List Item Components - Experimental Enabled ListItemRadioWithAmou
11401141

11411142
exports[`Test List Item Components - Experimental Enabled ListItemRadioWithAmount Snapshot 2`] = `
11421143
<View
1144+
accessibilityLabel="label € 1.000,00 "
11431145
accessibilityRole="radio"
11441146
accessibilityState={
11451147
{
@@ -2343,6 +2345,7 @@ exports[`Test List Item Components ListItemNavAlert Snapshot 1`] = `
23432345

23442346
exports[`Test List Item Components ListItemRadioWithAmount Snapshot 1`] = `
23452347
<View
2348+
accessibilityLabel="label € 1.000,00 suggestReason"
23462349
accessibilityRole="radio"
23472350
accessibilityState={
23482351
{
@@ -2716,6 +2719,7 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 1`] = `
27162719

27172720
exports[`Test List Item Components ListItemRadioWithAmount Snapshot 2`] = `
27182721
<View
2722+
accessibilityLabel="label € 1.000,00 "
27192723
accessibilityRole="radio"
27202724
accessibilityState={
27212725
{

0 commit comments

Comments
 (0)