`st.dataframe` toolbar buttons are 22.4px, below the WCAG 2.2 24px minimum target size (axe `target-size`)
Checklist
- I have searched the existing issues for similar issues.
- I added a very descriptive title to this issue.
- I have provided sufficient information below to help reproduce this issue.
Summary
The hover toolbar that st.dataframe draws (Show/hide columns, Download as CSV, Search, Fullscreen)
renders each button at 22.4 x 22.4 CSS px, and the buttons sit next to each other, so axe-core's
target-size rule (impact: serious, WCAG 2.2 AA, SC 2.5.8 Target Size (Minimum)) fails. Cause:
StyledElementToolbarButton in frontend/lib/src/components/shared/BaseButton/styled-components.ts
(1.64.0, line ~524) sets padding: theme.spacing.twoXS and minHeight: "unset" around a small icon.
Reproducible Code Example
Same app as above (the st.dataframe line is enough).
Steps To Reproduce
streamlit run app.py- Hover the dataframe so the toolbar appears.
- Run axe-core 4.13 with the
wcag22aatag.
Expected Behavior
Each toolbar button is at least 24 x 24 CSS px (or spaced so a 24px circle around each does not overlap another target).
Current Behavior
target-size (serious, wcag22aa, wcag258) — 4 nodes
<button kind="elementToolbar" data-testid="stBaseButton-elementToolbar" aria-label="Show/hide columns" class="st-emotion-cache-18ac3gt eqzt73c20">
Target has insufficient size (22.4px by 22.4px, should be at least 24px by 24px)
<button ... aria-label="Download as CSV" ...> (same)
<button ... aria-label="Search" ...> (same)
<button ... aria-label="Fullscreen" ...> (same)Suggested fix
Give StyledElementToolbarButton minWidth: "1.5rem" and minHeight: "1.5rem" (24px) instead of
minHeight: "unset", or raise the padding one step. The toolbar is already an overlay above the element,
so the extra 1.6px per button does not move page layout. The same styled button is used by other element
toolbars (charts, st.data_editor), which would all pass with the one change.
In the same minimal app, axe also reports target-size on the st.date_input month/day spinbutton
segments (17.9 x 19.6px); that may deserve its own look but is secondary.
Is this a regression?
- Yes, this used to work in a previous version.
- No.
Debug info
- Streamlit version: 1.64.0 (latest)
- Python version: 3.12
- OS: Linux (CI) and Windows 11
- Browser: Chromium (Playwright bundled)
- axe-core: 4.13.0
Source: streamlit/streamlit