Fix a11y for contacts page - PN-12920 #1369
Conversation
leleOFA
requested review from
ZorbaDimatteo,
AndreaCimini90 and
a team
as code owners
| @@ -50,6 +50,7 @@ const TitleBox: React.FC<Props> = ({ | |||
| variant={variantTitle} | |||
| display="inline-block" | |||
| sx={{ verticalAlign: 'middle' }} | |||
| aria-label={`${title}-page`} | |||
There was a problem hiding this comment.
aria-labels on typography are wrongs, because the screen reader reads the text twice. Maybe the problem is on the typography variant
There was a problem hiding this comment.
in the windows os screen reader not read without that
There was a problem hiding this comment.
mmm it is not the correct way to fix the bug
| {getIcon()} | ||
| <Typography | ||
| variant="body2" | ||
| fontWeight={600} | ||
| data-testid="cardTitle" | ||
| aria-hidden |
There was a problem hiding this comment.
this should not be removed. why did you remove it?
There was a problem hiding this comment.
on windows the card are not read
There was a problem hiding this comment.
I tried with windows and also with aria-hidden it was read
There was a problem hiding this comment.
we have to understand how to fix the problem. The card is a button so, when user goes on the card, the screen reader should read the content (i.e. the title and the subititle). The aria-hidden is to avoid that screen reader reads the content twice
There was a problem hiding this comment.
with aria-hidden the text 'A valore legale' and 'Di cortesia' are not read by windows voice assistant.
| sx={{ mt: 0.5, mb: 1 }} | ||
| > | ||
| {t(title)} | ||
| </Typography> | ||
| <Typography | ||
| variant="body2" | ||
| data-testid="cardDescription" | ||
| aria-hidden |
| preloadedState: { userState: { user: userResponse } }, | ||
| }); | ||
| const title = getByRole('heading', { name: 'title' }); |
There was a problem hiding this comment.
test failure with that role
There was a problem hiding this comment.
it is strange, this should not happen
There was a problem hiding this comment.
Why did you use tabIndex in all this files? TabIndex should be used only on interactive element (read https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex#accessibility_concerns). So they should be removed
| {getIcon()} | ||
| <Typography | ||
| variant="body2" | ||
| fontWeight={600} | ||
| data-testid="cardTitle" | ||
| aria-hidden |
There was a problem hiding this comment.
we have to understand how to fix the problem. The card is a button so, when user goes on the card, the screen reader should read the content (i.e. the title and the subititle). The aria-hidden is to avoid that screen reader reads the content twice
Short description
fix a11y in ContactSummaryCard and TitleBoxComponent of contacts page for windows assistent
List of changes proposed in this pull request
How to test
with voiceOver/ Narrator navigate in previous component cited