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 <[email protected]>
RoronoaSrinu · May 5, 2023 · 22293c4 · 22293c4
1 parent 1f2e834
commit 22293c4
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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