fix: accordion: remove role presentation and add default aria-label o…

…n expand toggle button for a11y (#887)

* fix: accordian: remove role presentation on expand button

* fix: accordian: add default ariaLabel on expand button

* fix: accordion: add aria label back to the expand button

---------

Co-authored-by: Jeff Howard <106610186+jhoward-eightfold@users.noreply.github.com>

src/components/Accordion/Accordion.tsx

@@ -108,9 +108,9 @@ export const AccordionSummary: FC<AccordionSummaryProps> = ({
         {badgeProps && <Badge classNames={styles.badge} {...badgeProps} />}
       </div>
       <Button
-        role="presentation"
         tabIndex={-1}
         aria-controls={`${id}-content`}
+        ariaLabel={expanded ? expandAriaLabelText : collapseAriaLabelText}
         disabled={disabled}
         gradient={gradient}
         iconProps={{ classNames: iconButtonClassNames, ...expandIconProps }}

src/components/Accordion/__snapshots__/Accordion.test.tsx.snap

@@ -55,8 +55,8 @@ exports[`Accordion Accordion is large 1`] = `
       <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
@@ -152,8 +152,8 @@ exports[`Accordion Accordion is medium 1`] = `
       <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
@@ -249,8 +249,8 @@ exports[`Accordion Accordion is not bordered 1`] = `
       <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
@@ -346,8 +346,8 @@ exports[`Accordion Accordion is pill shaped 1`] = `
       <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
@@ -443,8 +443,8 @@ exports[`Accordion Accordion is rectangle shaped 1`] = `
       <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
@@ -635,8 +635,8 @@ exports[`Accordion Accordion renders custom content and its buttons are clickabl
       <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
@@ -732,8 +732,8 @@ exports[`Accordion Renders without crashing 1`] = `
       <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