From dd9b2d6bc46cd30d9dc82bc6f753898e25940a82 Mon Sep 17 00:00:00 2001
From: Andrea Piai <andrea.piai@pagopa.it>
Date: Tue, 25 Feb 2025 17:44:26 +0100
Subject: [PATCH 1/3] Service name accessibility on message details

---
 .../components/MessageDetail/MessageDetailsHeader.tsx     | 8 ++------
 .../components/MessageDetail/OrganizationHeader.tsx       | 2 +-
 2 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/ts/features/messages/components/MessageDetail/MessageDetailsHeader.tsx b/ts/features/messages/components/MessageDetail/MessageDetailsHeader.tsx
index 40e17c3d524..94744797cb7 100644
--- a/ts/features/messages/components/MessageDetail/MessageDetailsHeader.tsx
+++ b/ts/features/messages/components/MessageDetail/MessageDetailsHeader.tsx
@@ -9,7 +9,7 @@ import { localeDateFormat } from "../../../../utils/locale";
 import I18n from "../../../../i18n";
 import { logosForService } from "../../../services/common/utils";
 import { useIOSelector } from "../../../../store/hooks";
-import { serviceByIdPotSelector } from "../../../services/details/store/reducers";
+import { serviceByIdPotSelector, serviceByIdSelector } from "../../../services/details/store/reducers";
 import { gapBetweenItemsInAGrid } from "../../utils";
 import { UIMessageId } from "../../types";
 import { OrganizationHeader } from "./OrganizationHeader";
