From 822633ae2f91c9a6f48998d9475eb5c514c31030 Mon Sep 17 00:00:00 2001
From: kyybo <106741733+kyybo@users.noreply.github.com>
Date: Wed, 4 Sep 2024 13:25:20 +0200
Subject: [PATCH] SpeedDial fix aria-controls

"The aria-controls attribute identifies the element (or elements) whose contents or presence are controlled by the element on which the attribute is set" (--> https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)

The aria-controls attribute should only be placed on the SpeedDial trigger button. And its value must be the identifier or list of identifiers of its items.
---
 components/lib/speeddial/SpeedDial.js | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/components/lib/speeddial/SpeedDial.js b/components/lib/speeddial/SpeedDial.js
index 0cee730077..9dd88b82cd 100644
--- a/components/lib/speeddial/SpeedDial.js
+++ b/components/lib/speeddial/SpeedDial.js
@@ -469,7 +469,6 @@ export const SpeedDial = React.memo(
                     id: `${idState}_${index}`,
                     className: cx('menuitem', { active: isItemActive(`${idState}_${index}`) }),
                     style: getItemStyle(index),
-                    'aria-controls': idState + '_item',
                     role: 'menuitem'
                 },
                 ptm('menuitem')
@@ -533,7 +532,7 @@ export const SpeedDial = React.memo(
                 'aria-label': props['aria-label'],
                 'aria-expanded': visible,
                 'aria-haspopup': true,
-                'aria-controls': idState + '_list',
+                'aria-controls': getAriaControls
                 'aria-labelledby': props.ariaLabelledby,
                 pt: ptm('button'),
                 unstyled: props.unstyled,
@@ -559,6 +558,14 @@ export const SpeedDial = React.memo(
             return content;
         };
 
+        const getAriaControls = () => {
+            let ariaControls = ""
+            for (let index = 0; index < props.model.length; index++) {
+                ariaControls = ariaControls + `${idState}_${index} `;
+            }
+            return ariaControls.trim();
+        }
+
         const createMask = () => {
             if (props.mask) {
                 const maskProps = mergeProps(