No Code Attached Yet a11y a11y-audit-backlog a11y-priority-minor (Low)
avatar mbeganyi-a11y
mbeganyi-a11y
8 Sep 2026

Steps to reproduce the issue

Milestone 1a finding ID M1a-037
Backlog priority Low
Severity — carried from Milestone 1a Best practice
Implementation effort Low
Target milestone(s) MS3a — Frontend Template Build; MS3b — Backend Template Build
WCAG 2.2 success criterion 2.1.1 Keyboard — related checkpoint in the audit; classified as a best-practice finding, not a confirmed violation
Responsibility tag(s) from report Development, Design
Affected Joomla area/component MFA captive view — compact method-selection layout and template controls — Milestone 1a finding #37
Affected user journey(s) 04 — MFA Captive View (FE + BE)
Compact MFA method-selection view showing toolbar, overflow, and menu controls above the authentication methods

Audit finding

The compact MFA method-selection view displays template controls that have no useful action in the audited state.

The report identifies these behaviours

  • The cog-shaped “Toggle Toolbar” control opens an empty toolbar
  • The ellipsis-shaped “More Elements” control produces no observable result
  • The hamburger-shaped “Toggle Menu” control changes to an X without revealing useful menu content

These controls add navigation stops and imply that additional actions or navigation are available when they are not.

The audit classifies this as a best-practice improvement rather than a confirmed WCAG violation.

User impact

Keyboard users must navigate through controls that do not help them choose an authentication method or complete the MFA step.

People using screen readers may hear names such as “Toggle Toolbar” or “More Elements” and reasonably expect additional options. Activating an empty or inactive control can make them spend time checking whether content appeared elsewhere or whether their action worked.

The menu icon changing to an X also suggests that a menu has opened even though no useful content becomes available. This creates an avoidable distraction during authentication.

The finding does not establish that these controls prevent successful MFA completion.

Remediation plan

Render toolbar, overflow, and menu controls only when they expose useful content in the current MFA view

  • Omit the toolbar toggle when the toolbar has no available actions
  • Omit the overflow control when it contains no additional elements
  • Omit the menu toggle when the captive view has no menu to reveal
  • Make these decisions using the content and permissions of the current view rather than hiding the controls globally
  • Remove unused controls from both the visible interface and keyboard navigation
  • Do not leave an invisible but focusable control behind
  • Preserve any genuine authentication, cancellation, or sign-out actions provided by the view
  • If a control does have useful content, retain it and verify that activation reveals that content visibly and programmatically
  • Ensure that retained toggles communicate their expanded or collapsed state accurately
  • Recheck the controls when the layout changes between compact and wide views
  • Verify frontend and backend behaviour separately because the surrounding template controls may differ

Preconditions

  • Use Joomla 6.2
  • Use Atum for backend testing and Cassiopeia for frontend testing
  • Use a test account with MFA configured and access to the interface being tested
  • Make more than one authentication method available if necessary to display the method-selection view
  • Keep a separate administrator session or another recovery route available while testing
  • Do not disable MFA or change production authentication settings to reproduce the issue
  • Record the browser name and version, operating system, template, and available MFA methods
  • Start with a viewport of 320 by 256 CSS pixels using browser responsive-design tools or an equivalent test setup
  • Record whether the test uses desktop emulation or a physical mobile device
  • Do not include authentication codes, recovery codes, or MFA secrets in screenshots

Steps to reproduce — reach the MFA method-selection view

  1. Open a separate private browsing session or another browser profile
  2. Navigate to the administrator login page at the site's base URL followed by /administrator/
  3. Enter the test account's username and password
  4. Continue until the MFA challenge appears
    • Do not complete the second factor yet
  5. If the flow opens a specific method directly, use the available action for choosing another authentication method
  6. Confirm that the method-selection view is displayed
    • This is the login-stage MFA view, not the account page used to configure MFA methods
  7. Set or confirm the viewport at 320 by 256 CSS pixels
  8. Record the controls visible above or around the authentication-method choices
  9. If the documented controls are absent, record that result along with the template, viewport, and build
    • Do not substitute unrelated controls from an MFA setup page

Steps to reproduce — Toggle Toolbar

  1. Locate the cog-shaped control
  2. Record its visible label or accessible name
    • The audit identifies it as “Toggle Toolbar”
  3. Use Tab or Shift+Tab to reach it
  4. Activate it using the keyboard
  5. Inspect the revealed area
  6. Record whether it contains any available actions
  7. Check whether the control adds a keyboard stop even though the toolbar is empty
  8. Close the toolbar if a closing action is available

Steps to reproduce — More Elements

  1. Locate the ellipsis-shaped control
  2. Record its visible label or accessible name
    • The audit identifies it as “More Elements”
  3. Reach and activate it using the keyboard
  4. Check for a revealed menu, additional controls, or another meaningful result
  5. Record whether any content appears and whether it can be reached
  6. Repeat with a pointer if needed to distinguish a keyboard failure from a control that has no content for any input method

