theme: semantic_ui: header_login: Make auth UI accessible

inveniosoftware · Sep 27, 2024 · 19829e5 · 19829e5
1 parent a848d0a
commit 19829e5
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 15 deletions.
diff --git a/invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/theme.js b/invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/theme.js
@@ -117,12 +117,17 @@ if (headerSearchbar) {
 }
 
 // Login Logout Button
-const $authButton = $("#auth-button");
-const $authIcon = $("#auth-icon");
+const $authButton = $(".auth-button");
+const $authIcon = $(".auth-icon");
 
 const handleAuthButtonClick = () => {
-  $authIcon.attr("class", "spinner loading icon");
+  $authButton.attr(
+    "aria-label",
+    $authIcon.hasClass("sign-in") ? "Logging in..." : "Logging out..."
+  );
+  $authButton.attr("aria-busy", "true");
   $authButton.addClass("disabled");
+  $authIcon.attr("class", "spinner loading icon");
 };
 
 $authButton.on({ click: handleAuthButtonClick });
diff --git a/invenio_app_rdm/theme/templates/semantic-ui/invenio_app_rdm/header_login.html b/invenio_app_rdm/theme/templates/semantic-ui/invenio_app_rdm/header_login.html
@@ -13,10 +13,9 @@
     <form>
       <a
         href="{{ url_for_security('login', next=request.path) }}"
-        class="ui button"
-        id="auth-button"
+        class="ui button auth-button" aria-busy="false" aria-live="polite" aria-label="{{ _('Log in') }}"
       >
-        <i class="sign-in icon" id="auth-icon"></i>
+        <i class="sign-in icon auth-icon" aria-hidden="true"></i>
         {{ _('Log in') }}
       </a>
       {% if security.registerable %}
@@ -111,10 +110,10 @@ <h2 class="ui small header">{{ _("Actions") }}</h2>
             <div class="ui divider"></div>
           {% endif %}
 
-          <a role="menuitem" class="item" href="{{ url_for_security('logout') }}" tabindex="-1"
-            id="auth-button"
+          <a role="menuitem" href="{{ url_for_security('logout') }}" tabindex="-1"
+            class="item auth-button" aria-busy="false" aria-live="polite" aria-label="{{ _('Log out') }}"
           >
-            <i class="sign-out icon" id="auth-icon"></i>
+            <i class="sign-out icon auth-icon" aria-hidden="true"></i>
             {{ _('Log out') }}
           </a>
         </div>
@@ -145,20 +144,20 @@ <h2 class="ui small header">{{ _("My account") }}</h2>
             <div class="ui divider"></div>
           {% endif %}
 
-          <a role="menuitem" class="item" href="{{ url_for_security('logout') }}"
-            id="auth-button"
+          <a role="menuitem" href="{{ url_for_security('logout') }}"
+            class="item auth-button" aria-busy="false" aria-live="polite" aria-label="{{ _('Log out') }}"
           >
-            <i class="sign-out icon" id="auth-icon"></i>
+            <i class="sign-out icon auth-icon" aria-hidden="true"></i>
             {{ _('Log out') }}
           </a>
         </div>
       </div>
 
     {%- else %}
-      <a role="button" href="{{ url_for_security('logout') }}" class="ui button"
-        id="auth-button"
+      <a role="button" href="{{ url_for_security('logout') }}"
+        class="ui button auth-button" aria-busy="false" aria-live="polite" aria-label="{{ _('Log out') }}"
       >
-        <i class="sign-out icon" id="auth-icon"></i>
+        <i class="sign-out icon auth-icon" aria-hidden="true"></i>
         {{ _('Log out') }}
       </a>
     {%- endif %}