Update "Try another way" input to use a disclosure menu

CHANGELOG-WIP.md

@@ -28,6 +28,7 @@
 - Darkened the color of footer links to meet the minimum contrast for text.
 - Set the language of the Craft edition in the footer, to improve screen reader pronunciation for non-English languages.
 - The accessible name of “Select site” buttons is now translated to the current language.
+- Improved the accessibility of two-step verification steps on the control panel login screen. ([#15145](https://github.com/craftcms/cms/pull/15145))
 
 ### Administration
 - Added the `--format` option to the `db/backup` and `db/restore` commands for PostgreSQL installs. ([#14931](https://github.com/craftcms/cms/pull/14931))

CHANGELOG.md

@@ -3,6 +3,7 @@
 ## Unreleased
 
 - Matrix fields in cards view and Addresses fields now show which nested entries/addresses contain validation errors. ([#15161](https://github.com/craftcms/cms/issues/15161))
+- Improved the accessibility of two-step verification steps on the control panel login screen. ([#15145](https://github.com/craftcms/cms/pull/15145))
 - Fixed an error that could occur if a Local filesystem wasn’t configured with a base path.
 - Fixed a bug where some entries could be missing content after upgrading to Craft 5. ([#15150](https://github.com/craftcms/cms/issues/15150))
 - Fixed a bug where it wasn’t always possible to add new entries to Matrix fields in inline-editable blocks view, if the field’s Max Entries setting had been reached before page load. ([#15158](https://github.com/craftcms/cms/issues/15158))

src/web/assets/cp/src/Craft.js

@@ -99,6 +99,7 @@ import './js/UserIndex.js';
 // Custom elements
 import './js/CraftGlobalSidebar.js';
 import './js/CraftDisclosure.js';
+import './js/CraftSpinner.js';
 import './js/CraftTooltip.js';
 import './js/CraftElementLabel';
 import './js/CraftProxyScrollbar';

src/web/assets/cp/src/css/_craft-spinner.scss

@@ -0,0 +1,10 @@
+craft-spinner {
+  display: flex;
+  justify-content: center;
+
+  .wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+}

src/web/assets/cp/src/css/_login.scss

@@ -3,6 +3,7 @@
 
 .login-container {
   .login-form-container {
+    position: relative;
     background-color: var(--gray-050);
   }
 

src/web/assets/cp/src/css/_main.scss

@@ -267,6 +267,13 @@ fieldset:last-child,
   margin-bottom: var(--xl) !important;
 }
 
+.center-absolute {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
 .pointer {
   cursor: pointer !important;
 }
@@ -1957,7 +1964,7 @@ ul.icons {
     height: 17px;
     &:after {
       top: -2px;
-      border-color: var(--link-color);
+      border-color: currentColor;
     }
   }
 

src/web/assets/cp/src/css/craft.scss

@@ -5,6 +5,7 @@
 @import 'main';
 @import 'cp';
 @import 'global-sidebar';
+@import 'craft-spinner';
 @import 'craft-tooltip';
 @import 'preview';
 @import 'login';

src/web/assets/cp/src/js/CraftSpinner.js

@@ -0,0 +1,73 @@
+/**
+ *
+ * Spinner
+ *
+ *
+ @property {boolean} visible - Whether the spinner is initially visible
+ */
+const template = document.createElement('template');
+template.innerHTML = `
+  <div class="wrapper hidden" style="" tabindex="-1">
+    <div class="spinner"></div>
+    <span class="message visually-hidden">${Craft.t('app', 'Loading')}</span>
+  </div>
+`;
+
+class CraftSpinner extends HTMLElement {
+  connectedCallback() {
+    this.root = this;
+    let clone = template.content.cloneNode(true);
+    this.root.append(clone);
+
+    if (this.visible === 'true') {
+      this.wrapper.classList.remove('hidden');
+    }
+
+    this.initialized = true;
+  }
+
+  static get observedAttributes() {
+    return ['visible'];
+  }
+
+  get visible() {
+    return this.getAttribute('visible');
+  }
+
+  set visible(value) {
+    this.setAttribute('visible', value);
+  }
+
+  get messageWrapper() {
+    return this.querySelector('.message');
+  }
+
+  get wrapper() {
+    return this.querySelector('.wrapper');
+  }
+
+  attributeChangedCallback(attrName, oldVal, newVal) {
+    if (!this.initialized) return;
+
+    if (attrName.toLowerCase() === 'visible') {
+      return newVal === 'true' ? this.show() : this.hide();
+    }
+  }
+  disconnectedCallback() {}
+
+  show() {
+    this.wrapper.classList.remove('hidden');
+    this.dispatchEvent(new CustomEvent('show'));
+  }
+
+  hide() {
+    this.wrapper.classList.add('hidden');
+    this.dispatchEvent(new CustomEvent('hide'));
+  }
+
+  focus() {
+    this.wrapper.focus();
+  }
+}
+
+customElements.define('craft-spinner', CraftSpinner);

src/web/assets/cp/src/js/LoginForm.js

@@ -10,6 +10,7 @@ Craft.LoginForm = Garnish.Base.extend(
   {
     $container: null,
     $form: null,
+    $spinner: null,
     $usernameInput: null,
     $passwordInput: null,
     $rememberMeCheckbox: null,
@@ -26,6 +27,7 @@ Craft.LoginForm = Garnish.Base.extend(
 
     async init(container, settings) {
       this.$container = $(container);
+      this.$pane = this.$container.find('.login-form-container');
       this.$form = this.$container.find('.login-form');
       this.$usernameInput = this.$form.find('.login-username');
       this.$passwordInput = this.$form.find('.login-password');
@@ -46,6 +48,12 @@ Craft.LoginForm = Garnish.Base.extend(
         changeButtonText: true,
       });
 
+      this.$spinner = document.createElement('craft-spinner');
+      this.$spinner.setAttribute('visible', false);
+      this.$spinner.classList.add('center-absolute');
+
+      $(this.$spinner).insertAfter(this.$form);
+
       new Craft.PasswordInput(this.$passwordInput, {
         onToggleInput: ($newPasswordInput) => {
           this.removeListener(this.$passwordInput, 'input');
@@ -226,47 +234,55 @@ Craft.LoginForm = Garnish.Base.extend(
         const $altContainer = $(
           '<div class="login-alt-container"/>'
         ).insertAfter($hr);
-        const $button = Craft.ui
-          .createButton({
-            label: Craft.t('app', 'Try another way'),
-            spinner: true,
-          })
-          .addClass('menubtn')
-          .appendTo($altContainer);
-        const $menu = $('<div class="menu login-alt-menu"/>').appendTo(
-          $altContainer
-        );
+
+        const $menu = $(
+          '<div id="login-alt-menu" class="login-alt-menu menu menu--disclosure"/>'
+        ).appendTo($altContainer);
         const $ul = $('<ul/>').appendTo($menu);
         for (let method of data.otherMethods) {
           $('<li/>')
             .append(
-              $('<a/>', {
+              $('<button/>', {
                 text: method.name,
                 'data-method': method.class,
+                class: 'menu-item',
               })
             )
             .appendTo($ul);
         }
-        new Garnish.MenuBtn($button, {
-          onOptionSelect: (option) => {
-            $button.addClass('loading');
-
-            Craft.sendActionRequest('post', 'users/auth-form', {
-              data: {
-                method: $(option).data('method'),
-              },
+
+        const $button = $('<button/>', {
+          type: 'button',
+          'aria-controls': 'login-alt-menu',
+          class: 'menu-toggle',
+          html: Craft.t('app', 'Try another way'),
+        }).appendTo($altContainer);
+
+        const $methodDisclosure = new Garnish.DisclosureMenu($button);
+
+        $ul.find('button').on('activate', (event) => {
+          const tempHeight = this.$pane.outerHeight();
+          this.$pane.outerHeight(tempHeight);
+
+          this.$spinner.visible = true;
+          this.$spinner.focus();
+          $methodDisclosure.hide();
+          $authForm.remove();
+          $hr.remove();
+          $altContainer.remove();
+
+          Craft.sendActionRequest('post', 'users/auth-form', {
+            data: {
+              method: $(event.target).data('method'),
+            },
+          })
+            .then(({data}) => {
+              this.$pane.removeAttr('style');
+              this.show2faForm(data);
             })
-              .then(({data}) => {
-                $authForm.remove();
-                $hr.remove();
-                $altContainer.remove();
-                console.log(data);
-                this.show2faForm(data);
-              })
-              .finally(() => {
-                $button.removeClass('loading');
-              });
-          },
+            .finally(() => {
+              this.$spinner.visible = false;
+            });
         });
       }