From bedf4ba0663823d30f9f2d20b5d1f8529f0c1353 Mon Sep 17 00:00:00 2001
From: "Louis (loco)" <loco@odoo.com>
Date: Wed, 29 Nov 2023 09:57:44 +0100
Subject: [PATCH] [IMP] website: add an aria-controls attribute on accordion
 tab elements

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
---
 addons/website/static/src/js/editor/snippets.options.js | 2 ++
 addons/website/views/snippets/s_faq_collapse.xml        | 6 +++---
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index 3cf21b0d27a..804db749ba7 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -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);
     },
 });
 
diff --git a/addons/website/views/snippets/s_faq_collapse.xml b/addons/website/views/snippets/s_faq_collapse.xml
index 2172a175692..5e368d721e0 100644
--- a/addons/website/views/snippets/s_faq_collapse.xml
+++ b/addons/website/views/snippets/s_faq_collapse.xml
@@ -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>