Let the tab links be the tablist's own children - #237
Draft
boo-code wants to merge 1 commit into
Draft
Conversation
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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
tablistmay only owntabchildren, but every item in the product page tab list and the checkout personal-information tab list is a bare<li>. It keeps its implicitlistitemrole and sits between the<ul role="tablist">and the<a role="tab">it wraps, so both lists fail thearia-required-childrenaccessibility check - which is the Lighthouse error the reporter sees on a product page. Marking the itemsrole="presentation"takes them out of the accessibility tree and leaves the links as the tablist's children. Markup, classes and behaviour are otherwise unchanged.<ul role="tablist">contains<li class="nav-item">with no role; after, each carriesrole="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 notrole="tab"as the reporter proposedThe reporter asked for
role="tab"to be moved onto the<li>. That is the wrong half of the fix -tabbelongs on the element that is actually focusable and activated, which is the link. Threeindependent sources agree on the arrangement used here:
<li class="nav-item" role="presentation">wrapping theelement that carries
role="tab".Oksydan/falcon#325. The theme author declined the proposedchange for this reason and shipped
role="presentation"on the<li>instead(
Oksydan/falcon#328), reporting a 100% Lighthouse accessibility score afterwards. The reporterconfirmed on that thread that the result is correct.
<li class="nav-item" role="presentation">intemplates/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 exactlytwo files, and every
<li>in each is anav-iteminside the list bounds, so the change is completefor 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 screenreader 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):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, soonly the wrapper role changed.
Related
PrestaShop/classic-theme#236(mine, open) rewrites the Product Details<li>in the same tab list todrop 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.