Steps to reproduce the issue

Audit finding

The Text Filters interface uses vertical ellipsis characters (⋮) as a visual indentation symbol to show hierarchy.

These characters are not explained and are announced by screen readers as “Vertical Ellipsis.” The report records an announcement such as: "Vertical Ellipsis Vertical Ellipsis, Vertical Ellipsis Publisher".

The table is also cut off at a 320 CSS-pixel-wide viewport. The report notes that additional page padding further constrains the available width and makes orientation difficult.

The report suggests replacing this table-based indentation with nested groups or <fieldset> elements laid out with CSS grid. That would convey the hierarchy more meaningfully and allow the interface to reflow on small screens.

User impact

Screen-reader users hear repeated, unexplained “Vertical Ellipsis” announcements before group and filter names. This adds noise and does not reliably communicate the hierarchy.

The visual indentation does not provide a programmatic relationship between parent groups and their nested filters.

At a narrow viewport, parts of the table and its controls are cut off. Users may need horizontal scrolling or may be unable to see which group or filter they are configuring.

The combined effect makes it harder to understand the filter hierarchy and to configure text filters on small screens or at high zoom.

Remediation plan

Replace visual-only hierarchy cues with meaningful structure and a reflowing layout

• Remove decorative vertical-ellipsis characters from the accessible name or reading order
• Convey the parent-child relationship between user groups and filters programmatically
• Consider nested groups, <fieldset> elements with legends, or another structure that exposes the hierarchy
• Use CSS grid or another responsive layout so the interface reflows at a 320 CSS-pixel-wide viewport
• Ensure that group names, filter names, and their controls remain visible and usable without horizontal scrolling
• Preserve the association between each filter and the group to which it belongs
• Ensure that form controls have accessible names and remain keyboard operable
• Preserve visible focus indicators
• Avoid using characters or icons solely to simulate indentation
• Verify the rendered result after page padding, inherited styles, and template overrides are applied
• Do not treat hiding the ellipses alone as sufficient if the hierarchy remains unclear programmatically

Preconditions

• Use Joomla 6.2 with the Atum administrator template
• Sign in with an account permitted to open Global Configuration
• Use a test installation with at least one user group and text-filter configuration
• 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 with a viewport of 320 by 256 CSS pixels at 100% browser zoom
• Record the active appearance and any template overrides or custom CSS
• Do not save unintended text-filter changes

Steps to reproduce — screen-reader hierarchy

1. Open the Joomla administrator interface at the site's base URL followed by /administrator/
2. Open System → Global Configuration
   • Alternatively, navigate to /administrator/index.php?option=com_config on the same installation
3. Open the Text Filters view
   • Record the exact tab, panel, or navigation label if it differs in the tested build
4. Locate the filters table
5. Inspect the table's structure using Developer Tools
6. Record where vertical-ellipsis characters appear and whether they are exposed to assistive technology
7. Record the table's headers, rows, cells, and any group relationships
8. Use a screen reader to navigate through the filters
9. Record the announcements, including any repeated “Vertical Ellipsis” announcements
10. Check whether the parent-child relationship between groups and filters is conveyed
11. Capture the table structure, announcements, and relevant DOM

Steps to reproduce — narrow-viewport reflow

1. Remain in the Text Filters view
2. Set the browser window or responsive-emulation viewport to 320 by 256 CSS pixels
3. Confirm that the page is rendered at 100% browser zoom
4. Observe whether the table or its controls are cut off
5. Scroll vertically as needed
6. Check whether horizontal scrolling is required to see or operate all filters
7. Inspect the table's computed width, page padding, and overflow behaviour using Developer Tools
8. Record which columns, controls, or labels are hidden or clipped
9. Capture the narrow-viewport layout and the affected controls
10. Repeat at 200% browser zoom if relevant to the tested workflow
    • Record zoom-related reflow separately from the 320-pixel viewport result

Verification after remediation

1. Open the Text Filters view at a 320 by 256 CSS-pixel viewport
2. Confirm that the hierarchy is conveyed structurally rather than through decorative ellipsis characters
3. Confirm that screen readers do not announce repeated unexplained “Vertical Ellipsis” text
4. Confirm that all group names, filter names, and controls are visible and operable without horizontal scrolling
5. Confirm that each filter remains associated with the correct group
6. Confirm that keyboard focus is visible and follows a logical order
7. Record the final DOM structure, announcements, and responsive behaviour

Version

6.2

Expected result

The Text Filters hierarchy is conveyed programmatically without relying on decorative ellipsis characters.

Screen readers do not announce repeated unexplained “Vertical Ellipsis” text as part of the filter names.

At a 320 by 256 CSS-pixel viewport, the filter groups, names, and controls remain visible and operable without horizontal scrolling.

Actual result

Vertical ellipsis characters are used as visual indentation and are announced by screen readers as “Vertical Ellipsis.”

The Text Filters table is cut off at a 320 CSS-pixel-wide viewport, making orientation and use difficult.

The current Joomla 6.2 build needs to be checked to establish whether the issue persists.

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 describes the individual issues as barely meeting violation thresholds but states that their combination makes the interface difficult to use. Assess the hierarchy, reading order, and reflow together as well as separately.

The report's suggested nested groups or <fieldset> elements are recommendations, not the only possible implementation. Verify the chosen structure with assistive technology.

This issue is distinct from #48403. That issue concerns permission selectors; this issue concerns the Text Filters hierarchy and responsive table.

MS2b is proposed for the shared Text Filters component, with MS3b covering the documented Global Configuration integration.