Skip to content
This repository has been archived by the owner on Aug 13, 2023. It is now read-only.

Radio Schedules - Fix VoiceOver bug with the NEXT card headline #3348

Merged
merged 2 commits into from
Apr 8, 2020
Merged

Radio Schedules - Fix VoiceOver bug with the NEXT card headline #3348

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0aeab84
Add wrapping span with role `text` around the headline
DenisHdz Apr 8, 2020
a636a26
Update PR number
DenisHdz Apr 8, 2020
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
1 change: 1 addition & 0 deletions packages/components/psammead-radio-schedule/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
<!-- prettier-ignore -->
| Version | Description |
|---------|-------------|
| 0.1.0-alpha.33 | [PR#3348](https://github.com/bbc/psammead/pull/3348) Add wrapping span with role `text` around the headline |
| 0.1.0-alpha.32 | [PR#3345](https://github.com/bbc/psammead/pull/3345) Remove border from Program Card |
| 0.1.0-alpha.31 | [PR#3326](https://github.com/bbc/psammead/pull/3326) Update Program Card Heading markup and CSS to fix issue with AT |
| 0.1.0-alpha.30 | [PR#3324](https://github.com/bbc/psammead/pull/3324) Fix Duration border on FireFox High Contrast Mode |
Expand Down
2 changes: 1 addition & 1 deletion packages/components/psammead-radio-schedule/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion packages/components/psammead-radio-schedule/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@bbc/psammead-radio-schedule",
"version": "0.1.0-alpha.32",
"version": "0.1.0-alpha.33",
"main": "dist/index.js",
"module": "esm/index.js",
"sideEffects": false,
Expand Down
173 changes: 99 additions & 74 deletions ...ages/components/psammead-radio-schedule/src/ProgramCard/__snapshots__/index.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -226,34 +226,39 @@ exports[`ProgramCard should render correctly for live 1`] = `
href="/news/articles/cn7k01xp8kxo"
>
<span
class=""
Copy link
Contributor

Choose a reason for hiding this comment

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

Looks great, just wondering if it's fine to have empty classes in snapshots?

Copy link
Contributor Author

@DenisHdz DenisHdz Apr 8, 2020 •
edited
Loading

Choose a reason for hiding this comment

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

I believe that since we don't add styles when declaring that styled component:
const HeadingContentWrapper = styled.span.attrs({ role: 'text' })``;
it leaves the class empty as it doesn't have to target it to apply styles.

It also happens for the DurationTextWrapper.

Copy link
Contributor

Choose a reason for hiding this comment

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

I also wondered why that was there...

role="text"
>
<span
aria-hidden="true"
class="c4"
dir="ltr"
role="text"
>
LIVE
<span
aria-hidden="true"
class="c4"
dir="ltr"
>
LIVE
</span>
<span
class="c5"
lang="en-GB"
>
Live,
</span>
</span>
Could a computer ever create better art than a human?
<span
class="c5"
lang="en-GB"
>
Live,
,
14:54
,
</span>
<span
class="c6 c7"
>
29/01/1990
</span>
</span>
Could a computer ever create better art than a human?
<span
class="c5"
>
,
14:54
,
</span>
<span
class="c6 c7"
>
29/01/1990
</span>
</a>
</h3>
Expand Down Expand Up @@ -515,23 +520,28 @@ exports[`ProgramCard should render correctly for next 1`] = `
class="c2"
>
<span
class="c3"
dir="ltr"
>
NEXT
</span>
Could a computer ever create better art than a human?
<span
class="c4"
>
,
14:54
,
</span>
<span
class="c5 c6"
class=""
role="text"
>
29/01/1990
<span
class="c3"
dir="ltr"
>
NEXT
</span>
Could a computer ever create better art than a human?
<span
class="c4"
>
,
14:54
,
</span>
<span
class="c5 c6"
>
29/01/1990
</span>
</span>
</h3>
<p
Expand Down Expand Up @@ -799,18 +809,23 @@ exports[`ProgramCard should render correctly for onDemand 1`] = `
class="c3"
href="/news/articles/cn7k01xp8kxo"
>
Could a computer ever create better art than a human?
<span
class="c4"
>
,
14:54
,
</span>
<span
class="c5 c6"
class=""
role="text"
>
29/01/1990
Could a computer ever create better art than a human?
<span
class="c4"
>
,
14:54
,
</span>
<span
class="c5 c6"
>
29/01/1990
</span>
</span>
</a>
</h3>
Expand Down Expand Up @@ -1079,18 +1094,23 @@ exports[`ProgramCard should render correctly in RTL 1`] = `
class="c3"
href="/arabic/articles/c1er5mjnznzo"
>
لماذا يخجل البعض من اسم قريته في مصر؟
<span
class="c4"
>
,
١٤:٥٤
,
</span>
<span
class="c5 c6"
class=""
role="text"
>
29/01/1990
لماذا يخجل البعض من اسم قريته في مصر؟
<span
class="c4"
>
,
١٤:٥٤
,
</span>
<span
class="c5 c6"
>
29/01/1990
</span>
</span>
</a>
</h3>
Expand Down Expand Up @@ -1344,34 +1364,39 @@ exports[`ProgramCard should render correctly without summary 1`] = `
href="/news/articles/cn7k01xp8kxo"
>
<span
class=""
role="text"
>
<span
aria-hidden="true"
class="c4"
dir="ltr"
role="text"
>
LIVE
<span
aria-hidden="true"
class="c4"
dir="ltr"
>
LIVE
</span>
<span
class="c5"
lang="en-GB"
>
Live,
</span>
</span>
Could a computer ever create better art than a human?
<span
class="c5"
lang="en-GB"
>
Live,
,
14:54
,
</span>
<span
class="c6 c7"
>
29/01/1990
</span>
</span>
Could a computer ever create better art than a human?
<span
class="c5"
>
,
14:54
,
</span>
<span
class="c6 c7"
>
29/01/1990
</span>
</a>
</h3>
Expand Down
6 changes: 4 additions & 2 deletions packages/components/psammead-radio-schedule/src/ProgramCard/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -143,6 +143,8 @@ const programStateConfig = {
},
};

const HeadingContentWrapper = styled.span.attrs({ role: 'text' })``;

const renderHeaderContent = ({
state,
link,
Expand Down Expand Up @@ -171,7 +173,7 @@ const renderHeaderContent = ({
);

const content = (
<>
<HeadingContentWrapper>
{isLive && (
<LiveLabel
service={service}
Expand All @@ -195,7 +197,7 @@ const renderHeaderContent = ({
>
{episodeTitle}
</TitleWrapper>
</>
</HeadingContentWrapper>
);

return state === 'next' ? (
Expand Down
Loading