fix(Button): updated rendering of aria-disabled attribute (#11478)

* fix(Button): updated rendering of aria-disabled attribute

* Updated other component snapshots

* Addressed Austin feedback

* Updated test name to use styles object

Author: thatblindgeye

packages/react-code-editor/src/components/CodeEditor/__test__/__snapshots__/CodeEditor.test.tsx.snap

@@ -23,7 +23,6 @@ exports[`Matches snapshot with control buttons enabled 1`] = `
               style="display: contents;"
             >
               <button
-                aria-disabled="false"
                 aria-label="Copy code to clipboard"
                 class="pf-v6-c-button pf-m-plain"
                 data-ouia-component-id="OUIA-Generated-Button-plain-1"
@@ -54,7 +53,6 @@ exports[`Matches snapshot with control buttons enabled 1`] = `
               style="display: contents;"
             >
               <button
-                aria-disabled="false"
                 aria-label="Upload code"
                 class="pf-v6-c-button pf-m-plain"
                 data-ouia-component-id="OUIA-Generated-Button-plain-2"
@@ -85,7 +83,6 @@ exports[`Matches snapshot with control buttons enabled 1`] = `
               style="display: contents;"
             >
               <button
-                aria-disabled="false"
                 aria-label="Download code"
                 class="pf-v6-c-button pf-m-plain"
                 data-ouia-component-id="OUIA-Generated-Button-plain-3"

packages/react-code-editor/src/components/CodeEditor/__test__/__snapshots__/CodeEditorControl.test.tsx.snap

@@ -6,7 +6,6 @@ exports[`Matches snapshot 1`] = `
     style="display: contents;"
   >
     <button
-      aria-disabled="false"
       class="pf-v6-c-button pf-m-plain"
       data-ouia-component-id="OUIA-Generated-Button-plain-1"
       data-ouia-component-type="PF6/Button"

packages/react-core/src/components/AboutModal/__tests__/__snapshots__/AboutModalBoxCloseButton.test.tsx.snap

@@ -6,7 +6,6 @@ exports[`AboutModalBoxCloseButton Test 1`] = `
     class="pf-v6-c-about-modal-box__close"
   >
     <button
-      aria-disabled="false"
       aria-label="Close Dialog"
       class="pf-v6-c-button pf-m-plain"
       data-ouia-component-id="OUIA-Generated-Button-plain-1"
@@ -42,7 +41,6 @@ exports[`AboutModalBoxCloseButton Test close button aria label 1`] = `
     class="pf-v6-c-about-modal-box__close"
   >
     <button
-      aria-disabled="false"
       aria-label="Klose Daylok"
       class="pf-v6-c-button pf-m-plain"
       data-ouia-component-id="OUIA-Generated-Button-plain-3"
@@ -78,7 +76,6 @@ exports[`AboutModalBoxCloseButton Test onclose 1`] = `
     class="pf-v6-c-about-modal-box__close"
   >
     <button
-      aria-disabled="false"
       aria-label="Close Dialog"
       class="pf-v6-c-button pf-m-plain"
       data-ouia-component-id="OUIA-Generated-Button-plain-2"

packages/react-core/src/components/Alert/__tests__/Generated/__snapshots__/AlertActionCloseButton.test.tsx.snap

@@ -3,7 +3,6 @@
 exports[`AlertActionCloseButton should match snapshot 1`] = `
 <DocumentFragment>
   <button
-    aria-disabled="false"
     aria-label="Close some label alert: test title"
     class="pf-v6-c-button pf-m-plain"
     data-ouia-component-id="OUIA-Generated-Button-plain-1"

packages/react-core/src/components/Alert/__tests__/Generated/__snapshots__/AlertActionLink.test.tsx.snap

@@ -3,7 +3,6 @@
 exports[`AlertActionLink should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <button
-    aria-disabled="false"
     class="pf-v6-c-button pf-m-link pf-m-inline ''"
     data-ouia-component-id="OUIA-Generated-Button-link-1"
     data-ouia-component-type="PF6/Button"

packages/react-core/src/components/Button/Button.tsx

@@ -164,12 +164,14 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
     </span>
   );
   const _children = children && <span className={css('pf-v6-c-button__text')}>{children}</span>;
+  // We only want to render the aria-disabled attribute when true, similar to the disabled attribute natively.
+  const shouldRenderAriaDisabled = isAriaDisabled || (!isButtonElement && isDisabled);
 
   return (
     <Component
       {...props}
       {...(isAriaDisabled ? preventedEvents : null)}
-      aria-disabled={isAriaDisabled || (!isButtonElement && isDisabled)}
+      {...(shouldRenderAriaDisabled && { 'aria-disabled': true })}
       aria-label={ariaLabel}
       className={css(
         styles.button,

packages/react-core/src/components/Button/__tests__/Button.test.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
-
 import { render, screen } from '@testing-library/react';
-
 import { Button, ButtonState, ButtonVariant } from '../Button';
+import styles from '@patternfly/react-styles/css/components/Button/button';
 
 Object.values(ButtonVariant).forEach((variant) => {
   if (variant !== 'primary') {
@@ -65,11 +64,6 @@ test('Does not render with class pf-m-disabled by default when isDisabled = true
   expect(screen.getByRole('button')).not.toHaveClass('pf-m-disabled');
 });
 
-test('aria-disabled is set to false when isDisabled = true', () => {
-  render(<Button isDisabled>Disabled Button</Button>);
-  expect(screen.getByRole('button')).toHaveAttribute('aria-disabled', 'false');
-});
-
 test('Renders with class pf-m-disabled when isDisabled = true and component is not a button', () => {
   render(
     <Button isDisabled component="a">
@@ -79,9 +73,28 @@ test('Renders with class pf-m-disabled when isDisabled = true and component is n
   expect(screen.getByText('Disabled Anchor Button').parentElement).toHaveClass('pf-m-disabled');
 });
 
-test('Renders with class pf-m-aria-disabled when isAriaDisabled = true', () => {
+test(`aria-disabled and class ${styles.modifiers.ariaDisabled} are not rendered when isAriaDisabled is not passed by default`, () => {
+  render(<Button>Button</Button>);
+
+  const button = screen.getByRole('button');
+  expect(button).not.toHaveAttribute('aria-disabled');
+  expect(button).not.toHaveClass(styles.modifiers.ariaDisabled);
+});
+
+test(`aria-disabled and class ${styles.modifiers.ariaDisabled} are not rendered when isDisabled is true, but isAriaDisabled is not passed`, () => {
+  render(<Button isDisabled>Disabled Button</Button>);
+
+  const button = screen.getByRole('button');
+  expect(button).not.toHaveAttribute('aria-disabled');
+  expect(button).not.toHaveClass(styles.modifiers.ariaDisabled);
+});
+
+test(`Renders with class ${styles.modifiers.ariaDisabled} and aria-disabled attribute when isAriaDisabled = true`, () => {
   render(<Button isAriaDisabled>Disabled yet focusable button</Button>);
-  expect(screen.getByRole('button')).toHaveClass('pf-m-aria-disabled');
+  const button = screen.getByRole('button');
+
+  expect(button).toHaveAttribute('aria-disabled', 'true');
+  expect(button).toHaveClass(styles.modifiers.ariaDisabled);
 });
 
 test('Does not disable button when isDisabled = true and component = a', () => {

packages/react-core/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap

@@ -3,10 +3,9 @@
 exports[`Renders basic button 1`] = `
 <DocumentFragment>
   <button
-    aria-disabled="false"
     aria-label="basic button"
     class="pf-v6-c-button pf-m-primary"
-    data-ouia-component-id="OUIA-Generated-Button-primary-30"
+    data-ouia-component-id="OUIA-Generated-Button-primary-31"
     data-ouia-component-type="PF6/Button"
     data-ouia-safe="true"
     type="button"

packages/react-core/src/components/Card/__tests__/__snapshots__/CardHeader.test.tsx.snap

@@ -21,7 +21,6 @@ exports[`CardHeader onExpand adds the toggle button 1`] = `
       class="pf-v6-c-card__header-toggle"
     >
       <button
-        aria-disabled="false"
         class="pf-v6-c-button pf-m-plain"
         data-ouia-component-id="OUIA-Generated-Button-plain-1"
         data-ouia-component-type="PF6/Button"

packages/react-core/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyButton.test.tsx.snap

@@ -28,7 +28,6 @@ exports[`Matches snapshot 1`] = `
       onTooltipHidden clicker
     </a>
     <button
-      aria-disabled="false"
       aria-label="Copyable input"
       aria-labelledby="button-id text-id"
       class="pf-v6-c-button pf-m-control"