From 22293c457dde2ab4bd13bee47e613d191f22e588 Mon Sep 17 00:00:00 2001 From: Piyush Jindal Date: Fri, 5 May 2023 10:11:12 +0530 Subject: [PATCH] issue-219 Changes to enhance Accessibility (#224) * issue-219 h5 changed to h4 * issue-219 CSS changes * issue-219 draft path changed to actual --------- Co-authored-by: piyushjindal --- blocks/cards/cards.css | 14 +++++++++++++- blocks/cards/cards.less | 15 ++++++++++++++- blocks/footer/footer.css | 11 +++++++++++ blocks/footer/footer.less | 9 +++++++-- 4 files changed, 45 insertions(+), 4 deletions(-) diff --git a/blocks/cards/cards.css b/blocks/cards/cards.css index f729c3b..497543d 100644 --- a/blocks/cards/cards.css +++ b/blocks/cards/cards.css @@ -243,6 +243,12 @@ .home-services.cards-container .cards .cards-body > h3 + p { flex-grow: 1; } +.home-services.cards-container .cards .cards-body h2 { + margin-left: 14px; + margin-right: 14px; + font-size: 18px; + line-height: 24px; +} /* personal nedbank */ .personal-nedbank.cards-container { padding-top: 60px; @@ -525,11 +531,17 @@ min-width: 180px; max-width: 225px; } - .home-services.cards-container .cards .cards-body h3 + p { + .home-services.cards-container .cards .cards-body h3 + p, + .home-services.cards-container .cards .cards-body h2 + p { font-size: 16px; line-height: 24px; margin: 8px 0 24px 0; } + .home-services.cards-container .cards .cards-body h2 { + font-size: 22px; + margin: 24px 0 0 0; + line-height: 28px; + } .home-promotions.cards-container .cards.large > ul { justify-content: space-evenly; } diff --git a/blocks/cards/cards.less b/blocks/cards/cards.less index 2a590ef..b2c8869 100644 --- a/blocks/cards/cards.less +++ b/blocks/cards/cards.less @@ -307,6 +307,13 @@ autocomment(); flex-grow: 1; } } + + h2 { + margin-left: 14px; + margin-right: 14px; + font-size: @font-size-medium; + line-height: 24px; + } } } } @@ -710,13 +717,19 @@ autocomment(); } .cards-body { - h3 { + h3, h2 { +p { font-size: 16px; line-height: 24px; margin: 8px 0 24px 0; } } + + h2 { + font-size: 22px; + margin: 24px 0 0 0; + line-height: 28px; + } } } } diff --git a/blocks/footer/footer.css b/blocks/footer/footer.css index abefbb2..4f4bfd9 100644 --- a/blocks/footer/footer.css +++ b/blocks/footer/footer.css @@ -7,9 +7,13 @@ footer .section { footer .section p, footer .section ul, footer .section h2, +footer .section h3, footer .section h5 { padding-left: 20px; } +footer .section h3 { + font-size: 18px; +} footer .footer-social h2 { padding-left: 20px; } @@ -50,18 +54,22 @@ footer .footer-link-groups { justify-content: center; flex-direction: column; } +footer .footer-link-group h3, footer .footer-link-group h5 { border-bottom: 1px solid #e5edec; margin: unset; padding: 20px 0 20px 20px; } +footer .footer-link-group h3 > span.icon, footer .footer-link-group h5 > span.icon { float: right; padding-right: 20px; } +footer .footer-link-group h3 > span.icon.icon, footer .footer-link-group h5 > span.icon.icon { display: none; } +footer .footer-link-group h3 > span.icon.icon.appear, footer .footer-link-group h5 > span.icon.icon.appear { display: block; } @@ -131,13 +139,16 @@ footer div.footer-social { padding-left: 20px; margin-bottom: 48px; } + footer .footer-links .footer-link-groups .footer-link-group h3, footer .footer-links .footer-link-groups .footer-link-group h5 { border: none; padding: 56px 0 0; } + footer .footer-links .footer-link-groups .footer-link-group h3 > span.icon, footer .footer-links .footer-link-groups .footer-link-group h5 > span.icon { display: none; } + footer .footer-links .footer-link-groups .footer-link-group h3 > span.icon.appear, footer .footer-links .footer-link-groups .footer-link-group h5 > span.icon.appear { display: none; } diff --git a/blocks/footer/footer.less b/blocks/footer/footer.less index c4c41ad..fb957cf 100644 --- a/blocks/footer/footer.less +++ b/blocks/footer/footer.less @@ -9,9 +9,14 @@ footer { p, ul, h2, + h3, h5 { padding-left: 20px; } + + h3 { + font-size: @font-size-medium; + } } .footer-social h2 { @@ -67,7 +72,7 @@ footer { } .footer-link-group { - h5 { + h3, h5 { border-bottom: 1px solid #e5edec; margin: unset; padding: 20px 0 20px 20px; @@ -175,7 +180,7 @@ footer { padding-left: 20px; margin-bottom: @spacing-09; - h5 { + h3, h5 { border: none; padding: 56px 0 0; //Do not display up and down arrow icons at all for wide screens