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

fix: [IOBP-458,IOBP-459] Added accessibility label to the RNavScreenWithLargeHeader component #5467

Merged
merged 12 commits into from
Feb 6, 2024
Merged

fix: [IOBP-458,IOBP-459] Added accessibility label to the RNavScreenWithLargeHeader component #5467

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
a6cb026
fix: Added accessibility label to the RNavScreenWithLargeHeader header
Hantex9 Jan 30, 2024
68c8bb9
Merge branch 'master' into IOBP-458-459-accessibility-title-scroll-he…
Hantex9 Jan 31, 2024
8414c03
Merge branch 'master' into IOBP-458-459-accessibility-title-scroll-he…
forrest57 Jan 31, 2024
07eef80
Merge branch 'master' into IOBP-458-459-accessibility-title-scroll-he…
Hantex9 Feb 1, 2024
f5404c2
Merge branch 'master' into IOBP-458-459-accessibility-title-scroll-he…
Hantex9 Feb 1, 2024
314de26
chore: changed accessibilityLabel as optional property and added role…
Hantex9 Feb 1, 2024
eefe25b
Merge branch 'master' into IOBP-458-459-accessibility-title-scroll-he…
dmnplb Feb 1, 2024
274e8a7
Merge branch 'master' into IOBP-458-459-accessibility-title-scroll-he…
dmnplb Feb 1, 2024
a356638
Merge branch 'master' into IOBP-458-459-accessibility-title-scroll-he…
Hantex9 Feb 1, 2024
fd64660
Merge branch 'master' into IOBP-458-459-accessibility-title-scroll-he…
Hantex9 Feb 2, 2024
55559cb
Merge branch 'master' into IOBP-458-459-accessibility-title-scroll-he…
Hantex9 Feb 5, 2024
2b7cfea
Merge branch 'master' into IOBP-458-459-accessibility-title-scroll-he…
forrest57 Feb 5, 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 ts/components/ui/RNavScreenWithLargeHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,11 +22,16 @@ import {
import { SupportRequestParams } from "../../hooks/useStartSupportRequest";
import I18n from "../../i18n";

export type LargeHeaderTitleProps = {
label: string;
accessibilityLabel?: string;
testID?: string;
};

type Props = {
children: React.ReactNode;
fixedBottomSlot?: React.ReactNode;
title: string;
titleTestID?: string;
title: LargeHeaderTitleProps;
Copy link
Contributor

@forrest57 forrest57 Jan 31, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

Suggested change
title: LargeHeaderTitleProps;
titleProps: LargeHeaderTitleProps;

since we are using this naming convention for the HeaderActions, I think this brings more consistency; what do you think?

Copy link
Contributor

Choose a reason for hiding this comment

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

also, are you sure we want to force the a11y label instead of inferring it from the label if undef?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

About the renaming from title to titleProps I don't like it very much as a naming convention, indeed I'm following the naming convention also used on other components inside the design system library.

About the accessibilityLabel as required, I agree with you and as a follow-up to today's meeting, I changed it as an optional property: 314de26

description?: string;
goBack?: BackProps["goBack"];
headerActionsProp?: HeaderActionProps;
Expand All @@ -49,7 +54,6 @@ export const RNavScreenWithLargeHeader = ({
children,
fixedBottomSlot,
title,
titleTestID,
goBack,
description,
contextualHelp,
Expand All @@ -75,7 +79,7 @@ export const RNavScreenWithLargeHeader = ({
const headerProps: ComponentProps<typeof HeaderSecondLevel> = useHeaderProps({
backAccessibilityLabel: I18n.t("global.buttons.back"),
goBack: goBack ?? navigation.goBack,
title,
title: title.label,
scrollValues: {
contentOffsetY: translationY,
triggerOffset: titleHeight
Expand Down Expand Up @@ -109,7 +113,13 @@ export const RNavScreenWithLargeHeader = ({
style={IOStyles.horizontalContentPadding}
onLayout={getTitleHeight}
>
<H2 testID={titleTestID}>{title}</H2>
<H2
testID={title.testID}
accessibilityLabel={title.accessibilityLabel ?? title.label}
accessibilityRole="header"
>
{title.label}
</H2>
</View>

{description && (
Expand Down
6 changes: 5 additions & 1 deletion ts/features/design-system/core/DSHeaderSecondLevel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,11 @@ import { Body, VSpacer } from "@pagopa/io-app-design-system";
import { RNavScreenWithLargeHeader } from "../../../components/ui/RNavScreenWithLargeHeader";

export const DSHeaderSecondLevel = () => (
<RNavScreenWithLargeHeader title="Questo è un titolo lungo, ma lungo lungo davvero, eh!">
<RNavScreenWithLargeHeader
title={{
label: "Questo è un titolo lungo, ma lungo lungo davvero, eh!"
}}
>
<VSpacer />
{[...Array(50)].map((_el, i) => (
<Body key={`body-${i}`}>Repeated text</Body>
Expand Down
8 changes: 5 additions & 3 deletions ts/features/idpay/details/screens/IdPayOperationsListScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,9 +130,11 @@ export const IdPayOperationsListScreen = () => {

return (
<RNavScreenWithLargeHeader
title={I18n.t(
"idpay.initiative.details.initiativeDetailsScreen.configured.operationsList.title"
)}
title={{
label: I18n.t(
"idpay.initiative.details.initiativeDetailsScreen.configured.operationsList.title"
)
}}
>
<ContentWrapper>
<VSpacer size={8} />
Expand Down
4 changes: 3 additions & 1 deletion ts/features/walletV3/transaction/screens/WalletTransactionDetailsScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,9 @@ const WalletTransactionDetailsScreen = () => {

return (
<RNavScreenWithLargeHeader
title={I18n.t("transaction.details.title")}
title={{
label: I18n.t("transaction.details.title")
}}
contextualHelp={emptyContextualHelp}
faqCategories={["wallet_transaction"]}
headerActionsProp={{ showHelp: true }}
Expand Down
4 changes: 3 additions & 1 deletion ts/features/walletV3/transaction/screens/WalletTransactionOperationDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,9 @@ const WalletTransactionOperationDetailsScreen = () => {

return (
<RNavScreenWithLargeHeader
title={cleanTransactionDescription(operationName)}
title={{
label: cleanTransactionDescription(operationName)
}}
>
<ScrollView style={styles.scrollViewContainer}>
{operationDetails.importo && (
Expand Down
4 changes: 3 additions & 1 deletion ts/screens/onboarding/OnboardingServicesPreferenceScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,9 @@ const OnboardingServicesPreferenceScreen = (
const showBadge = !isFirstOnboarding;
return (
<RNavScreenWithLargeHeader
title={I18n.t("services.optIn.preferences.title")}
title={{
label: I18n.t("services.optIn.preferences.title")
}}
description={I18n.t("services.optIn.preferences.body")}
headerActionsProp={{ showHelp: true }}
contextualHelp={emptyContextualHelp}
Expand Down
6 changes: 4 additions & 2 deletions ts/screens/onboarding/OnboardingShareDataScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,8 +71,10 @@ const OnboardingShareDataScreen = (props: Props): React.ReactElement => {
return (
<RNavScreenWithLargeHeader
goBack={handleGoBack}
title={I18n.t("profile.main.privacy.shareData.screen.title")}
titleTestID={"share-data-component-title"}
title={{
label: I18n.t("profile.main.privacy.shareData.screen.title"),
testID: "share-data-component-title"
}}
description={I18n.t("profile.main.privacy.shareData.screen.description")}
fixedBottomSlot={
<SafeAreaView>
Expand Down
4 changes: 3 additions & 1 deletion ts/screens/profile/CalendarsPreferencesScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,9 @@ class CalendarsPreferencesScreen extends React.PureComponent<Props, State> {
const { isLoading } = this.state;
return (
<RNavScreenWithLargeHeader
title={I18n.t("profile.preferences.list.preferred_calendar.title")}
title={{
label: I18n.t("profile.preferences.list.preferred_calendar.title")
}}
description={I18n.t("messages.cta.reminderCalendarSelect")}
contextualHelpMarkdown={contextualHelpMarkdown}
headerActionsProp={{ showHelp: true }}
Expand Down
4 changes: 3 additions & 1 deletion ts/screens/profile/LanguagesPreferencesScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,9 @@ class LanguagesPreferencesScreen extends React.PureComponent<Props, State> {
public render() {
const ContainerComponent = withLoadingSpinner(() => (
<RNavScreenWithLargeHeader
title={I18n.t("profile.preferences.list.preferred_language.title")}
title={{
label: I18n.t("profile.preferences.list.preferred_language.title")
}}
description={I18n.t(
"profile.preferences.list.preferred_language.subtitle"
)}
Expand Down
4 changes: 3 additions & 1 deletion ts/screens/profile/NotificationsPreferencesScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,9 @@ export const NotificationsPreferencesScreen = () => {

return (
<RNavScreenWithLargeHeader
title={I18n.t("profile.preferences.notifications.header")}
title={{
label: I18n.t("profile.preferences.notifications.header")
}}
description={I18n.t("profile.preferences.notifications.subtitle")}
contextualHelpMarkdown={contextualHelpMarkdown}
headerActionsProp={{ showHelp: true }}
Expand Down
4 changes: 3 additions & 1 deletion ts/screens/profile/PreferencesScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -243,7 +243,9 @@ class PreferencesScreen extends React.Component<Props> {

return (
<RNavScreenWithLargeHeader
title={I18n.t("profile.preferences.title")}
title={{
label: I18n.t("profile.preferences.title")
}}
description={I18n.t("profile.preferences.subtitle")}
contextualHelpMarkdown={contextualHelpMarkdown}
headerActionsProp={{ showHelp: true }}
Expand Down
4 changes: 3 additions & 1 deletion ts/screens/profile/PrivacyMainScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -262,7 +262,9 @@ const PrivacyMainScreen = ({ navigation }: Props) => {

return (
<RNavScreenWithLargeHeader
title={I18n.t("profile.main.privacy.title")}
title={{
label: I18n.t("profile.main.privacy.title")
}}
description={I18n.t("profile.main.privacy.subtitle")}
headerActionsProp={{ showHelp: true }}
>
Expand Down
4 changes: 3 additions & 1 deletion ts/screens/profile/ProfileAboutApp.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,9 @@ import I18n from "../../i18n";

const ProfileAboutApp = () => (
<RNavScreenWithLargeHeader
title={I18n.t("profile.main.appInfo.title")}
title={{
label: I18n.t("profile.main.appInfo.title")
}}
headerActionsProp={{ showHelp: false }}
>
<ContentWrapper>
Expand Down
4 changes: 3 additions & 1 deletion ts/screens/profile/ProfileDataScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,9 @@ const ProfileDataScreen: React.FC<Props> = ({
};
return (
<RNavScreenWithLargeHeader
title={I18n.t("profile.data.title")}
title={{
label: I18n.t("profile.data.title")
}}
description={I18n.t("profile.data.subtitle")}
headerActionsProp={{ showHelp: true }}
contextualHelpMarkdown={contextualHelpMarkdown}
Expand Down
4 changes: 3 additions & 1 deletion ts/screens/profile/RemoveAccountInfoScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,9 @@ const RemoveAccountInfo: React.FunctionComponent<Props> = props => {
);
return (
<RNavScreenWithLargeHeader
title={I18n.t("profile.main.privacy.removeAccount.title")}
title={{
label: I18n.t("profile.main.privacy.removeAccount.title")
}}
fixedBottomSlot={footerComponent}
>
<ContentWrapper>
Expand Down
4 changes: 3 additions & 1 deletion ts/screens/profile/SecurityScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,9 @@ const SecurityScreen = (): React.ReactElement => {

return (
<RNavScreenWithLargeHeader
title={I18n.t("profile.security.title")}
title={{
label: I18n.t("profile.security.title")
}}
description={I18n.t("profile.security.subtitle")}
headerActionsProp={{ showHelp: true }}
contextualHelpMarkdown={contextualHelpMarkdown}
Expand Down
4 changes: 3 additions & 1 deletion ts/screens/profile/ServicesPreferenceScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,9 @@ const ServicesPreferenceScreen = (props: Props): React.ReactElement => {

return (
<RNavScreenWithLargeHeader
title={I18n.t("services.optIn.preferences.title")}
title={{
label: I18n.t("services.optIn.preferences.title")
}}
description={I18n.t("services.optIn.preferences.body")}
headerActionsProp={{ showHelp: true }}
>
Expand Down
6 changes: 4 additions & 2 deletions ts/screens/profile/ShareDataScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,8 +77,10 @@ const ShareDataScreen = (props: Props): React.ReactElement => {

return (
<RNavScreenWithLargeHeader
title={I18n.t("profile.main.privacy.shareData.screen.title")}
titleTestID={"share-data-component-title"}
title={{
label: I18n.t("profile.main.privacy.shareData.screen.title"),
testID: "share-data-component-title"
}}
description={I18n.t("profile.main.privacy.shareData.screen.description")}
fixedBottomSlot={
<FooterWithButtons type="SingleButton" primary={buttonProps} />
Expand Down
Loading