Skip to content

Give the quantity spinner buttons an accessible name - #231

Draft
boo-code wants to merge 1 commit into
PrestaShop:developfrom
boo-code:fix/touchspin-buttons-accessible-name-26778
Draft

Give the quantity spinner buttons an accessible name#231
boo-code wants to merge 1 commit into
PrestaShop:developfrom
boo-code:fix/touchspin-buttons-accessible-name-26778

Conversation

@boo-code

@boo-code boo-code commented Sep 4, 2026

Copy link
Copy Markdown
Contributor
Questions Answers
Description? TouchSpin builds the increase/decrease buttons itself and puts nothing in them but an icon element, so accessibility checkers report "a button is empty or has no value text" and screen readers announce two unnamed buttons. The buttons do not exist until TouchSpin has run, so the labels travel on the quantity input as data attributes - where they can be translated - and are applied to the generated buttons right after initialisation. Done at all three places the spinner is built: product page, quick view and cart.
Type? bug fix
BC breaks? no
Deprecations? no
Fixed ticket? Fixes PrestaShop/PrestaShop#26778
Sponsor company
How to test? Open a product page in the classic theme and inspect the two quantity buttons: they now carry aria-label="Increase quantity" / "Decrease quantity". Same in the quick view and on each cart line. Run WAVE or any checker over the page - the "empty button" errors for the quantity control are gone.

classic-theme's PR table has no Branch? / Category? / UI Tests rows - copy the live template at
publish time. See [[classic-theme-is-a-separate-repo]].

Measured on the real front office, both directions

The shop was switched to classic and the page loaded in a browser (the buttons do not exist in the
server HTML - TouchSpin creates them client-side, which is why this cannot be checked with curl):

before   2 buttons, text "", aria-label null, title null   (input itself already had aria-label="Quantity")
after    up   -> aria-label="Increase quantity"
         down -> aria-label="Decrease quantity"

Hummingbird is already correct - this is classic only

The default 9.x theme renders the buttons in its own template with
aria-label="Decrease quantity of <product name>" and aria-hidden="true" on the icons. Verified on the
live front office. So the report is still valid, but only for the theme it was filed against, and
@matks's 2023 comment that the new theme does better is accurate.

Gates

  • npm run lint (eslint) clean after fixing two issues it caught: an unused $ import in the new helper
    and import/order.
  • npm run build succeeds; assets/ is gitignored in this repo so no built bundle is in the diff.
  • No automated a11y test exists in this theme; the before/after above is the evidence.

TouchSpin builds the increase and decrease buttons itself and puts nothing in
them but an icon element, so assistive technology and accessibility checkers see
two unnamed buttons - "a button is empty or has no value text".

The buttons do not exist until TouchSpin has run, so the labels travel on the
quantity input as data attributes, where they can be translated, and are applied
to the generated buttons right after initialisation. Done for the three places
the spinner is built: the product page, the quick view and the cart.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Buttons (qty:up/down) do not have an accessible name in Product page

1 participant