Steps to reproduce the issue

Audit finding

The Save & Close control can include a dropdown toggle, displayed as an arrow to the right of the primary button.

Although the dropdown toggle appears after the primary button visually, it comes first in the keyboard focus order.

The report records the screen-reader announcement as: "Save, button; Toggle Dropdown, menu pop up, button; Save and Close, button"

This sequence presents the secondary control before the primary Save & Close button. It also does not make clear that the dropdown contains alternatives relating to saving and closing.

The report additionally identifies “Toggle Dropdown” as a non-descriptive accessible name, particularly because the control’s role already conveys that it opens a dropdown.

The report recommends matching the code order to the visual order and using a more descriptive accessible name, suggesting “Save options” or similar.

User impact

Keyboard users encounter the dropdown toggle before the primary Save & Close button. They may activate the toggle expecting it to control the preceding “Save” button, then encounter the primary button afterwards.

Screen-reader users hear “Toggle Dropdown” without enough context to know which button’s options it opens. They may need to move through the group more than once to understand its purpose.

The confusing sequence can make saving, closing, or choosing an alternative save action slower and more error-prone, particularly for people using keyboard-only interaction or a screen reader.

Remediation plan

Align the programmatic order and accessible naming of the split button with its visual meaning

• Ensure that the primary Save & Close button receives focus before its dropdown toggle
• Match the DOM order to the visual order unless a deliberate, accessible reading order requires otherwise
• Replace “Toggle Dropdown” with an accessible name that identifies the control whose options it opens
• Consider “Save options”, “Save and Close options”, or equivalent wording appropriate to the button group
• Ensure the accessible name does not duplicate unnecessary role information
• Preserve the visual relationship between the primary button and its dropdown toggle
• Ensure that activating the toggle opens the options associated with Save & Close
• Ensure that the dropdown options remain programmatically associated with the toggle where applicable
• Preserve keyboard operation, visible focus, and a logical focus return after closing the menu
• Apply the corrected pattern to the shared button-group component
• Verify the MFA and Articles implementations separately
• Do not rely on visual position alone to convey the relationship between the primary button and its toggle

Preconditions

• Use Joomla 6.2 with the Atum administrator template
• Sign in with an account permitted to access the relevant views
• For the Articles example, use a test article that displays the Save & Close split button
• For the MFA example, use a view that displays the same split-button pattern
• Record the exact Joomla build, browser name and version, operating system, viewport dimensions, and browser zoom
• Record the screen reader and browser combination if testing announcements
• Start at 100% browser zoom
• Use a disposable test article and do not save unintended changes

Steps to reproduce — Articles edit form

1. Open the Joomla administrator interface at the site's base URL followed by /administrator/
2. Open Content → Articles
3. Open an existing test article for editing
   • Alternatively, navigate to /administrator/index.php?option=com_content&view=article&layout=edit&id=11 on a test installation containing that article
   • Record the article ID and editor configuration used
4. Locate the Save & Close split button
5. Record the visual order of the primary button and dropdown toggle
6. Move keyboard focus to the start of the button group
7. Press Tab repeatedly and record the order in which controls receive focus
8. Confirm whether the dropdown toggle receives focus before the primary Save & Close button
9. Inspect the button group's DOM order using Developer Tools
10. Record whether the DOM order matches the visual order
11. Record the dropdown toggle's accessible name and role
12. Activate the toggle and record the options presented
13. Confirm whether the options relate to Save & Close
14. Close the menu without selecting an option
15. Capture the visual order, focus order, DOM order, accessible name, and menu contents
16. If using a screen reader, record the announcement for each control in sequence

Steps to reproduce — MFA view

1. Open Users → Manage Multi-factor Authentication
   • Record the navigation labels if they differ in the tested build
2. Locate the view or method detail page that displays the Save & Close split-button pattern
3. Repeat the visual-order, focus-order, DOM-order, accessible-name, and menu-content checks
4. Record any differences from the Articles example
5. Capture evidence for each affected MFA view separately
6. Do not save or delete an authentication method during verification

Screen-reader verification

1. Use a screen reader with the browser combination being tested
2. Navigate to the button group using the keyboard
3. Record the announcement of the primary button
4. Record the announcement of the dropdown toggle
5. Record the announcement of the primary button again if the reported sequence occurs
6. Activate the dropdown toggle and record the menu announcement
7. Close the menu and record the focus behaviour
8. Repeat with at least one additional screen reader if available
9. Record the screen-reader name, version, browser, and operating system
10. Do not treat a visual-order fix alone as sufficient if the announced sequence remains confusing

Verification after remediation

1. Open an affected view containing the Save & Close split button
2. Confirm that the primary button receives focus before its dropdown toggle
3. Confirm that the DOM order matches the visual order
4. Confirm that the toggle's accessible name identifies the options it opens
5. Activate the toggle and confirm that the menu contains the expected save-related options
6. Close the menu and confirm that focus returns predictably
7. Repeat in the MFA and Articles contexts
8. Confirm that keyboard operation and visible focus remain intact
9. Record the final accessible name, focus order, and menu behaviour

Version

6.2

Expected result

The primary Save & Close button receives keyboard focus before its dropdown toggle.

The DOM order matches the visual order of the button group.

The dropdown toggle has an accessible name that identifies the options it opens, such as “Save options” or equivalent wording appropriate to the control.

Screen-reader users can understand that the dropdown contains alternatives relating to Save & Close.

Actual result

The dropdown toggle receives keyboard focus before the primary Save & Close button, even though it appears after that button visually.

The report records the screen-reader announcement as “Save, button; Toggle Dropdown, menu pop up, button; Save and Close, button.”

The accessible name “Toggle Dropdown” does not identify which button’s options the control opens.

The current Joomla 6.2 build needs to be checked to establish whether the issue persists and which views use the affected pattern.

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

Desktop web

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

Chrome, Firefox, Edge, Safari

Assistive Technology?

VoiceOver, JAWS, NVDA

Additional Comments

The browser and assistive-technology entries above are carried forward from the original issue and do not represent a new verification of every combination against Joomla 6.2.

Development is the responsibility tag in the original report.

The report's suggested “Save options” label is an example, not a required final string. Use wording that accurately describes the options opened by the toggle.

This issue concerns the sequence and naming of an existing split button. It does not require changing which save actions are available.

MS7a is proposed for the shared button-group component, with MS7b covering the documented MFA and Articles integrations.