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.

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

[IOAPPX-359] Remove mandatory a11y props from some ListItem… components #317

Merged
merged 3 commits into from
Jul 30, 2024
Merged

[IOAPPX-359] Remove mandatory a11y props from some ListItem… components #317

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
eb003c4
Remove mandatory a11y props from some `ListItem…` components
dmnplb Jul 29, 2024
5783b9e
derive accessibilityLabel by list items content
CrisTofani Jul 30, 2024
af066f8
fix snaps
CrisTofani Jul 30, 2024
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
20 changes: 15 additions & 5 deletions src/components/listitems/ListItemAction.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useCallback } from "react";
import React, { ComponentProps, useCallback, useMemo } from "react";
import {
GestureResponderEvent,
Pressable,
Expand Down Expand Up @@ -36,9 +36,11 @@ export type ListItemAction = WithTestID<{
variant: "primary" | "danger";
onPress: (event: GestureResponderEvent) => void;
icon?: IOIcons;
// Accessibility
accessibilityLabel: string;
}>;
}> &
Pick<
ComponentProps<typeof Pressable>,
"accessibilityLabel" | "accessibilityHint"
>;

const styles = StyleSheet.create({
label: {
Expand All @@ -63,13 +65,19 @@ export const ListItemAction = ({
onPress,
icon,
accessibilityLabel,
accessibilityHint,
testID
}: ListItemAction) => {
const isPressed = useSharedValue(0);

const { isExperimental } = useIOExperimentalDesign();
const theme = useIOTheme();

const listItemAccessibilityLabel = useMemo(
() => (accessibilityLabel ? accessibilityLabel : `${label}`),
[label, accessibilityLabel]
);

const mapBackgroundStates: Record<string, string> = {
default: hexToRgba(IOColors[theme["listItem-pressed"]], 0),
pressed: IOColors[theme["listItem-pressed"]]
Expand Down Expand Up @@ -171,13 +179,15 @@ export const ListItemAction = ({
onPressOut={handlePressOut}
onTouchEnd={handlePressOut}
accessible={true}
accessibilityLabel={accessibilityLabel}
accessibilityLabel={listItemAccessibilityLabel}
accessibilityHint={accessibilityHint}
accessibilityRole="button"
testID={testID}
>
<Animated.View
style={[IOListItemStyles.listItem, animatedBackgroundStyle]}
importantForAccessibility="no-hide-descendants"
accessibilityElementsHidden
>
<Animated.View
style={[IOListItemStyles.listItemInner, animatedScaleStyle]}
Expand Down
28 changes: 23 additions & 5 deletions src/components/listitems/ListItemInfoCopy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useCallback } from "react";
import React, { ComponentProps, useCallback, useMemo } from "react";
import { GestureResponderEvent, Pressable, View } from "react-native";
import Animated, {
Extrapolate,
Expand Down Expand Up @@ -30,9 +30,11 @@ export type ListItemInfoCopy = WithTestID<{
numberOfLines?: number;
onPress: (event: GestureResponderEvent) => void;
icon?: IOIcons;
// Accessibility
accessibilityLabel: string;
}>;
}> &
Pick<
ComponentProps<typeof Pressable>,
"accessibilityLabel" | "accessibilityHint"
>;

CrisTofani marked this conversation as resolved.
Show resolved Hide resolved
export const ListItemInfoCopy = ({
label,
Expand All @@ -41,12 +43,26 @@ export const ListItemInfoCopy = ({
onPress,
icon,
accessibilityLabel,
accessibilityHint,
testID
}: ListItemInfoCopy) => {
const isPressed = useSharedValue(0);
const { isExperimental } = useIOExperimentalDesign();
const theme = useIOTheme();

const componentValueToAccessibility = useMemo(
() => (typeof value === "string" ? value : ""),
[value]
);

const listItemAccessibilityLabel = useMemo(
() =>
accessibilityLabel
? accessibilityLabel
: `${label}; ${componentValueToAccessibility}`,
[label, componentValueToAccessibility, accessibilityLabel]
);

const foregroundColor = isExperimental
? theme["interactiveElem-default"]
: "blue";
Expand Down Expand Up @@ -120,12 +136,14 @@ export const ListItemInfoCopy = ({
onPressIn={handlePressIn}
onPressOut={handlePressOut}
accessible={true}
accessibilityLabel={accessibilityLabel}
accessibilityLabel={listItemAccessibilityLabel}
accessibilityHint={accessibilityHint}
accessibilityRole="button"
testID={testID}
>
<Animated.View
importantForAccessibility="no-hide-descendants"
accessibilityElementsHidden
style={[IOListItemStyles.listItem, animatedBackgroundStyle]}
>
<Animated.View
Expand Down
37 changes: 32 additions & 5 deletions src/components/listitems/ListItemNavAlert.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useCallback } from "react";
import React, { ComponentProps, useCallback, useMemo } from "react";
import { GestureResponderEvent, Pressable, View } from "react-native";
import Animated, {
Extrapolate,
Expand Down Expand Up @@ -29,21 +29,45 @@ export type ListItemNavAlert = WithTestID<{
description?: string | React.ReactNode;
withoutIcon?: boolean;
onPress: (event: GestureResponderEvent) => void;
// Accessibility
accessibilityLabel: string;
}>;
}> &
Pick<
ComponentProps<typeof Pressable>,
"accessibilityLabel" | "accessibilityHint"
>;

export const ListItemNavAlert = ({
value,
description,
withoutIcon = false,
onPress,
accessibilityLabel,
accessibilityHint,
testID
}: ListItemNavAlert) => {
const isPressed: Animated.SharedValue<number> = useSharedValue(0);
const { isExperimental } = useIOExperimentalDesign();

const componentValueToAccessibility = useMemo(
() => (typeof value === "string" ? value : ""),
[value]
);

const componentDescriptionToAccessibility = useMemo(
() => (typeof description === "string" ? description : ""),
[description]
);

const listItemAccessibilityLabel = useMemo(
() =>
accessibilityLabel
? accessibilityLabel
: `${componentValueToAccessibility}; ${componentDescriptionToAccessibility}`,
[
componentDescriptionToAccessibility,
componentValueToAccessibility,
accessibilityLabel
]
);
const theme = useIOTheme();

// TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
Expand Down Expand Up @@ -124,12 +148,15 @@ export const ListItemNavAlert = ({
onPressIn={handlePressIn}
onPressOut={handlePressOut}
accessible={true}
accessibilityLabel={accessibilityLabel}
accessibilityLabel={listItemAccessibilityLabel}
accessibilityHint={accessibilityHint}
accessibilityRole="button"
testID={testID}
>
<Animated.View
style={[IOListItemStyles.listItem, animatedBackgroundStyle]}
importantForAccessibility="no-hide-descendants"
accessibilityElementsHidden
>
<Animated.View
style={[IOListItemStyles.listItemInner, animatedScaleStyle]}
Expand Down
8 changes: 8 additions & 0 deletions src/components/listitems/__test__/__snapshots__/listitem.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ exports[`Test List Item Components - Experimental Enabled ListItemAction Snapsh
onTouchEnd={[Function]}
>
<View
accessibilityElementsHidden={true}
importantForAccessibility="no-hide-descendants"
style={
[
Expand Down Expand Up @@ -343,6 +344,7 @@ exports[`Test List Item Components - Experimental Enabled ListItemInfoCopy Snap
onStartShouldSetResponder={[Function]}
>
<View
accessibilityElementsHidden={true}
importantForAccessibility="no-hide-descendants"
style={
[
Expand Down Expand Up @@ -727,6 +729,8 @@ exports[`Test List Item Components - Experimental Enabled ListItemNavAlert Snap
onStartShouldSetResponder={[Function]}
>
<View
accessibilityElementsHidden={true}
importantForAccessibility="no-hide-descendants"
style={
[
{
Expand Down Expand Up @@ -1863,6 +1867,7 @@ exports[`Test List Item Components ListItemAction Snapshot 1`] = `
onTouchEnd={[Function]}
>
<View
accessibilityElementsHidden={true}
importantForAccessibility="no-hide-descendants"
style={
[
Expand Down Expand Up @@ -2170,6 +2175,7 @@ exports[`Test List Item Components ListItemInfoCopy Snapshot 1`] = `
onStartShouldSetResponder={[Function]}
>
<View
accessibilityElementsHidden={true}
importantForAccessibility="no-hide-descendants"
style={
[
Expand Down Expand Up @@ -2554,6 +2560,8 @@ exports[`Test List Item Components ListItemNavAlert Snapshot 1`] = `
onStartShouldSetResponder={[Function]}
>
<View
accessibilityElementsHidden={true}
importantForAccessibility="no-hide-descendants"
style={
[
{
Expand Down
Loading