Skip to content

Commit

Permalink
fix: [IOBP-1179] a11y banner focus order (#6725)
Browse files Browse the repository at this point in the history 
## Short description
This pull request updates the @pagopa/io-app-design-system to solve the
accessibility focus order of the `Banner` component

## List of changes proposed in this pull request
- Updated the `@pagopa/io-app-design-system` package from version
`4.5.5` to `4.5.6`
- Removed the unused `SwitchLabel`
- Removed the unnecessary fragment tags around the
`AnimatedMessageCheckboxShowroom` component

## How to test
- Using a real device 📱, check the Banner in the `Pagamenti` section
- Turn on the TalkBack accessibility tool
- Ensure that when navigating with the `Tab` and `Shift + Tab` keys, the
switch logic for the `Banner` component correctly moves focus (Text ->
CTA -> Close Icon)

## Preview

https://github.com/user-attachments/assets/de385151-cd7f-4b31-9a4f-b36e7b84c929
  • Loading branch information
@LeleDallas
LeleDallas authored Feb 17, 2025
1 parent 4359b93 commit 29718a3
Show file tree
Hide file tree
Showing 12 changed files with 265 additions and 28 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@
"@babel/plugin-transform-private-property-in-object": "^7.25.9",
"@babel/plugin-transform-react-jsx": "^7.25.9",
"@gorhom/bottom-sheet": "^4.1.5",
"@pagopa/io-app-design-system": "4.5.5",
"@pagopa/io-app-design-system": "4.5.6",
"@pagopa/io-pagopa-commons": "^3.1.0",
"@pagopa/io-react-native-cieid": "^0.3.5",
"@pagopa/io-react-native-crypto": "^1.0.1",
Expand Down
29 changes: 7 additions & 22 deletions ts/features/design-system/core/DSSelection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ import {
NativeSwitch,
RadioGroup,
RadioItem,
SwitchLabel,
VStack,
useIOTheme
} from "@pagopa/io-app-design-system";
Expand Down Expand Up @@ -62,8 +61,6 @@ export const DSSelection = () => {
<NativeSwitchShowroom />
{/* ListItemSwitch */}
<ListItemSwitchShowroom />
{/* SwitchLabel */}
{renderAnimatedSwitch()}
</VStack>
</VStack>
</VStack>
Expand Down Expand Up @@ -308,29 +305,17 @@ const AnimatedMessageCheckboxShowroom = () => {
const toggleSwitch = () => setIsEnabled(previousState => !previousState);

return (
<>
<DSComponentViewerBox name="AnimatedMessageCheckbox">
<View style={[IOStyles.row, IOStyles.alignCenter]}>
<AnimatedMessageCheckbox checked={isEnabled} />
<HSpacer size={24} />
<NativeSwitch onValueChange={toggleSwitch} value={isEnabled} />
</View>
</DSComponentViewerBox>
</>
<DSComponentViewerBox name="AnimatedMessageCheckbox">
<View style={[IOStyles.row, IOStyles.alignCenter]}>
<AnimatedMessageCheckbox checked={isEnabled} />
<HSpacer size={24} />
<NativeSwitch onValueChange={toggleSwitch} value={isEnabled} />
</View>
</DSComponentViewerBox>
);
};

// SWITCH

const renderAnimatedSwitch = () => (
<DSComponentViewerBox name="AnimatedSwitch, dismissed in favor of the native one">
<VStack space={componentInnerMargin}>
<SwitchLabel label="This is a test" />
<SwitchLabel label="This is a test with a very loooong looooooong loooooooong text" />
</VStack>
</DSComponentViewerBox>
);

const NativeSwitchShowroom = () => {
const [isEnabled, setIsEnabled] = useState(false);
const toggleSwitch = () => setIsEnabled(previousState => !previousState);
Expand Down
28 changes: 28 additions & 0 deletions ...atures/itwallet/common/components/__tests__/__snapshots__/ItwFeedbackBanner.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -471,8 +471,36 @@ exports[`ItwFeedbackBanner should match the snapshot 1`] = `
accessibilityElementsHidden={true}
accessibilityLabel="Inizia"
accessibilityRole="button"
accessibilityState={
{
"busy": undefined,
"checked": undefined,
"disabled": undefined,
"expanded": undefined,
"selected": undefined,
}
}
accessibilityValue={
{
"max": undefined,
"min": undefined,
"now": undefined,
"text": undefined,
}
}
accessible={true}
collapsable={false}
focusable={true}
importantForAccessibility="no-hide-descendants"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderRelease={[Function]}
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
pointerEvents="none"
>
<View
Expand Down
28 changes: 28 additions & 0 deletions ...ommon/components/discoveryBanner/__tests__/__snapshots__/ItwDiscoveryBanner.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -472,8 +472,36 @@ exports[`ItwDiscoveryBanner should match snapshot 1`] = `
accessibilityElementsHidden={true}
accessibilityLabel="Inizia"
accessibilityRole="button"
accessibilityState={
{
"busy": undefined,
"checked": undefined,
"disabled": undefined,
"expanded": undefined,
"selected": undefined,
}
}
accessibilityValue={
{
"max": undefined,
"min": undefined,
"now": undefined,
"text": undefined,
}
}
accessible={true}
collapsable={false}
focusable={true}
importantForAccessibility="no-hide-descendants"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderRelease={[Function]}
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
pointerEvents="none"
>
<View
Expand Down
28 changes: 28 additions & 0 deletions ...onents/discoveryBanner/__tests__/__snapshots__/ItwDiscoveryBannerOnboarding.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -790,8 +790,36 @@ exports[`ItwDiscoveryBannerOnboarding should match snapshot when isItwDiscoveryB
accessibilityElementsHidden={true}
accessibilityLabel="Inizia"
accessibilityRole="button"
accessibilityState={
{
"busy": undefined,
"checked": undefined,
"disabled": undefined,
"expanded": undefined,
"selected": undefined,
}
}
accessibilityValue={
{
"max": undefined,
"min": undefined,
"now": undefined,
"text": undefined,
}
}
accessible={true}
collapsable={false}
focusable={true}
importantForAccessibility="no-hide-descendants"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderRelease={[Function]}
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
pointerEvents="none"
>
<View
Expand Down
28 changes: 28 additions & 0 deletions ...onents/discoveryBanner/__tests__/__snapshots__/ItwDiscoveryBannerStandalone.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -822,8 +822,36 @@ exports[`ItwDiscoveryBannerStandalone should match snapshot when isItwDiscoveryB
accessibilityElementsHidden={true}
accessibilityLabel="Inizia"
accessibilityRole="button"
accessibilityState={
{
"busy": undefined,
"checked": undefined,
"disabled": undefined,
"expanded": undefined,
"selected": undefined,
}
}
accessibilityValue={
{
"max": undefined,
"min": undefined,
"now": undefined,
"text": undefined,
}
}
accessible={true}
collapsable={false}
focusable={true}
importantForAccessibility="no-hide-descendants"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderRelease={[Function]}
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
pointerEvents="none"
>
<View
Expand Down
28 changes: 28 additions & 0 deletions ...ssages/components/MessageDetail/__tests__/__snapshots__/RemoteContentBanner.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -443,8 +443,36 @@ exports[`RemoteContentBanner Should match snapshot 1`] = `
accessibilityElementsHidden={true}
accessibilityLabel="Learn more"
accessibilityRole="button"
accessibilityState={
{
"busy": undefined,
"checked": undefined,
"disabled": undefined,
"expanded": undefined,
"selected": undefined,
}
}
accessibilityValue={
{
"max": undefined,
"min": undefined,
"now": undefined,
"text": undefined,
}
}
accessible={true}
collapsable={false}
focusable={true}
importantForAccessibility="no-hide-descendants"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderRelease={[Function]}
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
pointerEvents="none"
>
<View
Expand Down
28 changes: 28 additions & 0 deletions ...ushNotifications/components/__tests__/__snapshots__/PushNotificationsBanner.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -473,8 +473,36 @@ exports[`PushNotificationsBanner should render correctly and call 'trackPushNoti
accessibilityElementsHidden={true}
accessibilityLabel="Turn on push notifications"
accessibilityRole="button"
accessibilityState={
{
"busy": undefined,
"checked": undefined,
"disabled": undefined,
"expanded": undefined,
"selected": undefined,
}
}
accessibilityValue={
{
"max": undefined,
"min": undefined,
"now": undefined,
"text": undefined,
}
}
accessible={true}
collapsable={false}
focusable={true}
importantForAccessibility="no-hide-descendants"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderRelease={[Function]}
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
pointerEvents="none"
>
<View
Expand Down
28 changes: 28 additions & 0 deletions ts/screens/authentication/__tests__/__snapshots__/LandingScreen.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2439,8 +2439,36 @@ exports[`LandingScreen Should match the snapshot 1`] = `
accessibilityElementsHidden={true}
accessibilityLabel="We give you a hand"
accessibilityRole="button"
accessibilityState={
{
"busy": undefined,
"checked": undefined,
"disabled": undefined,
"expanded": undefined,
"selected": undefined,
}
}
accessibilityValue={
{
"max": undefined,
"min": undefined,
"now": undefined,
"text": undefined,
}
}
accessible={true}
collapsable={false}
focusable={true}
importantForAccessibility="no-hide-descendants"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderRelease={[Function]}
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
pointerEvents="none"
>
<View
Expand Down
28 changes: 28 additions & 0 deletions ts/screens/profile/__test__/__snapshots__/ProfileMainScreenTopBanner.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -332,8 +332,36 @@ exports[`ProfileMainScreenTopBanner should match snapshot for all possible resul
accessibilityElementsHidden={true}
accessibilityLabel="Go to "Your data" section"
accessibilityRole="button"
accessibilityState={
{
"busy": undefined,
"checked": undefined,
"disabled": undefined,
"expanded": undefined,
"selected": undefined,
}
}
accessibilityValue={
{
"max": undefined,
"min": undefined,
"now": undefined,
"text": undefined,
}
}
accessible={true}
collapsable={false}
focusable={true}
importantForAccessibility="no-hide-descendants"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderRelease={[Function]}
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
pointerEvents="none"
>
<View
Expand Down
28 changes: 28 additions & 0 deletions ts/screens/profile/components/__test__/__snapshots__/SettingsDiscoveryBanner.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -445,8 +445,36 @@ exports[`settingsDiscoveryBanner should match snapshot 1`] = `
accessibilityElementsHidden={true}
accessibilityLabel="Go to Settings"
accessibilityRole="button"
accessibilityState={
{
"busy": undefined,
"checked": undefined,
"disabled": undefined,
"expanded": undefined,
"selected": undefined,
}
}
accessibilityValue={
{
"max": undefined,
"min": undefined,
"now": undefined,
"text": undefined,
}
}
accessible={true}
collapsable={false}
focusable={true}
importantForAccessibility="no-hide-descendants"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderRelease={[Function]}
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
pointerEvents="none"
>
<View
Expand Down
Loading

0 comments on commit 29718a3

Please sign in to comment.