pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[IMP] website: add an aria-controls attribute on accordion tab elements

Browse Source 
In order to improve the accessibility of the website pages, an
`aria-controls` attribute has been added on `tab` elements of the
"Accordion" snippet to avoid a warning of type `Elements with an ARIA
[role] that require children to contain a specific [role] are missing
some or all of those required children`. Indeed, as explained in
[the tab role documentation]; "An element with the `tab` role should
contain the `aria-controls` property identifying a corresponding
`tabpanel` (that has a `tabpanel` role) by that element's `id`". The
`_createIDs()` method has been adapted in order to handle the update of
the `aria-controls` attribute at the update of the `tabpanel` id.

[the tab role documentation]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role#description

Part-of: odoo/odoo#140453
This commit is contained in:
Louis (loco)
2024-02-29 12:13:35 +00:00
committed by qsm-odoo
parent 0217eff341
commit bedf4ba066
2 changed files with 5 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website/static/src/js/editor/snippets.options.js
+2
View File
@@ -2206,6 +2206,8 @@ options.registry.collapse = options.Class.extend({
const panelId = setUniqueId($panel, 'myCollapseTab');
$tab.attr('data-bs-target', '#' + panelId);
$tab.data('bs-target', '#' + panelId);
$tab[0].setAttribute("aria-controls", panelId);
},
});
addons/website/views/snippets/s_faq_collapse.xml
+3 -3
View File
@@ -7,7 +7,7 @@
<div class="container">
<div id="myCollapse" class="accordion" role="tablist">
<div class="card bg-white" data-name="Item">
<a href="#" t-attf-data-bs-target="#myCollapseTab{{uniq}}_1" role="tab" data-bs-toggle="collapse" aria-expanded="true" class="card-header">Terms of service</a>
<a href="#" t-attf-data-bs-target="#myCollapseTab{{uniq}}_1" role="tab" t-attf-aria-controls="myCollapseTab{{uniq}}_1" data-bs-toggle="collapse" aria-expanded="true" class="card-header">Terms of service</a>
<div t-attf-id="myCollapseTab{{uniq}}_1" class="collapse show" data-bs-parent="#myCollapse" role="tabpanel">
<div class="card-body">
<p class="card-text">These terms of service ("Terms", "Agreement") are an agreement between the website ("Website operator", "us", "we" or "our") and you ("User", "you" or "your"). This Agreement sets forth the general terms and conditions of your use of this website and any of its products or services (collectively, "Website" or "Services").</p>
@@ -15,7 +15,7 @@
</div>
</div>
<div class="card bg-white" data-name="Item">
<a href="#" t-attf-data-bs-target="#myCollapseTab{{uniq}}_2" role="tab" data-bs-toggle="collapse" aria-expanded="false" class="collapsed card-header">Links to other Websites</a>
<a href="#" t-attf-data-bs-target="#myCollapseTab{{uniq}}_2" role="tab" t-attf-aria-controls="myCollapseTab{{uniq}}_2" data-bs-toggle="collapse" aria-expanded="false" class="collapsed card-header">Links to other Websites</a>
<div t-attf-id="myCollapseTab{{uniq}}_2" class="collapse" data-bs-parent="#myCollapse" role="tabpanel">
<div class="card-body">
<p class="card-text">Although this Website may be linked to other websites, we are not, directly or indirectly, implying any approval, association, sponsorship, endorsement, or affiliation with any linked website, unless specifically stated herein.</p>
@@ -24,7 +24,7 @@
</div>
</div>
<div class="card bg-white" data-name="Item">
<a href="#" t-attf-data-bs-target="#myCollapseTab{{uniq}}_3" role="tab" data-bs-toggle="collapse" aria-expanded="false" class="collapsed card-header">Use of Cookies</a>
<a href="#" t-attf-data-bs-target="#myCollapseTab{{uniq}}_3" role="tab" t-attf-aria-controls="myCollapseTab{{uniq}}_3" data-bs-toggle="collapse" aria-expanded="false" class="collapsed card-header">Use of Cookies</a>
<div t-attf-id="myCollapseTab{{uniq}}_3" class="collapse" data-bs-parent="#myCollapse" role="tabpanel">
<div class="card-body">
<p class="card-text">Website may use cookies to personalize and facilitate maximum navigation of the User by this site. The User may configure his / her browser to notify and reject the installation of the cookies sent by us.</p>