chore: Ensure aria-disabled is placed correctly in disabled groups (#3324)

Author: taheramr

src/button-dropdown/__tests__/button-dropdown-items.test.tsx

@@ -11,6 +11,7 @@ import createWrapper from '../../../lib/components/test-utils/dom';
 import { isItemGroup, isLinkItem } from '../utils/utils';
 
 import categoryStyles from '../../../lib/components/button-dropdown/category-elements/styles.css.js';
+import categoryItemStyles from '../../../lib/components/button-dropdown/category-elements/styles.css.js';
 import itemStyles from '../../../lib/components/button-dropdown/item-element/styles.css.js';
 import iconStyles from '../../../lib/components/icon/styles.css.js';
 import optionsListStyles from '../../../lib/components/internal/components/options-list/styles.css.js';
@@ -23,7 +24,7 @@ const renderButtonDropdown = (props: ButtonDropdownProps) => {
 const checkRenderedGroup = (
   renderedItem: ElementWrapper,
   group: ButtonDropdownProps.ItemGroup,
-  parentIsDisabled = false
+  parentIsDisabled: boolean
 ) => {
   const element = renderedItem.getElement();
 
@@ -37,7 +38,12 @@ const checkRenderedGroup = (
 
   if (parentIsDisabled || group.disabled) {
     expect(element).toHaveClass(`${categoryStyles.disabled}`);
-    expect(element).toHaveAttribute('aria-disabled', 'true');
+    if (group.disabled) {
+      expect(element.querySelector(`.${categoryItemStyles['items-list-container']}`)).toHaveAttribute(
+        'aria-disabled',
+        'true'
+      );
+    }
   }
 };
 
@@ -88,7 +94,7 @@ const checkRenderedItems = (
 
   expect(renderedItems.length).toBe(items.length);
 
-  Array.prototype.forEach.call(renderedItems, (renderedItem, index) => {
+  renderedItems.forEach((renderedItem: ElementWrapper, index: number) => {
     const item = items[index];
 
     if (isItemGroup(item)) {

src/button-dropdown/category-elements/category-element.tsx

@@ -28,14 +28,13 @@ const CategoryElement = ({
     <li
       className={clsx(styles.category, styles[`variant-${variant}`], disabled && styles.disabled)}
       role="presentation"
-      aria-disabled={disabled ? 'true' : undefined}
     >
       {item.text && (
         <p className={clsx(styles.header, { [styles.disabled]: disabled })} aria-hidden="true">
           {item.text}
         </p>
       )}
-      <ul className={styles['items-list-container']} role="group" aria-label={item.text}>
+      <ul className={styles['items-list-container']} role="group" aria-label={item.text} aria-disabled={disabled}>
         {item.items && (
           <ItemsList
             items={item.items}