[#48401] - Atum - Articles: Number of articles per page not visible on small viewports
- Closed
- 30 Oct 2026
- Medium
- Build: 5.4-dev
- # 48401
Steps to reproduce the issue
| Milestone 1a finding ID | M1a-013 |
|---|---|
| Backlog priority | Low |
| Severity — carried from Milestone 1a | Minor |
| Implementation effort | Low |
| Target milestone(s) | MS2a — Design Tokens and Core Components; MS3b — Backend Template Build |
| WCAG 2.2 success criterion | 1.4.10 Reflow |
| Responsibility tag(s) from report | Development, Design |
| Affected Joomla area/component | Atum — Articles list — articles-per-page selector — Milestone 1a finding #13 |
| Affected user journey(s) | 08 — Backend List View Pattern |
Audit finding
At a 320 CSS-pixel-wide viewport, the selector controlling the number of articles displayed per page is compressed.
Its currently selected value is not visible without opening the <select> element. The report notes that users can determine the value by opening the dropdown, but describes this as an unnecessary additional step.
The report suggests ensuring a minimum width that preserves visibility of the number of entries in the table.
User impact
People using a narrow viewport cannot see how many articles are currently displayed per page.
They may need to open the selector before they can understand the current list configuration. This adds an extra interaction and can make it harder to confirm the effect of a selection.
The issue affects people using small browser windows, narrow devices, or browser zoom that produces an equivalent narrow viewport. It is not limited to people using assistive technology.
Remediation plan
Keep the selected articles-per-page value visible and readable after reflow
- At a 320 CSS-pixel-wide viewport, display the currently selected value without requiring the user to open the selector
- Give the selector sufficient width to show its selected value
- Consider the report's suggestion of a minimum width that preserves the number of entries
- Allow the control to wrap, stack, or otherwise reflow rather than introducing horizontal scrolling
- Preserve the association between the selector and its purpose
- Ensure that the selected value remains programmatically determinable
- Preserve keyboard operability and a visible focus indicator
- Verify the control after changing the selected value
- Apply the corrected behaviour to the shared list-pagination component where appropriate
- Do not treat opening the dropdown as a substitute for displaying the current value
Preconditions
- Use Joomla 6.2 with the Atum administrator template
- Sign in with an account permitted to view the Articles list
- Use a test installation with enough articles for the per-page setting to be meaningful
- Record the exact Joomla build, browser name and version, operating system, viewport dimensions, and browser zoom
- 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 delete articles during verification
Steps to reproduce
- Open the Joomla administrator interface at the site's base URL followed by
/administrator/ - Open Content → Articles
- Alternatively, navigate to
/administrator/index.php?option=com_content&view=articleson the same installation
- Alternatively, navigate to
- Set the browser window or responsive-emulation viewport to 320 by 256 CSS pixels
- Confirm that the page is rendered at 100% browser zoom
- Locate the selector controlling the number of articles displayed per page
- Record the currently selected value before changing it
- Observe whether that value is visible in the closed selector
- Scroll vertically as needed
- Check whether any horizontal scrolling is required to read the value
- Inspect the selector's computed width and any clipping using Developer Tools
- Record whether the selector is compressed and whether its selected value is hidden
- Open the selector to confirm the selected value
- Close the selector without changing the value
- Capture the closed selector, its label, the selected value, and the viewport dimensions
- Repeat after selecting a different value if appropriate
- Do not delete content while changing the value
Verification after remediation
- At the same 320 by 256 CSS-pixel viewport, open Content → Articles
- Confirm that the selected articles-per-page value is visible in the closed selector
- Confirm that it can be read without horizontal scrolling
- Use keyboard navigation to reach the selector
- Confirm that focus is visible and that the selector remains operable
- Change the selected value using the keyboard
- Confirm that the new value remains visible without opening the selector again
- Confirm that the selector remains associated with the list it controls
- Record the viewport and selected values used for verification
Version
6.2
Expected result
At a 320 by 256 CSS-pixel viewport, the selected number of articles per page is visible and readable in the closed selector.
The selector has sufficient width or reflows so that its current value does not require opening the dropdown or horizontal scrolling to read.
Actual result
At a 320 CSS-pixel-wide viewport, the articles-per-page selector is compressed in a way that hides its currently selected value.
Users can open the <select> element to determine the value, but the report identifies this as an unnecessary additional step.
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?
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.
Development and Design are the responsibility tags in the original report.
The original Expected result says the “number of entries in the table” would be preserved. The report's Actual result and screenshot concern the selected articles-per-page value in the selector, so this revision uses that more specific wording.
This issue is distinct from #48403. That issue concerns permission selectors in Global Configuration; this issue concerns the articles-per-page selector in the Articles list.
MS2a is proposed for the shared list-pagination control, with MS3b covering the documented Articles-list integration.
| Labels |
Added:
a11y
a11y-audit-backlog
a11y-priority-minor (Low)
|
||
joomla-cms-bot
- | Labels |
Added:
No Code Attached Yet
|
||
| Title |
|
||||||
its a really simple fix to move each to their own line - its exactly what is already done with the filters
I assume this is what you want to achieve
just needs a few media queries in 2 files
- media_source\templates\administrator\atum\scss\system\searchtools\searchtools.scss
- media_source\templates\site\cassiopeia\scss\system\searchtools\searchtools.scss
diff --git a/media_source/templates/administrator/atum/scss/system/searchtools/searchtools.scss b/media_source/templates/administrator/atum/scss/system/searchtools/searchtools.scss
index c03f773122..7099e52671 100644
--- a/media_source/templates/administrator/atum/scss/system/searchtools/searchtools.scss
+++ b/media_source/templates/administrator/atum/scss/system/searchtools/searchtools.scss
@@ -42,10 +42,25 @@
}
}
}
+
+ @media (max-width: 575.98px) {
+ >.ordering-select {
+ margin-inline: 0;
+ inline-size: 100%;
+ }
+ }
}
.ordering-select {
display: flex;
+
+ @media (max-width: 575.98px) {
+ flex-direction: column;
+ align-items: stretch;
+ gap: 8px;
+ inline-size: 100%;
+ margin-inline-start: 0;
+ }
}
}
@@ -66,6 +81,19 @@
+ .js-stools-field-list {
margin-inline-start: 8px;
}
+
+ @media (max-width: 575.98px) {
+ inline-size: 100%;
+ max-inline-size: 100%;
+
+ + .js-stools-field-list {
+ margin-inline-start: 0;
+ }
+
+ select {
+ inline-size: 100%;
+ }
+ }
}
.js-stools-container-selector {
| Labels |
Added:
a11y-ms1b-quickwins
|
||
drmenzelit
- | Status | New | ⇒ | Closed |
| Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2026-10-30 11:41:47 |
| Closed_By | ⇒ | drmenzelit |
Just an update for anyone taking this on. I did some testing with
flex-shrink: 0on thejs-stools-fields-listwrapper of the<select>that contains the numerical value. Unfortunately, in some views this caused the "Sort" select beside it to have an incomplete name, as part of that text would get obscured. I think this issue would best be resolved by a design system change, or perhaps usingflex-wrap: wrap;and ensuring the controls align when doing so.Below are two screenshots showing the default state when in a 320x256 CSS pixel viewport, and another showing the fix then causing some more of the "Sort" value text to be obscured:
I'd recommend trying out some
flex-wrap: wrap;magic and if each control has its own line and width, could be sufficient. Not up to me, but just an idea.