Steps to reproduce — Toggle Menu

  1. Locate the hamburger-shaped control
  2. Record its visible label or accessible name
    • The audit identifies it as “Toggle Menu”
  3. Reach and activate it using the keyboard
  4. Observe whether the icon changes to an X
  5. Check whether a menu or useful navigation content appears
  6. Record whether the control's visual or announced state changes without exposing content
  7. Activate it again if needed to restore its initial state

Responsive and frontend comparison

  1. Increase the viewport width and record which controls remain available
  2. Return to the narrow viewport and check whether empty controls reappear
  3. Where frontend MFA login is available, repeat the login-stage test through the site's frontend
  4. Record the frontend template, viewport, and controls shown
  5. Test only the controls actually present in that view
  6. Record frontend and backend results separately rather than treating an absent control as a failure
  7. Complete or cancel the test login through the normal available route

Supplementary screen reader test

  1. Enable a screen reader and record the screen reader and browser combination
  2. Return to the compact MFA method-selection view
  3. Navigate through the controls before the authentication-method choices
  4. Record each redundant control's accessible name and role
  5. Activate each control and record any state or content announcement
  6. Check whether the user is directed to useful content or left to search for a result that is not present
  7. Confirm that the genuine authentication-method choices remain reachable after removing or suppressing unused controls

Version

6.2

Expected result

The MFA method-selection view presents controls that perform useful actions in the current state.

Empty toolbars, empty overflow menus, and unavailable navigation do not have visible or keyboard-focusable toggles.

Controls that remain reveal meaningful content and communicate their state accurately.

Actual result

The audit reports three unnecessary controls in the compact MFA method-selection view.

  • “Toggle Toolbar” opens an empty toolbar
  • “More Elements” produces no observable result
  • “Toggle Menu” changes its icon to an X without revealing useful menu content

These controls add avoidable navigation and uncertainty during authentication.

What device were you using? (eg, phone, laptop)

Desktop web with a 320 by 256 CSS-pixel emulated viewport; mobile

What web browser were you using? (eg, Chrome, Safari)

Chrome, Firefox, Edge, Safari

Assistive Technology?

N/A

Additional Comments

The browser and device entries above are carried forward from the existing issue and do not represent a new verification of every browser or physical device against Joomla 6.2.

The issue discussion clarifies that the compact layout can be reproduced through 320 by 256 CSS-pixel device emulation on desktop.

The supplementary screen reader test is proposed verification, not a claim that a screen reader was used in the original test.

The report lists 2.1.1 Keyboard as the related checkpoint but classifies the finding as Best-Practice. Do not describe the presence of unnecessary controls alone as an established failure of that criterion.

The original screenshot is described as a tablet view. Its displayed image dimensions should not be treated as the tested CSS viewport dimensions.

MS3a and MS3b are proposed for the frontend and backend authentication layouts identified by the report. Verify which controls are actually present in each template before assigning implementation work.

avatar mbeganyi-a11y mbeganyi-a11y - open - 8 Sep 2026
avatar mbeganyi-a11y mbeganyi-a11y - change - 8 Sep 2026
Labels Added: a11y a11y-audit-backlog a11y-priority-minor (Low)
avatar mbeganyi-a11y mbeganyi-a11y - labeled - 8 Sep 2026
avatar mbeganyi-a11y mbeganyi-a11y - labeled - 8 Sep 2026
avatar mbeganyi-a11y mbeganyi-a11y - labeled - 8 Sep 2026
avatar joomla-cms-bot joomla-cms-bot - change - 8 Sep 2026
Labels Added: No Code Attached Yet
avatar joomla-cms-bot joomla-cms-bot - labeled - 8 Sep 2026
avatar brianteeman
brianteeman - comment - 8 Sep 2026

you have written that this is desktop but the screenshot (and description) are mobile

avatar mbeganyi-a11y mbeganyi-a11y - change - 9 Sep 2026
Title
…
Multiple useless buttons
MFA: Multiple useless buttons [Best Practice]
avatar mbeganyi-a11y mbeganyi-a11y - edited - 9 Sep 2026
avatar mbeganyi-a11y
mbeganyi-a11y - comment - 11 Sep 2026

Yes it can be brought up in a 320x256 CSS pixel device emulation on desktop but will clarify. Thanks for pointing that out.

avatar mbeganyi-a11y mbeganyi-a11y - change - 11 Sep 2026
The description was changed
avatar mbeganyi-a11y mbeganyi-a11y - edited - 11 Sep 2026
avatar mbeganyi-a11y mbeganyi-a11y - change - 26 Oct 2026
The description was changed
avatar mbeganyi-a11y mbeganyi-a11y - edited - 26 Oct 2026

Add a Comment

Login with GitHub to post a comment