diff --git a/public/theme/boost/scss/moodle/core.scss b/public/theme/boost/scss/moodle/core.scss index bc3600a9c80..bca51eabea6 100644 --- a/public/theme/boost/scss/moodle/core.scss +++ b/public/theme/boost/scss/moodle/core.scss @@ -2054,6 +2054,11 @@ $footer-link-color: $bg-inverse-link-color !default; .popover-body { padding: 0; .footer-section { + // Add a bottom padding to the direct child divs of the footer-section container so the links within will meet SC 2.5.8. + > div { + padding-bottom: 0.2rem; + } + a { color: $body-color; text-decoration: underline; @@ -2072,6 +2077,13 @@ $footer-link-color: $bg-inverse-link-color !default; padding-bottom: 5px; } +.footer-content-popover { + // Ensure that the footer links when rendered out of the popover will also have sufficient spacing and meet SC 2.5.8. + .footer-section > div { + padding-bottom: 0.1rem; + } +} + @include media-breakpoint-up(sm) { .jsenabled #page-footer .footer-content-popover { display: none; diff --git a/public/theme/boost/style/moodle.css b/public/theme/boost/style/moodle.css index cada2fbfedd..10cd0a3b291 100644 --- a/public/theme/boost/style/moodle.css +++ b/public/theme/boost/style/moodle.css @@ -27611,6 +27611,9 @@ dd:after { .popover.footer .popover-body { padding: 0; } +.popover.footer .popover-body .footer-section > div { + padding-bottom: 0.2rem; +} .popover.footer .popover-body .footer-section a { color: #1d2125; text-decoration: underline; @@ -27626,6 +27629,10 @@ dd:after { padding-bottom: 5px; } +.footer-content-popover .footer-section > div { + padding-bottom: 0.1rem; +} + @media (min-width: 576px) { .jsenabled #page-footer .footer-content-popover { display: none; diff --git a/public/theme/boost/tests/behat/help_popover.feature b/public/theme/boost/tests/behat/help_popover.feature new file mode 100644 index 00000000000..5c1ca601bfe --- /dev/null +++ b/public/theme/boost/tests/behat/help_popover.feature @@ -0,0 +1,19 @@ +@theme_boost +Feature: Using the help popover + As a user who wants to use the help popover + The help popover must be accessible + + Background: + Given the following config values are set as admin: + | sitepolicyhandler | tool_policy | + And the following policies exist: + | Name | Revision | Content | Summary | Status | + | This site policy | | full text2 | short text2 | active | + + @javascript @accessibility + Scenario: Checking the policies link in the footer popover + Given I am on site homepage + And I click on "Continue" "link" + When I click on "Show footer" "button" in the "page-footer" "region" + Then I should see "Policies" in the "page-footer" "region" + And the page should meet accessibility standards with "best-practice" extra tests diff --git a/public/theme/classic/style/moodle.css b/public/theme/classic/style/moodle.css index a9aeae78db5..a4b842d72e8 100644 --- a/public/theme/classic/style/moodle.css +++ b/public/theme/classic/style/moodle.css @@ -27611,6 +27611,9 @@ dd:after { .popover.footer .popover-body { padding: 0; } +.popover.footer .popover-body .footer-section > div { + padding-bottom: 0.2rem; +} .popover.footer .popover-body .footer-section a { color: #1d2125; text-decoration: underline; @@ -27626,6 +27629,10 @@ dd:after { padding-bottom: 5px; } +.footer-content-popover .footer-section > div { + padding-bottom: 0.1rem; +} + @media (min-width: 576px) { .jsenabled #page-footer .footer-content-popover { display: none;