@@ -53,11 +53,7 @@ export const MessageDetailsHeader = ({
   serviceId,
   ...rest
 }: MessageDetailsHeaderProps) => {
-  const service = pipe(
-    useIOSelector(state => serviceByIdPotSelector(state, serviceId)),
-    pot.toOption,
-    O.toUndefined
-  );
+  const service = useIOSelector(state => serviceByIdSelector(state, serviceId));
 
   return (
     <>
diff --git a/ts/features/messages/components/MessageDetail/OrganizationHeader.tsx b/ts/features/messages/components/MessageDetail/OrganizationHeader.tsx
index 22d78afc602..8bbe8f16705 100644
--- a/ts/features/messages/components/MessageDetail/OrganizationHeader.tsx
+++ b/ts/features/messages/components/MessageDetail/OrganizationHeader.tsx
@@ -68,7 +68,7 @@ export const OrganizationHeader = ({
           {organizationName}
         </Body>
         <BodySmall
-          color={theme["interactiveElem-default"]}
+          asLink={true}
           onPress={navigateToServiceDetails}
           weight="Semibold"
         >

From e1d8d2c5f716ac4a9c09dbb5e12f4f4733128b31 Mon Sep 17 00:00:00 2001
From: Andrea Piai <andrea.piai@pagopa.it>
Date: Wed, 26 Feb 2025 09:43:26 +0100
Subject: [PATCH 2/3] Linter

---
 .../components/MessageDetail/MessageDetailsHeader.tsx        | 5 +----
 .../messages/components/MessageDetail/OrganizationHeader.tsx | 4 +---
 .../__snapshots__/MessageDetailsHeader.test.tsx.snap         | 5 ++++-
 .../__tests__/__snapshots__/OrganizationHeader.test.tsx.snap | 5 ++++-
 .../__snapshots__/MessageDetailsScreen.test.tsx.snap         | 5 ++++-
 5 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/ts/features/messages/components/MessageDetail/MessageDetailsHeader.tsx b/ts/features/messages/components/MessageDetail/MessageDetailsHeader.tsx
index 94744797cb7..a5ca3a5174e 100644
--- a/ts/features/messages/components/MessageDetail/MessageDetailsHeader.tsx
+++ b/ts/features/messages/components/MessageDetail/MessageDetailsHeader.tsx
@@ -1,15 +1,12 @@
 import { PropsWithChildren } from "react";
 import { StyleSheet, View } from "react-native";
 import { Divider, H3, BodySmall, VSpacer } from "@pagopa/io-app-design-system";
-import { pipe } from "fp-ts/lib/function";
-import * as O from "fp-ts/lib/Option";
-import * as pot from "@pagopa/ts-commons/lib/pot";
 import { ServiceId } from "../../../../../definitions/backend/ServiceId";
 import { localeDateFormat } from "../../../../utils/locale";
 import I18n from "../../../../i18n";
 import { logosForService } from "../../../services/common/utils";
 import { useIOSelector } from "../../../../store/hooks";
-import { serviceByIdPotSelector, serviceByIdSelector } from "../../../services/details/store/reducers";
+import { serviceByIdSelector } from "../../../services/details/store/reducers";
 import { gapBetweenItemsInAGrid } from "../../utils";
 import { UIMessageId } from "../../types";
 import { OrganizationHeader } from "./OrganizationHeader";
diff --git a/ts/features/messages/components/MessageDetail/OrganizationHeader.tsx b/ts/features/messages/components/MessageDetail/OrganizationHeader.tsx
index 8bbe8f16705..d2b260e893f 100644
--- a/ts/features/messages/components/MessageDetail/OrganizationHeader.tsx
+++ b/ts/features/messages/components/MessageDetail/OrganizationHeader.tsx
@@ -3,8 +3,7 @@ import {
   Body,
   IOSpacingScale,
   IOStyles,
-  BodySmall,
-  useIOTheme
+  BodySmall
 } from "@pagopa/io-app-design-system";
 import { useCallback } from "react";
 import { ImageURISource, StyleSheet, View } from "react-native";
@@ -46,7 +45,6 @@ export const OrganizationHeader = ({
   organizationName,
   serviceName
 }: OrganizationHeaderProps) => {
-  const theme = useIOTheme();
   const navigation = useIONavigation();
   const paymentData = useIOSelector(state =>
     messagePaymentDataSelector(state, messageId)
diff --git a/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/MessageDetailsHeader.test.tsx.snap b/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/MessageDetailsHeader.test.tsx.snap
index 06cfaf0682a..a51ff69b73e 100644
--- a/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/MessageDetailsHeader.test.tsx.snap
+++ b/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/MessageDetailsHeader.test.tsx.snap
@@ -453,13 +453,16 @@ exports[`MessageDetailsHeader component should match the snapshot with default p
                             Ċentru tas-Saħħa
                           </Text>
                           <Text
+                            accessibilityRole="link"
                             allowFontScaling={true}
                             dynamicTypeRamp="footnote"
                             maxFontSizeMultiplier={1.5}
                             onPress={[Function]}
                             style={
                               [
-                                {},
+                                {
+                                  "textDecorationLine": "underline",
+                                },
                                 {
                                   "color": "#0B3EE3",
                                   "fontFamily": "Titillio",
diff --git a/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/OrganizationHeader.test.tsx.snap b/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/OrganizationHeader.test.tsx.snap
index 02c0c25b288..c700189be5e 100644
--- a/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/OrganizationHeader.test.tsx.snap
+++ b/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/OrganizationHeader.test.tsx.snap
@@ -372,13 +372,16 @@ exports[`OrganizationHeader component should match the snapshot 1`] = `
                             #### organization_name ####
                           </Text>
                           <Text
+                            accessibilityRole="link"
                             allowFontScaling={true}
                             dynamicTypeRamp="footnote"
                             maxFontSizeMultiplier={1.5}
                             onPress={[Function]}
                             style={
                               [
-                                {},
+                                {
+                                  "textDecorationLine": "underline",
+                                },
                                 {
                                   "color": "#0B3EE3",
                                   "fontFamily": "Titillio",
diff --git a/ts/features/pn/screens/__test__/__snapshots__/MessageDetailsScreen.test.tsx.snap b/ts/features/pn/screens/__test__/__snapshots__/MessageDetailsScreen.test.tsx.snap
index be5c11d04db..5305de4ed5f 100644
--- a/ts/features/pn/screens/__test__/__snapshots__/MessageDetailsScreen.test.tsx.snap
+++ b/ts/features/pn/screens/__test__/__snapshots__/MessageDetailsScreen.test.tsx.snap
@@ -535,13 +535,16 @@ exports[`MessageDetailsScreen should match the snapshot when everything went fin
                                   Ċentru tas-Saħħa
                                 </Text>
                                 <Text
+                                  accessibilityRole="link"
                                   allowFontScaling={true}
                                   dynamicTypeRamp="footnote"
                                   maxFontSizeMultiplier={1.5}
                                   onPress={[Function]}
                                   style={
                                     [
-                                      {},
+                                      {
+                                        "textDecorationLine": "underline",
+                                      },
                                       {
                                         "color": "#0B3EE3",
                                         "fontFamily": "Titillio",

From 2f6dfa51f47d707ca7b7f445c38bbc16f21650bc Mon Sep 17 00:00:00 2001
From: Andrea Piai <andrea.piai@pagopa.it>
Date: Wed, 26 Feb 2025 09:57:48 +0100
Subject: [PATCH 3/3] button role

---
 .../components/MessageDetail/OrganizationHeader.tsx        | 7 +++++--
 .../__snapshots__/MessageDetailsHeader.test.tsx.snap       | 6 ++----
 .../__snapshots__/OrganizationHeader.test.tsx.snap         | 6 ++----
 .../__snapshots__/MessageDetailsScreen.test.tsx.snap       | 6 ++----
 4 files changed, 11 insertions(+), 14 deletions(-)

diff --git a/ts/features/messages/components/MessageDetail/OrganizationHeader.tsx b/ts/features/messages/components/MessageDetail/OrganizationHeader.tsx
index d2b260e893f..500d842582c 100644
--- a/ts/features/messages/components/MessageDetail/OrganizationHeader.tsx
+++ b/ts/features/messages/components/MessageDetail/OrganizationHeader.tsx
@@ -3,7 +3,8 @@ import {
   Body,
   IOSpacingScale,
   IOStyles,
-  BodySmall
+  BodySmall,
+  useIOTheme
 } from "@pagopa/io-app-design-system";
 import { useCallback } from "react";
 import { ImageURISource, StyleSheet, View } from "react-native";
@@ -45,6 +46,7 @@ export const OrganizationHeader = ({
   organizationName,
   serviceName
 }: OrganizationHeaderProps) => {
+  const theme = useIOTheme();
   const navigation = useIONavigation();
   const paymentData = useIOSelector(state =>
     messagePaymentDataSelector(state, messageId)
@@ -66,7 +68,8 @@ export const OrganizationHeader = ({
           {organizationName}
         </Body>
         <BodySmall
-          asLink={true}
+          accessibilityRole="button"
+          color={theme["interactiveElem-default"]}
           onPress={navigateToServiceDetails}
           weight="Semibold"
         >
diff --git a/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/MessageDetailsHeader.test.tsx.snap b/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/MessageDetailsHeader.test.tsx.snap
index a51ff69b73e..0d7488eb073 100644
--- a/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/MessageDetailsHeader.test.tsx.snap
+++ b/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/MessageDetailsHeader.test.tsx.snap
@@ -453,16 +453,14 @@ exports[`MessageDetailsHeader component should match the snapshot with default p
                             Ċentru tas-Saħħa
                           </Text>
                           <Text
-                            accessibilityRole="link"
+                            accessibilityRole="button"
                             allowFontScaling={true}
                             dynamicTypeRamp="footnote"
                             maxFontSizeMultiplier={1.5}
                             onPress={[Function]}
                             style={
                               [
-                                {
-                                  "textDecorationLine": "underline",
-                                },
+                                {},
                                 {
                                   "color": "#0B3EE3",
                                   "fontFamily": "Titillio",
diff --git a/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/OrganizationHeader.test.tsx.snap b/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/OrganizationHeader.test.tsx.snap
index c700189be5e..326d1c6f846 100644
--- a/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/OrganizationHeader.test.tsx.snap
+++ b/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/OrganizationHeader.test.tsx.snap
@@ -372,16 +372,14 @@ exports[`OrganizationHeader component should match the snapshot 1`] = `
                             #### organization_name ####
                           </Text>
                           <Text
-                            accessibilityRole="link"
+                            accessibilityRole="button"
                             allowFontScaling={true}
                             dynamicTypeRamp="footnote"
                             maxFontSizeMultiplier={1.5}
                             onPress={[Function]}
                             style={
                               [
-                                {
-                                  "textDecorationLine": "underline",
-                                },
+                                {},
                                 {
                                   "color": "#0B3EE3",
                                   "fontFamily": "Titillio",
diff --git a/ts/features/pn/screens/__test__/__snapshots__/MessageDetailsScreen.test.tsx.snap b/ts/features/pn/screens/__test__/__snapshots__/MessageDetailsScreen.test.tsx.snap
index 5305de4ed5f..4543a12fd3f 100644
--- a/ts/features/pn/screens/__test__/__snapshots__/MessageDetailsScreen.test.tsx.snap
+++ b/ts/features/pn/screens/__test__/__snapshots__/MessageDetailsScreen.test.tsx.snap
@@ -535,16 +535,14 @@ exports[`MessageDetailsScreen should match the snapshot when everything went fin
                                   Ċentru tas-Saħħa
                                 </Text>
                                 <Text
-                                  accessibilityRole="link"
+                                  accessibilityRole="button"
                                   allowFontScaling={true}
                                   dynamicTypeRamp="footnote"
                                   maxFontSizeMultiplier={1.5}
                                   onPress={[Function]}
                                   style={
                                     [
-                                      {
-                                        "textDecorationLine": "underline",
-                                      },
+                                      {},
                                       {
                                         "color": "#0B3EE3",
                                         "fontFamily": "Titillio",