SSK-5xx - accessibility

The library ships accessible by default for its own controls: the action/nav tags (add-to-cart, open-cart, the cart/product steppers, product-link, …) resolve a focusable control and set role/tabindex/aria-label; image/media set alt/title; search-input names its own field; the change-option modes and volume-tier-list are keyboard radiogroups; toggle-section + mix-match-item-list form a proper disclosure (aria-expanded/ aria-controls/hidden). Do not hand-add role/tabindex to those - and the validator does not flag them (it would false-positive). The 5xx family covers only the a11y the author owns and the library does not do for you - currently the unnamed fields and the icon-only mix & match steppers below.

SSK-501 - Unnamed control the library doesn’t name for you

• Severity: Warning
• Applies to: two cases the engine deliberately leaves to the author.
  1. Unlabelled field - an <input> / <textarea> inside apply-discount, cart-note, klaviyo-back-in-stock, or change-price. These use your field verbatim and never set a name on it (unlike search-input, which does). Non-text inputs (hidden/submit/button/reset/checkbox/radio) are ignored.
  2. Icon-only mix & match stepper - increase-mix-match-item, decrease-mix-match-item, remove-mix-match-item. The engine does not self-label these (unlike the cart/product steppers, which get “Increase quantity” / “Remove item” automatically): the right name depends on the pool card, so a generic one would be wrong.
• Detect:
  1. such a field with no accessible name - none of aria-label (non-empty), aria-labelledby, title (non-empty), a wrapping <label>, or a <label for="…"> pointing at its id. A placeholder does not count (it vanishes on input and isn’t a reliable name).
  2. a mix & match stepper with no non-empty aria-label / aria-labelledby on the element or anywhere in its subtree (i.e. its nested <button> counts). Visible glyph text (”+”, ”−”, ”×”) is not a name.
• Why it matters: screen-reader users hit an unnamed field and don’t know what to type, or an unnamed button and don’t know what it does (WCAG 2.2 AA - 4.1.2 Name, Role, Value / 3.3.2 Labels or Instructions).
• Known symptoms: the control works visually but is announced as just “edit text” / “blank” / “button”.
• Fix: for a field, add aria-label="…", wrap it in a <label>, or point a <label for="…"> at its id. For a stepper, put aria-label="…" on the tag or its nested <button> - e.g. <increase-mix-match-item>`<button type="button" aria-label="Increase quantity">+`</button>“.

---

---

Imported from the Storesynk skill v0.1.0 (references/structure-rules.md). To change this page, change it there.