Skip to content

Let the tab links be the tablist's own children - #237

Draft
boo-code wants to merge 1 commit into
PrestaShop:developfrom
boo-code:fix/tablist-items-presentation-34504
Draft

Let the tab links be the tablist's own children#237
boo-code wants to merge 1 commit into
PrestaShop:developfrom
boo-code:fix/tablist-items-presentation-34504

Conversation

@boo-code

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

Copy link
Copy Markdown
Contributor
Questions Answers
Description? A tablist may only own tab children, but every item in the product page tab list and the checkout personal-information tab list is a bare <li>. It keeps its implicit listitem role and sits between the <ul role="tablist"> and the <a role="tab"> it wraps, so both lists fail the aria-required-children accessibility check - which is the Lighthouse error the reporter sees on a product page. Marking the items role="presentation" takes them out of the accessibility tree and leaves the links as the tablist's children. Markup, classes and behaviour are otherwise unchanged.
Type? bug fix
BC breaks? no
Deprecations? no
Fixed ticket? PrestaShop/PrestaShop#34504
Sponsor company -
How to test? On a 9.2 shop with this theme active, open any product page and read the tab list in the served HTML. Before, <ul role="tablist"> contains <li class="nav-item"> with no role; after, each carries role="presentation". Same on the checkout personal-information step when not logged in. Lighthouse's accessibility section stops reporting the required-children error for these lists.

Why role="presentation" on the <li>, and not role="tab" as the reporter proposed

The reporter asked for role="tab" to be moved onto the <li>. That is the wrong half of the fix -
tab belongs on the element that is actually focusable and activated, which is the link. Three
independent sources agree on the arrangement used here:

  1. Bootstrap documents exactly this shape: <li class="nav-item" role="presentation"> wrapping the
    element that carries role="tab".
  2. The reporter filed the same bug on Oksydan/falcon#325. The theme author declined the proposed
    change for this reason and shipped role="presentation" on the <li> instead
    (Oksydan/falcon#328), reporting a 100% Lighthouse accessibility score afterwards. The reporter
    confirmed on that thread that the result is correct.
  3. PrestaShop's own Hummingbird theme already writes
    <li class="nav-item" role="presentation"> in templates/checkout/_partials/steps/personal-information.tpl.
    This change brings classic in line with the theme that replaced it as the default.

Scope

Both tab lists in the repository, not just the reported one - grep 'role="tablist"' returns exactly
two files, and every <li> in each is a nav-item inside the list bounds, so the change is complete
for this theme. The decorative separator item in the checkout list is included: it holds only a
<span>, so it is precisely the kind of node that must not present itself as a list item to a screen
reader inside a tablist.

Evidence

Measured on the 9.2 shop with the theme switched to classic, reading the served HTML.

Product page (/1-1-hummingbird-printed-t-shirt.html, HTTP 200):

            li in tablist   with role=presentation   a role="tab"
before            2                  0                    2
after             2                  0 -> 2               2

Checkout personal-information step (/order, HTTP 200), reverted vs fixed: 0 of 3 then 3 of 3.
Tab panes still render (2), no Smarty error in either page, and role="tab" counts are untouched, so
only the wrapper role changed.

Related

PrestaShop/classic-theme#236 (mine, open) rewrites the Product Details <li> in the same tab list to
drop the tab when the pane is empty. The two hunks overlap, so whichever lands first the other needs a
trivial rebase. They are independent fixes and are deliberately kept apart.

A tablist may only own tabs, but every item in these two lists was a bare
<li>, which keeps its listitem role and sits between the tablist and the
<a role="tab"> it wraps. The lists therefore fail the aria-required-children
accessibility check, which is what a Lighthouse run on a product page reports.

Marking the items role="presentation" removes them from the accessibility
tree and leaves the links as the tablist's children, which is the arrangement
Bootstrap documents and the one the Hummingbird theme already uses in its own
checkout tabs. The markup, the classes and the behaviour are unchanged.
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.

1 participant