Implement focus management for Two-Step Verification slideouts, hide decorative success checkmark, add accName to Actions button

CHANGELOG-WIP.md

@@ -1,5 +1,7 @@
 # Release Notes for Craft CMS 5.3 (WIP)
 
 ### Content Management
-
 - “Replace file” actions now display success notices on complete. ([#15217](https://github.com/craftcms/cms/issues/15217))
+
+### Accessibility
+- Improved the accessibility of two-step verification setup. ([#15229](https://github.com/craftcms/cms/pull/15229))

src/templates/users/_auth-methods.twig

@@ -6,6 +6,7 @@
 } %}
   {% for method in craft.app.auth.getAvailableMethods() %}
     {% set isActive = method.isActive() %}
+    {% set headingId = "auth-method-heading-#{loop.index0}" %}
 
     {% tag 'div' with {
       class: 'auth-method',
@@ -15,7 +16,7 @@
       },
     } %}
       <div class="auth-method-details">
-        <h3>{{ method.displayName() }}</h3>
+        <h3 id="{{ headingId }}">{{ method.displayName() }}</h3>
         <div class="instructions">
           {{ method.description() }}
         </div>
@@ -42,6 +43,8 @@
               buttonAttributes: {
                 class: ['auth-method-action-btn', 'action-btn', 'hairline'],
                 title: 'Actions'|t('app'),
+                'aria-label': 'Actions'|t('app'),
+                'aria-describedby': headingId,
               },
             }) }}
           </div>

src/templates/users/_passkeys-table.twig

@@ -6,15 +6,15 @@
     <table class="data fullwidth">
       <thead>
       <tr>
-        <th>{{ 'Name'|t('app') }}</th>
-        <th>{{ 'Last Used'|t('app') }}</th>
-        <td></td>
+        <th scope="col">{{ 'Name'|t('app') }}</th>
+        <th scope="col">{{ 'Last Used'|t('app') }}</th>
+        <th scope="col"><span class="visually-hidden">{{ 'Actions'|t('app') }}</span></th>
       </tr>
       </thead>
       <tbody>
       {% for passkey in passkeys %}
         <tr>
-          <td data-name="credentialName">{{ passkey.credentialName }}</td>
+          <th scope="row" data-name="credentialName">{{ passkey.credentialName }}</th>
           <td>{{ passkey.dateLastUsed|timestamp }}</td>
           <td>
             {{ tag('a', {

src/web/assets/authmethodsetup/src/AuthMethodSetup.js

@@ -30,6 +30,10 @@ Craft.AuthMethodSetup = Garnish.Base.extend(
       });
     },
 
+    focusMethodButton(method) {
+      this.methodListings[method].querySelector('button').focus();
+    },
+
     showSetupSlideout(method) {
       const button = this.methodListings[method].querySelector(
         '.auth-method-setup-btn'
@@ -54,6 +58,7 @@ Craft.AuthMethodSetup = Garnish.Base.extend(
                 'activate',
                 () => {
                   slideout.close();
+                  this.focusMethodButton(method);
                 }
               );
 
@@ -138,9 +143,11 @@ Craft.AuthMethodSetup.Slideout = Craft.Slideout.extend({
     });
     this.$container.find('.so-body').addClass('auth-method-setup-success')
       .html(`
-<div class="auth-method-setup-success-graphic" data-icon="check"></div>
-<h1 class="auth-method-setup-success-message">${message}</h1>
-`);
+        <div class="auth-method-setup-success-graphic" data-icon="check" aria-hidden="true"></div>
+        <h1 class="auth-method-setup-success-message" tabindex="-1">${message}</h1>
+      `);
+
+    this.$container.find('.auth-method-setup-success-message').focus();
     this.$container
       .find('.auth-method-close-btn')
       .text(Craft.t('app', 'Close'));