Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[#359] Added visually hidden text to read out on back-to-top button. #391

Merged
merged 1 commit into from
Oct 1, 2024
Merged

[#359] Added visually hidden text to read out on back-to-top button. #391

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
33 changes: 21 additions & 12 deletions components/02-molecules/back-to-top/__snapshots__/back-to-top.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,12 @@ exports[`Back to Top Component button contains correct icon 1`] = `
href="#top"
role="button"
>



<span
class="ct-visually-hidden"
>
Return focus to the top of the page
</span>



Expand All @@ -46,8 +50,7 @@ exports[`Back to Top Component button contains correct icon 1`] = `
</svg>





</a>


Expand Down Expand Up @@ -78,8 +81,12 @@ exports[`Back to Top Component renders button with correct attributes 1`] = `
href="#top"
role="button"
>



<span
class="ct-visually-hidden"
>
Return focus to the top of the page
</span>



Expand All @@ -103,8 +110,7 @@ exports[`Back to Top Component renders button with correct attributes 1`] = `
</svg>





</a>


Expand Down Expand Up @@ -135,8 +141,12 @@ exports[`Back to Top Component renders correctly 1`] = `
href="#top"
role="button"
>



<span
class="ct-visually-hidden"
>
Return focus to the top of the page
</span>



Expand All @@ -160,8 +170,7 @@ exports[`Back to Top Component renders correctly 1`] = `
</svg>





</a>


Expand Down
3 changes: 2 additions & 1 deletion components/02-molecules/back-to-top/back-to-top.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,8 @@
type: 'primary',
icon: 'up-arrow',
url: '#top',
title: 'Return focus to the top of the page',
text: '<span class="ct-visually-hidden">Return focus to the top of the page</span>',
allow_html: true,
modifier_class: 'ct-back-to-top__button',
} only %}
</div>
104 changes: 64 additions & 40 deletions components/04-templates/page/__snapshots__/page.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -585,9 +585,13 @@ exports[`Page Component renders all blocks with complex attributes and classes 1
href="#top"
role="button"
>




<span
class="ct-visually-hidden"
>
Return focus to the top of the page
</span>




Expand All @@ -610,8 +614,7 @@ exports[`Page Component renders all blocks with complex attributes and classes 1
</svg>





</a>


Expand Down Expand Up @@ -748,9 +751,13 @@ exports[`Page Component renders content block with permutations: {
href="#top"
role="button"
>




<span
class="ct-visually-hidden"
>
Return focus to the top of the page
</span>




Expand All @@ -773,8 +780,7 @@ exports[`Page Component renders content block with permutations: {
</svg>





</a>


Expand Down Expand Up @@ -897,9 +903,13 @@ exports[`Page Component renders content block with permutations: {
href="#top"
role="button"
>




<span
class="ct-visually-hidden"
>
Return focus to the top of the page
</span>




Expand All @@ -922,8 +932,7 @@ exports[`Page Component renders content block with permutations: {
</svg>





</a>


Expand Down Expand Up @@ -1046,9 +1055,13 @@ exports[`Page Component renders content block with permutations: {
href="#top"
role="button"
>




<span
class="ct-visually-hidden"
>
Return focus to the top of the page
</span>




Expand All @@ -1071,8 +1084,7 @@ exports[`Page Component renders content block with permutations: {
</svg>





</a>


Expand Down Expand Up @@ -1181,9 +1193,13 @@ exports[`Page Component renders content block with permutations: {
href="#top"
role="button"
>




<span
class="ct-visually-hidden"
>
Return focus to the top of the page
</span>




Expand All @@ -1206,8 +1222,7 @@ exports[`Page Component renders content block with permutations: {
</svg>





</a>


Expand Down Expand Up @@ -1279,9 +1294,13 @@ exports[`Page Component renders with custom theme and attributes 1`] = `
href="#top"
role="button"
>




<span
class="ct-visually-hidden"
>
Return focus to the top of the page
</span>




Expand All @@ -1304,8 +1323,7 @@ exports[`Page Component renders with custom theme and attributes 1`] = `
</svg>





</a>


Expand Down Expand Up @@ -1376,9 +1394,13 @@ exports[`Page Component renders with default values 1`] = `
href="#top"
role="button"
>




<span
class="ct-visually-hidden"
>
Return focus to the top of the page
</span>




Expand All @@ -1401,8 +1423,7 @@ exports[`Page Component renders with default values 1`] = `
</svg>





</a>


Expand Down Expand Up @@ -1474,9 +1495,13 @@ exports[`Page Component strips HTML tags from attributes 1`] = `
href="#top"
role="button"
>




<span
class="ct-visually-hidden"
>
Return focus to the top of the page
</span>




Expand All @@ -1499,8 +1524,7 @@ exports[`Page Component strips HTML tags from attributes 1`] = `
</svg>





</a>


Expand Down