MID-9273 - Fixed registration bug; Added wcag contrast ratio fix; sol…

…ving wcag login page issues
Evolveum · Nov 8, 2023 · d5a5ffd · d5a5ffd
1 parent bb0a17d
commit d5a5ffd
Show file tree

Hide file tree

Showing 10 changed files with 41 additions and 18 deletions.
diff --git a/gui/admin-gui/src/frontend/scss/_admin-lte-overrides.scss b/gui/admin-gui/src/frontend/scss/_admin-lte-overrides.scss
@@ -48,8 +48,15 @@
 .login-box-msg,
 .register-box-msg {
   padding: 0 20px 10px;
+  font-size:1.5rem;
 }
 
 .popover {
   z-index:1040;
 }
+
+//:focus pseudo attribute fix for accessibility intentions
+.btn-default:focus {
+  background-color: #e9ecef;
+  color: #2b2b2b;
+}
diff --git a/gui/admin-gui/src/frontend/scss/_bootstrap-variables.scss b/gui/admin-gui/src/frontend/scss/_bootstrap-variables.scss
@@ -7,7 +7,7 @@
 
 // taken from adminlte and bootstrap, also based on figma
 $gray-700: #495057 !default;
-$lightblue: #3c8dbc !default;
+$lightblue: #206F9D !default; //#3c8dbc - primary color //#357DA7 //#307197 - acceptable //#1070A8 - cool saturated lightblue
 
 $midpoint-secondary: #818D98 !default;
 

diff --git a/gui/admin-gui/src/frontend/scss/midpoint.scss b/gui/admin-gui/src/frontend/scss/midpoint.scss
@@ -556,6 +556,7 @@ li.dropdown.user.user-menu {
 
     & > .card-header {
       border-bottom-right-radius: valid-radius($border-radius);
+      border-bottom-left-radius: valid-radius($border-radius);
     }
   }
 
