Skip to content

Commit

Permalink
fix: [IOBP-243] Fix TransactionList a11y (#5128)
Browse files Browse the repository at this point in the history
## Short description
This PR fixes an accessibility issue in `TransactionList` elements,
which caused iOS VoiceOver to read the time and amount as a single
string.

## List of changes proposed in this pull request
- added `accessibilityLabel` to `ListItemTransaction` items

## How to test
With VoiceOver turned on, go to the transaction list on the wallet
screen and check that the amount is read correctly.

Co-authored-by: Martino Cesari Tomba <60693085+forrest57@users.noreply.github.com>
  • Loading branch information
mastro993 and forrest57 authored Oct 17, 2023
1 parent a695707 commit 6fc0866
Showing 1 changed file with 13 additions and 2 deletions.
15 changes: 13 additions & 2 deletions ts/components/wallet/TransactionsList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import { H3 } from "../core/typography/H3";
import { IOVisualCostants } from "../core/variables/IOStyles";
import { EdgeBorderComponent } from "../screens/EdgeBorderComponent";
import BoxedRefreshIndicator from "../ui/BoxedRefreshIndicator";
import { getAccessibleAmountText } from "../../utils/accessibility";

type Props = Readonly<{
title: string;
Expand Down Expand Up @@ -110,15 +111,25 @@ export const TransactionsList = (props: Props) => {
const item = info.item;
const recipient = item.merchant;

const amount = formatNumberCurrencyCents(item.amount.amount);
const amountText = formatNumberCurrencyCents(item.amount.amount);
const datetime: string = format(item.created, "DD MMM YYYY, HH:mm");

const accessibleDatetime: string = format(
item.created,
"DD MMMM YYYY, HH:mm"
);
const accessibleAmountText = getAccessibleAmountText(amountText);
const accessibilityLabel = `${recipient}; ${accessibleDatetime}; ${accessibleAmountText}`;

return (
<ListItemTransaction
title={recipient}
subtitle={datetime}
onPress={() => props.navigateToTransactionDetails(item)}
transactionStatus="success"
transactionAmount={amount}
transactionAmount={amountText}
accessible={true}
accessibilityLabel={accessibilityLabel}
/>
);
};
Expand Down

0 comments on commit 6fc0866

Please sign in to comment.