fix(ui): remove aria properties from arrow button , added role presentation (#951)

* fix(ui): remove aria properties from arrow button and add presentation role

* fix: updated snapshots

---------

Co-authored-by: Siddesh Bharat Hazare <[email protected]>
Co-authored-by: ypatadia-eightfold <[email protected]>

Author: 3 people

Diff for: src/components/Accordion/Accordion.tsx

@@ -7,6 +7,7 @@ import React, {
   useContext,
   useEffect,
   useState,
+  useRef,
 } from 'react';
 import GradientContext, { Gradient } from '../ConfigProvider/GradientContext';
 import { OcThemeName } from '../ConfigProvider';
@@ -55,6 +56,14 @@ export const AccordionSummary: FC<AccordionSummaryProps> = ({
   size,
   ...rest
 }) => {
+  const buttonRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    if (buttonRef.current) {
+      buttonRef.current.removeAttribute('aria-disabled');
+    }
+  }, []);
+
   const headerClassnames = mergeClasses([
     styles.accordionSummary,
     classNames,
@@ -88,7 +97,6 @@ export const AccordionSummary: FC<AccordionSummaryProps> = ({
     <div className={headerClassnames} id={`${id}-header`} {...rest}>
       <div
         aria-controls={`${id}-content`}
-        aria-label={expanded ? expandAriaLabelText : collapseAriaLabelText}
         aria-expanded={expanded}
         aria-describedby={expandButtonDescribedBy || `${id}-header-content`}
         className={styles.clickableArea}
@@ -108,10 +116,9 @@ export const AccordionSummary: FC<AccordionSummaryProps> = ({
         {badgeProps && <Badge classNames={styles.badge} {...badgeProps} />}
       </div>
       <Button
+        ref={buttonRef}
         tabIndex={-1}
-        aria-controls={`${id}-content`}
-        ariaLabel={expanded ? expandAriaLabelText : collapseAriaLabelText}
-        disabled={disabled}
+        role="presentation"
         gradient={gradient}
         iconProps={{ classNames: iconButtonClassNames, ...expandIconProps }}
         onClick={onIconButtonClick}

Diff for: src/components/Accordion/__snapshots__/Accordion.test.tsx.snap

@@ -14,7 +14,6 @@ exports[`Accordion Accordion is large 1`] = `
         aria-controls="myAccordionId-content"
         aria-describedby="myAccordionId-header-content"
         aria-expanded="false"
-        aria-label="Accordion"
         class="clickable-area"
         role="button"
         tabindex="0"
@@ -53,10 +52,8 @@ exports[`Accordion Accordion is large 1`] = `
         </span>
       </div>
       <button
-        aria-controls="myAccordionId-content"
-        aria-disabled="false"
-        aria-label="Accordion"
         class="button button-neutral button-medium round-shape icon-left"
+        role="presentation"
         tabindex="-1"
       >
         <span
@@ -111,7 +108,6 @@ exports[`Accordion Accordion is medium 1`] = `
         aria-controls="myAccordionId-content"
         aria-describedby="myAccordionId-header-content"
         aria-expanded="false"
-        aria-label="Accordion"
         class="clickable-area"
         role="button"
         tabindex="0"
@@ -150,10 +146,8 @@ exports[`Accordion Accordion is medium 1`] = `
         </span>
       </div>
       <button
-        aria-controls="myAccordionId-content"
-        aria-disabled="false"
-        aria-label="Accordion"
         class="button button-neutral button-medium round-shape icon-left"
+        role="presentation"
         tabindex="-1"
       >
         <span
@@ -208,7 +202,6 @@ exports[`Accordion Accordion is not bordered 1`] = `
         aria-controls="myAccordionId-content"
         aria-describedby="myAccordionId-header-content"
         aria-expanded="false"
-        aria-label="Accordion"
         class="clickable-area"
         role="button"
         tabindex="0"
@@ -247,10 +240,8 @@ exports[`Accordion Accordion is not bordered 1`] = `
         </span>
       </div>
       <button
-        aria-controls="myAccordionId-content"
-        aria-disabled="false"
-        aria-label="Accordion"
         class="button button-neutral button-medium round-shape icon-left"
+        role="presentation"
         tabindex="-1"
       >
         <span
@@ -305,7 +296,6 @@ exports[`Accordion Accordion is pill shaped 1`] = `
         aria-controls="myAccordionId-content"
         aria-describedby="myAccordionId-header-content"
         aria-expanded="false"
-        aria-label="Accordion"
         class="clickable-area"
         role="button"
         tabindex="0"
@@ -344,10 +334,8 @@ exports[`Accordion Accordion is pill shaped 1`] = `
         </span>
       </div>
       <button
-        aria-controls="myAccordionId-content"
-        aria-disabled="false"
-        aria-label="Accordion"
         class="button button-neutral button-medium round-shape icon-left"
+        role="presentation"
         tabindex="-1"
       >
         <span
@@ -402,7 +390,6 @@ exports[`Accordion Accordion is rectangle shaped 1`] = `
         aria-controls="myAccordionId-content"
         aria-describedby="myAccordionId-header-content"
         aria-expanded="false"
-        aria-label="Accordion"
         class="clickable-area"
         role="button"
         tabindex="0"
@@ -441,10 +428,8 @@ exports[`Accordion Accordion is rectangle shaped 1`] = `
         </span>
       </div>
       <button
-        aria-controls="myAccordionId-content"
-        aria-disabled="false"
-        aria-label="Accordion"
         class="button button-neutral button-medium round-shape icon-left"
+        role="presentation"
         tabindex="-1"
       >
         <span
@@ -500,7 +485,6 @@ exports[`Accordion Accordion renders custom content and its buttons are clickabl
         aria-controls="myAccordionId-content"
         aria-describedby="myAccordionId-header-content"
         aria-expanded="true"
-        aria-label="Accordion"
         class="clickable-area"
         role="button"
         tabindex="0"
@@ -633,10 +617,8 @@ exports[`Accordion Accordion renders custom content and its buttons are clickabl
         </span>
       </div>
       <button
-        aria-controls="myAccordionId-content"
-        aria-disabled="false"
-        aria-label="Accordion"
         class="button button-neutral button-medium round-shape icon-left"
+        role="presentation"
         tabindex="-1"
       >
         <span
@@ -691,7 +673,6 @@ exports[`Accordion Renders without crashing 1`] = `
         aria-controls="myAccordionId-content"
         aria-describedby="myAccordionId-header-content"
         aria-expanded="false"
-        aria-label="Accordion"
         class="clickable-area"
         role="button"
         tabindex="0"
@@ -730,10 +711,8 @@ exports[`Accordion Renders without crashing 1`] = `
         </span>
       </div>
       <button
-        aria-controls="myAccordionId-content"
-        aria-disabled="false"
-        aria-label="Accordion"
         class="button button-neutral button-medium round-shape icon-left"
+        role="presentation"
         tabindex="-1"
       >
         <span