Steps to reproduce the issue

Audit finding

The small × controls used to clear selected dropdown values have undersized clickable areas and overlap neighbouring interactive areas.

The audit identifies this pattern in the article Category selector, the Server Time Zone selector in Global Configuration, and the module Position selector in frontend editing.

The article example records a remove control measuring approximately 20 by 20 CSS pixels. The time-zone example also has a target smaller than 24 by 24 CSS pixels.

Some remove actions are unnecessary or misleading. The report notes that the time zone returns to its previous value after an empty selection is saved, and that removing the category when “Uncategorized” is already selected produces no useful change.

User impact

People with hand tremors or limited fine motor control can have difficulty selecting the small × without activating the neighbouring dropdown area instead. They may open the list when trying to clear a value, or clear a value when trying to open the list.

This also makes the controls difficult to use with touch input, where a finger can cover both neighbouring targets.

The time-zone control creates an additional problem: it appears to let users remove the setting, but the previous value returns after saving. Users may repeat the action because they cannot tell whether the removal failed or whether an empty time zone is unsupported.

An unnecessary category-removal control similarly invites an action that does not produce a meaningful result.

Remediation plan

Remove clear actions that do not represent a useful supported operation, and make retained actions large enough and sufficiently separated from neighbouring targets

• Remove the clear action from the Server Time Zone selector if an empty value is not a supported saved state
• For article Category, review whether a separate remove action is needed when users can explicitly select “Uncategorized”
• Do not offer an apparently functional remove action when “Uncategorized” is already selected and activating it changes nothing
• For frontend module Position, confirm whether clearing the value is a supported operation before deciding whether to retain the control
• Where removal remains useful, provide a clickable target of at least 24 by 24 CSS pixels or demonstrate that an applicable WCAG exception is met
• Increase the actual clickable area rather than only enlarging the visible × icon
• Position the remove action so that its active area does not overlap the dropdown-opening target
• Give each retained remove action an accessible name that identifies the value or field being cleared
• Ensure that clearing a value has a predictable result and leaves keyboard focus in a useful location
• Apply the corrected selector pattern consistently in the affected frontend and backend forms
• Verify the resulting target dimensions and separation at normal zoom and check that wrapping or zoom does not reintroduce overlap

Preconditions

• Use Joomla 6.2
• Use Atum for administrator testing and Cassiopeia for the documented frontend test
• Use a test installation for any checks that involve saving Global Configuration
• Sign in with an account permitted to edit articles and access Global Configuration
• For the frontend test, use an account permitted to edit a displayed module and a site configured to expose the module-editing action
• Record the browser name and version, operating system, viewport dimensions, and pointer device used
• Start with browser zoom set to 100%
• Record existing values before changing them

Steps to reproduce — article Category selector

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
4. Locate the Category selector
   • Record its location if the form layout has been customized
5. Select a category if needed so that a selected value and its remove control are visible
6. Locate the small × associated with the selected category
7. Open the browser's Developer Tools and inspect the remove control
8. Measure its actual clickable width and height in CSS pixels
   • Include padding only where it belongs to the active target
   • Do not measure only the visible × glyph
9. Inspect the neighbouring area that opens or operates the dropdown
10. Record whether the remove target overlaps that interactive area
    • Distinguish overlapping active targets from overlapping decorative outlines
11. Using a pointer, test the remove control and the adjoining dropdown area
    • Record whether the intended action occurs
    • Record any activation of the neighbouring action
12. Select “Uncategorized”
13. Check whether a remove control remains available
14. If present, activate it and record whether it produces a meaningful change
15. Close the article without saving unintended changes

Steps to reproduce — Server Time Zone selector

1. Open System → Global Configuration
2. Open the Server tab
3. Locate the Server Time Zone selector
   • Record the exact label if it differs in the tested build
4. Record the currently selected time zone
5. Locate the × or “Remove item” control associated with the selected value
6. Measure its clickable dimensions and inspect its relationship to the dropdown-opening target
7. Record whether the remove target is smaller than 24 by 24 CSS pixels and whether the active areas overlap
8. Activate the remove control
9. Record whether the selected time zone disappears and whether the field appears empty
10. On the test installation only, save Global Configuration
11. Return to the Server tab and check the saved time-zone value
12. Record whether the original value returns, a different value is substituted, or validation prevents saving
    • The audit reports that the previous time zone is restored
13. Restore the original setting if the test changed it
    • Do not save any unrelated configuration changes

Steps to reproduce — frontend module Position selector

1. Open the frontend of the test site and sign in with the permitted account
2. Navigate to a page containing a module with an available frontend editing action
3. Activate the module's edit action
   • Record the page URL and module title because this entry point depends on the site's configuration
4. Locate the Position selector in the module-editing form
5. Select a position if necessary to display its remove control
6. Measure the remove control's clickable dimensions
7. Inspect whether its active area overlaps the neighbouring dropdown target
8. Test the remove action and the dropdown-opening action separately with a pointer
9. Record any unintended activation of the neighbouring action
10. Close the form without saving unintended changes

Target-size verification

1. Record each affected control's clickable width and height in CSS pixels
2. For any target smaller than 24 by 24 CSS pixels, check the spacing exception and any other applicable exception under WCAG 2.2 Success Criterion 2.5.8
3. For the spacing check, centre an imaginary circle with a diameter of 24 CSS pixels on the centre of each undersized target's bounding box
4. Check whether that circle intersects another target or the corresponding circle of another undersized target
5. Record the specific target pairs that fail the spacing check
6. Capture screenshots showing the selected value, remove control, measured dimensions, and neighbouring target
7. Repeat the layout check at 200% browser zoom
   • Record any new wrapping or overlap separately from the CSS-pixel measurements

Version

6.2

Expected result

Retained remove controls have sufficiently large or appropriately spaced clickable targets and can be activated independently of neighbouring dropdown controls.

The interface offers removal only when clearing the value is a useful supported operation.

The time-zone selector does not offer a misleading empty state that silently reverts after saving.

Actual result

The audit reports small remove controls overlapping neighbouring dropdown targets in the article Category, Server Time Zone, and frontend module Position selectors.

The article example measures approximately 20 by 20 CSS pixels. The time-zone remove control is also reported as smaller than 24 by 24 CSS pixels.

Clearing the time zone appears to remove the value, but the previous value returns after saving. The article Category selector also offers a redundant remove action when “Uncategorized” is selected.

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?

N/A

Additional Comments

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

Measurements from the original audit should be checked against the actual clickable targets in the build being tested. A target smaller than 24 by 24 CSS pixels is not automatically a failure if an applicable exception is met.

The frontend reproduction depends on the site's module-editing permissions and configuration. Record the actual module and entry point rather than assuming that every Cassiopeia site exposes the same editing controls.

MS2b is proposed for the shared selector component, with MS3a and MS3b covering its frontend and backend integration. These are scope-based recommendations rather than confirmed project assignments.