@@ -1958,7 +1959,21 @@ th.debug-list-buttons {
 .details-menu a,
 .details-menu a:hover,
 .nav-sidebar .nav-item > .nav-link,
-.nav-sidebar .nav-item > .nav-link:hover
+.nav-sidebar .nav-item > .nav-link:hover,
+div > a > div > i.fas
 {
   @include smooth-transition(0.08s);
 }
+
+//Accessibility classes and overrides
+.btn:focus-visible, a:focus-visible, div[role="button"]:focus-visible, button:focus-visible, div[role="option"].simple-tile:focus:visible{
+  outline: 2px orange;
+  outline-style: auto;
+  border-radius: 1px;
+  outline-offset: 2px;
+  @include smooth-transition(0.08s);
+}
+div.show > a > div > i.fas {
+  rotate: -90deg;
+  @include smooth-transition(0.08s);
+}
diff --git a/gui/admin-gui/src/main/java/com/evolveum/midpoint/gui/api/GuiStyleConstants.java b/gui/admin-gui/src/main/java/com/evolveum/midpoint/gui/api/GuiStyleConstants.java
@@ -177,7 +177,7 @@ public class GuiStyleConstants {
     public static final String CLASS_BADGE_ACTIVE = "badge-primary";
     public static final String CLASS_BADGE_PASSIVE = "badge-secondary";
 
-    public static final String DEFAULT_BG_COLOR = "#3c8dbc"; //blue-light theme
+    public static final String DEFAULT_BG_COLOR = "#357DA7"; //blue-light theme
 
     public static final String CLASS_PLUS_CIRCLE = "fa fa-plus-circle";
     public static final String CLASS_PLUS_CIRCLE_SUCCESS = CLASS_PLUS_CIRCLE + " text-success";

diff --git a/gui/admin-gui/src/main/java/com/evolveum/midpoint/gui/api/component/result/MessagePanel.html b/gui/admin-gui/src/main/java/com/evolveum/midpoint/gui/api/component/result/MessagePanel.html
@@ -7,14 +7,14 @@
 <html xmlns:wicket="http://wicket.apache.org">
 <body>
 <wicket:panel>
-    <div class="feedback-message card" wicket:id="detailsBox">
-        <div class="card-header">
-            <h3 class="card-title">
+    <div aria-labelledby="message" class="feedback-message card" wicket:id="detailsBox">
+        <div class="card-header" role="alert" aria-atomic="true">
+            <h3 class="card-title" id="message">
                 <i class="mr-2 fa " wicket:id="iconType"></i>
                 <span class="card-title" wicket:id="message"/>
             </h3>
             <div class="card-tools">
-                <div wicket:id="close" data-widget="remove" class="btn btn-tool">
+                <div wicket:id="close" role="button" tabindex="0" data-widget="remove" class="btn btn-tool">
                     <i class="fa fa-times"/>
                 </div>
             </div>

diff --git a/gui/admin-gui/src/main/java/com/evolveum/midpoint/gui/impl/page/login/AbstractPageLogin.html b/gui/admin-gui/src/main/java/com/evolveum/midpoint/gui/impl/page/login/AbstractPageLogin.html
@@ -16,14 +16,14 @@
     </div>
 
 
-    <div class="login-box">
+    <div class="login-box" role="main" aria-labelledby="panelTitle">
         <div class="card card-primary">
             <div class="card-header text-center">
                 <h1>midPoint</h1>
                 <p wicket:id="sequence"/>
             </div>
             <div class="card-body login-card-body justify-content-between">
-                <h4 class="login-box-msg" wicket:id="panelTitle"></h4>
+                <h2 class="login-box-msg" wicket:id="panelTitle" id="panelTitle"></h2>
                 <p class="login-panel-description text-center" wicket:id="panelDescription"></p>
 
                 <wicket:child/>

diff --git a/gui/admin-gui/src/main/java/com/evolveum/midpoint/gui/impl/page/login/PageAbstractFlow.html b/gui/admin-gui/src/main/java/com/evolveum/midpoint/gui/impl/page/login/PageAbstractFlow.html
@@ -12,7 +12,7 @@
 <wicket:extend>
     <form wicket:id="mainForm">
         <div wicket:id="contentArea"></div>
-        <input wicket:id="submitRegistration" class="btn btn-primary login-panel-control mt-4" wicket:message="value:PageSelfRegistration.register"/>
+        <button wicket:id="submitRegistration" class="btn btn-primary login-panel-control mt-4" wicket:message="value:PageSelfRegistration.register"/>
     </form>
     <wicket:child/>
 </wicket:extend>

diff --git a/...rc/main/java/com/evolveum/midpoint/gui/impl/page/login/module/PageArchetypeSelection.html b/...rc/main/java/com/evolveum/midpoint/gui/impl/page/login/module/PageArchetypeSelection.html
@@ -15,9 +15,9 @@
         <div wicket:id="csrfField"/>
         <input type="hidden" wicket:id="archetypeOid"/>
         <input type="hidden" wicket:id="allowUndefinedArchetype"/>
-        <div class="tiles-wizard d-flex flex-wrap gap-2h justify-content-center" wicket:id="archetypeSelectionPanel">
+        <div role="list" class="tiles-wizard d-flex flex-wrap gap-2h justify-content-center mb-2" wicket:id="archetypeSelectionPanel">
             <wicket:container wicket:id="archetypes">
-                <div class="card mb-0 simple-tile selectable" wicket:id="archetype"/>
+                <div role="option" tabindex="0" aria-selected="false" class="card mb-0 simple-tile selectable" wicket:id="archetype"/>
             </wicket:container>
         </div>
         <div class="mt-4">

diff --git a/gui/admin-gui/src/main/java/com/evolveum/midpoint/gui/impl/page/login/module/PageLogin.html b/gui/admin-gui/src/main/java/com/evolveum/midpoint/gui/impl/page/login/module/PageLogin.html
@@ -11,11 +11,11 @@
 <wicket:extend>
     <form method="post" wicket:id="form" class="justify-content-end">
         <div class="d-flex flex-wrap">
-            <label class="col-form-label">
+            <label class="col-form-label" for="username">
                 <wicket:message key="PageLogin.username"/>
             </label>
             <div class="input-group d-flex login-panel-control">
-                <input wicket:id="username" name="username" type="text" class="form-control form-control-sm">
+                <input wicket:id="username" id="username" name="username" type="text" class="form-control form-control-sm">
                 <div class="input-group-append">
                     <span class="input-group-text">
                         <i class="fas fa-user"></i>
@@ -24,11 +24,11 @@
             </div>
         </div>
         <div class="d-flex flex-wrap">
-            <label class="col-form-label">
+            <label class="col-form-label" for="password">
                 <wicket:message key="PageLogin.password"/>
             </label>
             <div class="input-group d-flex login-panel-control">
-                <input name="password" type="password" autocomplete="off" class="form-control form-control-sm d-flex flex-wrap gap-2">
+                <input name="password" id="password" type="password" autocomplete="off" class="form-control form-control-sm d-flex flex-wrap gap-2">
                 <div class="input-group-append">
                     <span class="input-group-text">
                         <i class="fas fa-lock"></i>

diff --git a/...admin-gui/src/main/java/com/evolveum/midpoint/web/component/menu/top/LocaleTextPanel.html b/...admin-gui/src/main/java/com/evolveum/midpoint/web/component/menu/top/LocaleTextPanel.html
@@ -8,10 +8,11 @@
 <!DOCTYPE html>
 <html xmlns:wicket="http://wicket.apache.org">
 <wicket:panel>
-    <a data-toggle="dropdown" href="#">
+    <a data-toggle="dropdown" href="#" aria-labelledby="languageAriaDesc selectedLanguage">
         <div class="d-flex flex-nowrap gap-2 align-items-center">
             <i wicket:id="icon"></i>
-            <span wicket:id="text"/>
+            <span id="languageAriaDesc" style="display:none;"><wicket:message key="Accessibility.PageLogin.language.title"/></span>
+            <span wicket:id="text" id="selectedLanguage"/>
             <i class="fas fa-xs fa-chevron-left"></i>
         </div>
     </a>