Skip to content

Commit

Permalink
Merge pull request #9598 from bbc/a11y-storypromo-nested-span
Browse files Browse the repository at this point in the history 
Fix TalkBack incorrectly reading out spans on StoryPromo content
  • Loading branch information
@nicola-d-bbc
nicola-d-bbc committed Nov 30, 2021
2 parents 4d225d3 + 37b1f5c commit 0230801
Show file tree
Hide file tree
Showing 20 changed files with 880 additions and 136 deletions.
21 changes: 18 additions & 3 deletions src/app/containers/CpsFeaturesAnalysis/__snapshots__/index.test.jsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -696,10 +696,15 @@ exports[`CpsRelatedContent should render Story Feature components when given app
class="emotion-37 emotion-38"
>
<a
aria-labelledby="promo-link-unlabelledafirika23252735"
class="emotion-39 emotion-40"
href="/igbo/afirika-23252735"
>
STY - Ọrụ bekee na ịrụrụ onwe gị ọrụ, kedụ nk?
<span
id="promo-link-unlabelledafirika23252735"
>
STY - Ọrụ bekee na ịrụrụ onwe gị ọrụ, kedụ nk?
</span>
</a>
</h3>
<time
Expand Down Expand Up @@ -751,10 +756,15 @@ exports[`CpsRelatedContent should render Story Feature components when given app
class="emotion-37 emotion-38"
>
<a
aria-labelledby="promo-link-unlabelledafirika49666505"
class="emotion-39 emotion-40"
href="/igbo/afirika-49666505"
>
Robert Mugabe: Zimbabwe eferela nwa amadi a aka
<span
id="promo-link-unlabelledafirika49666505"
>
Robert Mugabe: Zimbabwe eferela nwa amadi a aka
</span>
</a>
</h3>
<time
Expand Down Expand Up @@ -1470,10 +1480,15 @@ exports[`CpsRelatedContent should render Story Promo components without <ul> whe
class="emotion-35 emotion-36"
>
<a
aria-labelledby="promo-link-unlabelledafirika23252735"
class="emotion-37 emotion-38"
href="/igbo/afirika-23252735"
>
STY - Ọrụ bekee na ịrụrụ onwe gị ọrụ, kedụ nk?
<span
id="promo-link-unlabelledafirika23252735"
>
STY - Ọrụ bekee na ịrụrụ onwe gị ọrụ, kedụ nk?
</span>
</a>
</h3>
<p
Expand Down
2 changes: 2 additions & 0 deletions src/app/containers/CpsRelatedContent/RelatedContentPromo/__snapshots__/index.test.jsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -351,10 +351,12 @@ exports[`RelatedContentPromo it renders a Story Promo wrapped in a Grid componen
class="emotion-14 emotion-15"
>
<a
aria-labelledby="promo-link-unlabelled44508901"
class="emotion-16 emotion-17"
href="/pidgin/44508901"
>
<span
id="promo-link-unlabelled44508901"
role="text"
>
<span>
Expand Down
32 changes: 28 additions & 4 deletions ...pp/containers/CpsRelatedContent/RelatedContentPromoList/__snapshots__/index.test.jsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -427,10 +427,12 @@ exports[`RelatedContentPromoList it renders a list of Story Promos for MAP pages
class="emotion-19 emotion-20"
>
<a
aria-labelledby="promo-link-rel-content44508901"
class="emotion-21 emotion-22"
href="/pidgin/44508901"
>
<span
id="promo-link-rel-content44508901"
role="text"
>
<span>
Expand Down Expand Up @@ -489,10 +491,15 @@ exports[`RelatedContentPromoList it renders a list of Story Promos for MAP pages
class="emotion-19 emotion-20"
>
<a
aria-labelledby="promo-link-rel-contenttori46975713"
class="emotion-21 emotion-22"
href="/pidgin/tori-46975713"
>
How light companies dey use estimated billing show Nigerians pepper
<span
id="promo-link-rel-contenttori46975713"
>
How light companies dey use estimated billing show Nigerians pepper
</span>
</a>
</h3>
<time
Expand Down Expand Up @@ -545,10 +552,15 @@ exports[`RelatedContentPromoList it renders a list of Story Promos for MAP pages
class="emotion-19 emotion-20"
>
<a
aria-labelledby="promo-link-rel-contenttori42494678"
class="emotion-21 emotion-22"
href="/pidgin/tori-42494678"
>
Nigeria: Wetin 5,222 megawatts electric fit do?
<span
id="promo-link-rel-contenttori42494678"
>
Nigeria: Wetin 5,222 megawatts electric fit do?
</span>
</a>
</h3>
<time
Expand Down Expand Up @@ -977,10 +989,12 @@ exports[`RelatedContentPromoList it renders a list of Story Promos for STY pages
class="emotion-18 emotion-19"
>
<a
aria-labelledby="promo-link-rel-content44508901"
class="emotion-20 emotion-21"
href="/pidgin/44508901"
>
<span
id="promo-link-rel-content44508901"
role="text"
>
<span>
Expand Down Expand Up @@ -1039,10 +1053,15 @@ exports[`RelatedContentPromoList it renders a list of Story Promos for STY pages
class="emotion-18 emotion-19"
>
<a
aria-labelledby="promo-link-rel-contenttori46975713"
class="emotion-20 emotion-21"
href="/pidgin/tori-46975713"
>
How light companies dey use estimated billing show Nigerians pepper
<span
id="promo-link-rel-contenttori46975713"
>
How light companies dey use estimated billing show Nigerians pepper
</span>
</a>
</h3>
<time
Expand Down Expand Up @@ -1095,10 +1114,15 @@ exports[`RelatedContentPromoList it renders a list of Story Promos for STY pages
class="emotion-18 emotion-19"
>
<a
aria-labelledby="promo-link-rel-contenttori42494678"
class="emotion-20 emotion-21"
href="/pidgin/tori-42494678"
>
Nigeria: Wetin 5,222 megawatts electric fit do?
<span
id="promo-link-rel-contenttori42494678"
>
Nigeria: Wetin 5,222 megawatts electric fit do?
</span>
</a>
</h3>
<time
Expand Down
1 change: 1 addition & 0 deletions src/app/containers/CpsRelatedContent/RelatedContentPromoList/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,7 @@ const RelatedContentPromoList = ({
displaySummary={false}
isSingleColumnLayout={isMediaContent}
eventTrackingData={eventTrackingData}
labelId="rel-content"
/>
</Grid>
))}
Expand Down
18 changes: 16 additions & 2 deletions src/app/containers/CpsRelatedContent/__snapshots__/index.test.jsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -805,10 +805,12 @@ exports[`CpsRelatedContent should render Story Promo components when given appro
class="emotion-39 emotion-40"
>
<a
aria-labelledby="promo-link-rel-content44508901"
class="emotion-41 emotion-42"
href="/pidgin/44508901"
>
<span
id="promo-link-rel-content44508901"
role="text"
>
<span>
Expand Down Expand Up @@ -867,10 +869,15 @@ exports[`CpsRelatedContent should render Story Promo components when given appro
class="emotion-39 emotion-40"
>
<a
aria-labelledby="promo-link-rel-contenttori46975713"
class="emotion-41 emotion-42"
href="/pidgin/tori-46975713"
>
How light companies dey use estimated billing show Nigerians pepper
<span
id="promo-link-rel-contenttori46975713"
>
How light companies dey use estimated billing show Nigerians pepper
</span>
</a>
</h3>
<time
Expand Down Expand Up @@ -923,10 +930,15 @@ exports[`CpsRelatedContent should render Story Promo components when given appro
class="emotion-39 emotion-40"
>
<a
aria-labelledby="promo-link-rel-contenttori42494678"
class="emotion-41 emotion-42"
href="/pidgin/tori-42494678"
>
Nigeria: Wetin 5,222 megawatts electric fit do?
<span
id="promo-link-rel-contenttori42494678"
>
Nigeria: Wetin 5,222 megawatts electric fit do?
</span>
</a>
</h3>
<time
Expand Down Expand Up @@ -1702,10 +1714,12 @@ exports[`CpsRelatedContent should render Story Promo components without <ul> whe
class="emotion-37 emotion-38"
>
<a
aria-labelledby="promo-link-unlabelled44508901"
class="emotion-39 emotion-40"
href="/pidgin/44508901"
>
<span
id="promo-link-unlabelled44508901"
role="text"
>
<span>
Expand Down
21 changes: 18 additions & 3 deletions src/app/containers/CpsTopStories/__snapshots__/index.test.jsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -615,10 +615,15 @@ exports[`CpsRelatedContent should render Top Stories components when given appro
class="emotion-29 emotion-30"
>
<a
aria-labelledby="promo-link-unlabellednoticiasinternacional51939501"
class="emotion-31 emotion-32"
href="/mundo/noticias-internacional-51939501"
>
China dice tener una vacuna contra el nuevo coronavirus lista para pruebas en humanos
<span
id="promo-link-unlabellednoticiasinternacional51939501"
>
China dice tener una vacuna contra el nuevo coronavirus lista para pruebas en humanos
</span>
</a>
</h3>
<time
Expand All @@ -645,10 +650,15 @@ exports[`CpsRelatedContent should render Top Stories components when given appro
class="emotion-29 emotion-30"
>
<a
aria-labelledby="promo-link-unlabelledtori51945757"
class="emotion-31 emotion-32"
href="/pidgin/tori-51945757"
>
Nigeria don get five new cases of Coronavirus - See how e happun
<span
id="promo-link-unlabelledtori51945757"
>
Nigeria don get five new cases of Coronavirus - See how e happun
</span>
</a>
</h3>
<time
Expand Down Expand Up @@ -1244,10 +1254,15 @@ exports[`CpsRelatedContent should render Top Stories components when without <ul
class="emotion-27 emotion-28"
>
<a
aria-labelledby="promo-link-unlabellednoticiasinternacional51939501"
class="emotion-29 emotion-30"
href="/mundo/noticias-internacional-51939501"
>
China dice tener una vacuna contra el nuevo coronavirus lista para pruebas en humanos
<span
id="promo-link-unlabellednoticiasinternacional51939501"
>
China dice tener una vacuna contra el nuevo coronavirus lista para pruebas en humanos
</span>
</a>
</h3>
<time
Expand Down

0 comments on commit 0230801

Please sign in to comment.