[#173726200] Accessibility for message item (#2035)

* [#173726200] improve accessibility for message item * [#173726200] hide message cta for screenreader (android) * [#173726200] add different locales for date formatting Co-authored-by: Matteo Boschi <[email protected]>
pagopa · Jul 14, 2020 · 21047ff · 21047ff
1 parent 632b035
commit 21047ff
Show file tree

Hide file tree

Showing 6 changed files with 79 additions and 7 deletions.
diff --git a/locales/en/index.yml b/locales/en/index.yml
@@ -864,6 +864,14 @@ cardComponent:
   detailsAndTransactions: Details and transactions
   pick: Pay with this method
 messages:
+  accessibility:
+    message:
+      read: "Message"
+      unread: "Unread message"
+      description: "{{newMessage}}, received by {{organizationName}}, {{serviceName}}. {{subject}}. {{receivedAt}}"
+      received_on: "received on"
+      received_at: "received at"
+      date_format: "MMMM Do YYYY"
   contextualHelpTitle: About this section
   contextualHelpContent: !include messages/messages_home.md
   counting:

diff --git a/locales/it/index.yml b/locales/it/index.yml
@@ -893,6 +893,14 @@ cardComponent:
   detailsAndTransactions: Dettagli e transazioni
   pick: Paga con questo metodo
 messages:
+  accessibility:
+    message:
+      read: "Messaggio"
+      unread: "Messaggio non letto"
+      description: "{{newMessage}}, ricevuto da {{organizationName}}, {{serviceName}}. {{subject}}. {{receivedAt}}"
+      received_on: "ricevuto il"
+      received_at: "ricevuto alle ore"
+      date_format: "DD MMMM YYYY"
   contextualHelpTitle: Cosa puoi fare nei tuoi Messaggi
   contextualHelpContent: !include messages/messages_home.md
   counting:

diff --git a/ts/components/DetailedlistItemComponent.tsx b/ts/components/DetailedlistItemComponent.tsx
@@ -1,14 +1,13 @@
 import { Text, View } from "native-base";
 import * as React from "react";
-import { StyleSheet } from "react-native";
-import { Platform } from "react-native";
+import { Platform, StyleSheet } from "react-native";
 import { makeFontStyleObject } from "../theme/fonts";
 import customVariables from "../theme/variables";
 import { BadgeComponent } from "./screens/BadgeComponent";
 import TouchableDefaultOpacity from "./TouchableDefaultOpacity";
 import IconFont from "./ui/IconFont";
 
-type Props = Readonly<{
+type OwnProps = Readonly<{
   text11: string;
   text12: string;
   text2: string;
@@ -20,6 +19,8 @@ type Props = Readonly<{
   isItemSelected?: boolean;
 }>;
 
+type Props = OwnProps & React.ComponentProps<typeof TouchableDefaultOpacity>;
+
 const styles = StyleSheet.create({
   smallSpacer: {
     width: "100%",
@@ -100,6 +101,7 @@ export default class DetailedlistItemComponent extends React.PureComponent<
         onPress={this.props.onPressItem}
         onLongPress={this.props.onLongPressItem}
         style={styles.verticalPad}
+        {...this.props}
       >
         <View style={styles.spaced}>
           <Text small={true} dark={true}>

diff --git a/ts/components/messages/MessageListCTABar.tsx b/ts/components/messages/MessageListCTABar.tsx
@@ -146,7 +146,12 @@ class MessageListCTABar extends React.PureComponent<Props> {
       </>
     );
     return (
-      <View style={[styles.topContainer, this.paid && styles.topContainerPaid]}>
+      <View
+        style={[styles.topContainer, this.paid && styles.topContainerPaid]}
+        accessible={false}
+        accessibilityElementsHidden={true}
+        importantForAccessibility={"no-hide-descendants"}
+      >
         {content}
       </View>
     );

diff --git a/ts/components/messages/MessageListItem.tsx b/ts/components/messages/MessageListItem.tsx
@@ -8,7 +8,10 @@ import { CreatedMessageWithContentAndAttachments } from "../../../definitions/ba
 import { ServicePublic } from "../../../definitions/backend/ServicePublic";
 import I18n from "../../i18n";
 import { PaidReason } from "../../store/reducers/entities/payments";
-import { convertDateToWordDistance } from "../../utils/convertDateToWordDistance";
+import {
+  convertDateToWordDistance,
+  convertReceivedDateToAccessible
+} from "../../utils/convertDateToWordDistance";
 import { hasPrescriptionData, messageNeedsCTABar } from "../../utils/messages";
 import DetailedlistItemComponent from "../DetailedlistItemComponent";
 import MessageListCTABar from "./MessageListCTABar";
@@ -24,6 +27,12 @@ type Props = {
   isSelected: boolean;
 };
 
+type Message = {
+  isRead: boolean;
+  organizationName: string;
+  serviceName: string;
+} & CreatedMessageWithContentAndAttachments;
+
 const UNKNOWN_SERVICE_DATA = {
   organizationName: I18n.t("messages.errorLoading.senderInfo"),
   serviceName: I18n.t("messages.errorLoading.serviceInfo")
@@ -38,6 +47,20 @@ class MessageListItem extends React.PureComponent<Props> {
     this.props.onLongPress(this.props.message.id);
   };
 
+  private announceMessage = (message: Message) => {
+    const newMessage = message.isRead
+      ? I18n.t("messages.accessibility.message.read")
+      : I18n.t("messages.accessibility.message.unread");
+
+    return I18n.t("messages.accessibility.message.description", {
+      newMessage,
+      organizationName: message.organizationName,
+      serviceName: message.serviceName,
+      subject: message.content.subject,
+      receivedAt: convertReceivedDateToAccessible(message.created_at)
+    });
+  };
+
   public render() {
     const {
       isRead,
@@ -69,6 +92,12 @@ class MessageListItem extends React.PureComponent<Props> {
         onLongPressItem={this.handleLongPress}
         isSelectionModeEnabled={isSelectionModeEnabled}
         isItemSelected={isSelected}
+        accessible={true}
+        accessibilityLabel={this.announceMessage({
+          isRead,
+          ...message,
+          ...uiService
+        })}
       >
         {!hasPrescriptionData(message) &&
           messageNeedsCTABar(message) && (

diff --git a/ts/utils/convertDateToWordDistance.ts b/ts/utils/convertDateToWordDistance.ts
@@ -1,5 +1,6 @@
-import { differenceInCalendarDays, format } from "date-fns";
-import { formatDateAsLocal } from "./dates";
+import { differenceInCalendarDays } from "date-fns";
+import I18n from "../i18n";
+import { format, formatDateAsLocal } from "./dates";
 
 /**
  * This function converts the distance from now to date in :
@@ -30,3 +31,22 @@ export function convertDateToWordDistance(
     return formatDateAsLocal(date, true);
   }
 }
+
+/**
+ * Convert a received {@link Date} in an accessible format
+ * @param date
+ */
+export const convertReceivedDateToAccessible = (date: Date) => {
+  const distance = differenceInCalendarDays(new Date(), date);
+  // 0 days, distance < one day
+  if (distance < 1) {
+    return `${I18n.t("messages.accessibility.message.received_at")} ${format(
+      date,
+      "H:mm"
+    )}`;
+  }
+  return `${I18n.t("messages.accessibility.message.received_on")} ${format(
+    date,
+    I18n.t("messages.accessibility.message.date_format")
+  )}`;
+};