[ENG-2975][ENG-3043][ENG-3046][ENG-3049][ENG-3051][ENG-3054][ENG-3057] A11y Best Practice Fixes (#57)

* Remove redundant role="main" in <main>
* Fix order to headings (i.e. <h1>, <h2>, <h3>, etc.)
* Customize heading styles and use them semantically in order

Author: cslzchen

src/main/resources/static/css/cas.css

@@ -48,8 +48,45 @@ a:hover, a:visited, a:active {
     color: var(--cas-theme-primary-light);
 }
 
+h1 {
+    font-size: 1.5em;
+    margin-block-start: 0.83em;
+    margin-block-end: 0.83em;
+}
+
+h2,
+h1.downsize-to-h2 {
+    font-size: 1.17em;
+    margin-block-start: 1em;
+    margin-block-end: 1em;
+}
+
+h3,
+h2.downsize-to-h3 {
+    font-size: 1em;
+    margin-block-start: 1.33em;
+    margin-block-end: 1.33em;
+}
+
+h4,
+h3.downsize-to-h4 {
+    font-size: 0.83em;
+    margin-block-start: 1.67em;
+    margin-block-end: 1.67em;
+}
+
+h5, h6 {
+    font-size: 0.67em;
+    margin-block-start: 2.33em;
+    margin-block-end: 2.33em;
+}
+
 h1, h2, h3, h4, h5, h6 {
+    display: block;
     margin-top: 0;
+    margin-inline-start: 0;
+    margin-inline-end: 0;
+    font-weight: bold;
 }
 
 aside, section, main {

src/main/resources/templates/casAccountDisabledView.html

@@ -24,7 +24,7 @@
                 </section>
                 <hr class="my-4" />
                 <section class="card-message">
-                    <h2 th:utext="#{screen.accountdisabled.heading}"></h2>
+                    <h1 th:utext="#{screen.accountdisabled.heading}"></h1>
                     <p th:utext="#{screen.accountdisabled.message}"></p>
                 </section>
                 <section class="form-button">

src/main/resources/templates/casAccountNotConfirmedIdPView.html

@@ -24,7 +24,7 @@
                 </section>
                 <hr class="my-4" />
                 <section class="card-message">
-                    <h2 th:utext="#{screen.accountnotconfirmedidp.heading}"></h2>
+                    <h1 th:utext="#{screen.accountnotconfirmedidp.heading}"></h1>
                     <p th:utext="#{screen.accountnotconfirmedidp.message}"></p>
                 </section>
                 <section class="form-button">

src/main/resources/templates/casAccountNotConfirmedOsfView.html

@@ -24,7 +24,7 @@
                 </section>
                 <hr class="my-4" />
                 <section class="card-message">
-                    <h2 th:utext="#{screen.accountnotconfirmedosf.heading}"></h2>
+                    <h1 th:utext="#{screen.accountnotconfirmedosf.heading}"></h1>
                     <p th:utext="#{screen.accountnotconfirmedosf.message}"></p>
                 </section>
                 <section class="form-button">

src/main/resources/templates/casGenericSuccessView.html

@@ -24,7 +24,7 @@
                 </section>
                 <hr class="my-4" />
                 <section class="card-message">
-                    <h2 th:utext="#{screen.generic.loginsuccess.heading}"></h2>
+                    <h1 th:utext="#{screen.generic.loginsuccess.heading}"></h1>
                     <div th:utext="#{screen.generic.loginsuccess.message}"></div>
                 </section>
                 <section id="authnAttr" class="pre-formatted-small word-break-all">

src/main/resources/templates/casInstitutionLoginView.html

@@ -31,7 +31,7 @@
                     </section>
 
                     <section class="card-message">
-                        <h2 th:utext="#{screen.institutionlogin.heading}"></h2>
+                        <h1 th:utext="#{screen.institutionlogin.heading}"></h1>
                         <p th:unless=${osfCasLoginContext.institutionId} th:utext="#{screen.institutionlogin.message.select}"></p>
                         <p th:if=${osfCasLoginContext.institutionId} th:utext="#{screen.institutionlogin.message.auto}"></p>
                     </section>

src/main/resources/templates/casInstitutionSsoFailedView.html

@@ -24,7 +24,7 @@
                 </section>
                 <hr class="my-4" />
                 <section class="card-message">
-                    <h2 th:utext="#{screen.institutionssofailed.heading}"></h2>
+                    <h1 th:utext="#{screen.institutionssofailed.heading}"></h1>
                     <p th:utext="#{screen.institutionssofailed.message}"></p>
                 </section>
                 <section class="form-button" th:with="loginUrl=@{${@casServerLoginUrl}(casRedirectSource=cas)}">

src/main/resources/templates/casInvalidUserStatusView.html

@@ -24,7 +24,7 @@
                 </section>
                 <hr class="my-4" />
                 <section class="card-message">
-                    <h2 th:utext="#{screen.invaliduserstatus.heading}"></h2>
+                    <h1 th:utext="#{screen.invaliduserstatus.heading}"></h1>
                     <p th:utext="#{screen.invaliduserstatus.message}"></p>
                 </section>
                 <section class="form-button">

src/main/resources/templates/casInvalidVerificationKeyView.html

@@ -24,7 +24,7 @@
                 </section>
                 <hr class="my-4" />
                 <section class="card-message">
-                    <h2 th:utext="#{screen.invalidverificationkey.heading}"></h2>
+                    <h1 th:utext="#{screen.invalidverificationkey.heading}"></h1>
                     <p th:utext="#{screen.invalidverificationkey.message}"></p>
                 </section>
                 <section class="form-button">

src/main/resources/templates/casLogoutView.html

@@ -24,7 +24,7 @@
                 </section>
                 <hr class="my-4" />
                 <section class="card-message">
-                    <h2 th:utext="#{screen.generic.logoutsuccess.heading}"></h2>
+                    <h1 th:utext="#{screen.generic.logoutsuccess.heading}"></h1>
                     <div th:utext="#{screen.generic.logoutsuccess.message}"></div>
                 </section>
                 <section class="form-button">