revert: Revert "feat: Allow button native element attributes to be set (#3552)" (#3664)

Author: gethinwebster

src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap

@@ -4216,50 +4216,6 @@ It prevents users from clicking the button, but it can still be focused.",
       "optional": true,
       "type": "string",
     },
-    {
-      "description": "Attributes to add to the native \`a\` element (when \`href\` is provided).
-Some attributes will be automatically combined with internal attribute values:
-- \`className\` will be appended.
-- Event handlers will be chained, unless the default is prevented.
-
-We do not support using this attribute to apply custom styling.",
-      "inlineType": {
-        "name": "Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "children"> & Record<\`data-\${string}\`, string>",
-        "type": "union",
-        "values": [
-          "Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "children">",
-          "Record<\`data-\${string}\`, string>",
-        ],
-      },
-      "name": "nativeAnchorAttributes",
-      "optional": true,
-      "systemTags": [
-        "core",
-      ],
-      "type": "Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "children"> & Record<\`data-\${string}\`, string>",
-    },
-    {
-      "description": "Attributes to add to the native \`button\` element.
-Some attributes will be automatically combined with internal attribute values:
-- \`className\` will be appended.
-- Event handlers will be chained, unless the default is prevented.
-
-We do not support using this attribute to apply custom styling.",
-      "inlineType": {
-        "name": "Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> & Record<\`data-\${string}\`, string>",
-        "type": "union",
-        "values": [
-          "Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children">",
-          "Record<\`data-\${string}\`, string>",
-        ],
-      },
-      "name": "nativeButtonAttributes",
-      "optional": true,
-      "systemTags": [
-        "core",
-      ],
-      "type": "Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> & Record<\`data-\${string}\`, string>",
-    },
     {
       "description": "Adds a \`rel\` attribute to the link. By default, the component sets the \`rel\` attribute to "noopener noreferrer" when \`target\` is \`"_blank"\`.
 If the \`rel\` property is provided, it overrides the default behavior.",
@@ -20209,50 +20165,6 @@ It prevents users from clicking the button, but it can still be focused.",
       "optional": true,
       "type": "string",
     },
-    {
-      "description": "Attributes to add to the native \`a\` element (when \`href\` is provided).
-Some attributes will be automatically combined with internal attribute values:
-- \`className\` will be appended.
-- Event handlers will be chained, unless the default is prevented.
-
-We do not support using this attribute to apply custom styling.",
-      "inlineType": {
-        "name": "Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "children"> & Record<\`data-\${string}\`, string>",
-        "type": "union",
-        "values": [
-          "Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "children">",
-          "Record<\`data-\${string}\`, string>",
-        ],
-      },
-      "name": "nativeAnchorAttributes",
-      "optional": true,
-      "systemTags": [
-        "core",
-      ],
-      "type": "Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "children"> & Record<\`data-\${string}\`, string>",
-    },
-    {
-      "description": "Attributes to add to the native \`button\` element.
-Some attributes will be automatically combined with internal attribute values:
-- \`className\` will be appended.
-- Event handlers will be chained, unless the default is prevented.
-
-We do not support using this attribute to apply custom styling.",
-      "inlineType": {
-        "name": "Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> & Record<\`data-\${string}\`, string>",
-        "type": "union",
-        "values": [
-          "Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children">",
-          "Record<\`data-\${string}\`, string>",
-        ],
-      },
-      "name": "nativeButtonAttributes",
-      "optional": true,
-      "systemTags": [
-        "core",
-      ],
-      "type": "Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> & Record<\`data-\${string}\`, string>",
-    },
     {
       "defaultValue": "false",
       "description": "Sets the toggle button to pressed state.",

src/app-layout/visual-refresh/mobile-toolbar.tsx

@@ -69,7 +69,7 @@ export default function MobileToolbar() {
             className={testutilStyles['navigation-toggle']}
             ref={navigationRefs.toggle}
             disabled={hasDrawerViewportOverlay}
-            nativeButtonAttributes={{ 'aria-haspopup': navigationOpen ? undefined : true }}
+            __nativeAttributes={{ 'aria-haspopup': navigationOpen ? undefined : true }}
           />
         </nav>
       )}
@@ -97,7 +97,7 @@ export default function MobileToolbar() {
               onClick={() => handleToolsClick(true)}
               variant="icon"
               ref={toolsRefs.toggle}
-              nativeButtonAttributes={{ 'aria-haspopup': true }}
+              __nativeAttributes={{ 'aria-haspopup': true }}
             />
           </aside>
         )

src/app-layout/visual-refresh/trigger-button.tsx

@@ -67,7 +67,7 @@ function TriggerButton(
           badge={badge}
           onClick={onClick}
           variant="icon"
-          nativeButtonAttributes={{
+          __nativeAttributes={{
             'aria-haspopup': true,
             ...(testId && {
               'data-testid': testId,

src/attribute-editor/internal.tsx

@@ -152,8 +152,7 @@ const InternalAttributeEditor = React.forwardRef(
             // Using aria-disabled="true" and tabindex="-1" instead of "disabled"
             // because focus can be dynamically moved to this button by calling
             // `focusAddButton()` on the ref.
-            nativeButtonAttributes={disableAddButton ? { tabIndex: -1 } : {}}
-            __skipNativeAttributesWarnings={true}
+            __nativeAttributes={disableAddButton ? { tabIndex: -1 } : {}}
             __focusable={true}
             onClick={onAddButtonClick}
             formAction="none"

src/button-dropdown/internal.tsx

@@ -168,7 +168,7 @@ const InternalButtonDropdown = React.forwardRef(
       ariaLabel,
       ariaExpanded: canBeOpened && isOpen,
       formAction: 'none',
-      nativeButtonAttributes: {
+      __nativeAttributes: {
         'aria-haspopup': true,
       },
     };

src/button/__tests__/button.test.tsx

@@ -814,8 +814,8 @@ describe('table grid navigation support', () => {
   test('does not override explicit tab index with 0', () => {
     const { setCurrentTarget } = renderWithSingleTabStopNavigation(
       <div>
-        <InternalButton id="button1" nativeButtonAttributes={{ tabIndex: -2 }} />
-        <InternalButton id="button2" nativeButtonAttributes={{ tabIndex: -2 }} />
+        <InternalButton id="button1" __nativeAttributes={{ tabIndex: -2 }} />
+        <InternalButton id="button2" __nativeAttributes={{ tabIndex: -2 }} />
       </div>
     );
     setCurrentTarget(getButton('#button1'));

src/button/__tests__/internal.test.tsx

@@ -12,8 +12,22 @@ import { mockedFunnelInteractionId, mockFunnelMetrics } from '../../internal/ana
 
 import styles from '../../../lib/components/button/styles.css.js';
 
+test('specific properties take precedence over nativeAttributes', () => {
+  const { container } = render(
+    <InternalButton ariaLabel="property" __nativeAttributes={{ 'aria-label': 'native attribute' }} />
+  );
+  expect(container.querySelector('button')).toHaveAttribute('aria-label', 'property');
+});
+
+test('supports providing custom attributes', () => {
+  const { container } = render(<InternalButton __nativeAttributes={{ 'aria-hidden': 'true' }} />);
+  expect(container.querySelector('button')).toHaveAttribute('aria-hidden', 'true');
+});
+
 test('supports __iconClass property', () => {
-  const { container } = render(<InternalButton __iconClass="example-class" iconName="settings" />);
+  const { container } = render(
+    <InternalButton __iconClass="example-class" iconName="settings" __nativeAttributes={{ 'aria-expanded': 'true' }} />
+  );
   expect(container.querySelector(`button .${styles.icon}`)).toHaveClass('example-class');
 });
 

src/button/__tests__/native-attributes.test.tsx

@@ -42,8 +42,6 @@ const Button = React.forwardRef(
       form,
       i18nStrings,
       style,
-      nativeButtonAttributes,
-      nativeAnchorAttributes,
       ...props
     }: ButtonProps,
     ref: React.Ref<ButtonProps.Ref>
@@ -85,8 +83,6 @@ const Button = React.forwardRef(
         form={form}
         i18nStrings={i18nStrings}
         style={style}
-        nativeButtonAttributes={nativeButtonAttributes}
-        nativeAnchorAttributes={nativeAnchorAttributes}
         __injectAnalyticsComponentMetadata={true}
       >
         {children}

src/button/index.tsx

@@ -5,7 +5,6 @@ import React from 'react';
 import { IconProps } from '../icon/interfaces';
 import { BaseComponentProps } from '../internal/base-component';
 import { BaseNavigationDetail, CancelableEventHandler, ClickDetail as _ClickDetail } from '../internal/events';
-import { NativeAttributes } from '../internal/utils/with-native-attributes';
 
 export interface BaseButtonProps {
   /**
@@ -101,30 +100,6 @@ export interface BaseButtonProps {
    * @i18n
    */
   i18nStrings?: ButtonProps.I18nStrings;
-
-  /**
-   * Attributes to add to the native `button` element.
-   * Some attributes will be automatically combined with internal attribute values:
-   * - `className` will be appended.
-   * - Event handlers will be chained, unless the default is prevented.
-   *
-   * We do not support using this attribute to apply custom styling.
-   *
-   * @awsuiSystem core
-   */
-  nativeButtonAttributes?: NativeAttributes<React.ButtonHTMLAttributes<HTMLButtonElement>>;
-
-  /**
-   * Attributes to add to the native `a` element (when `href` is provided).
-   * Some attributes will be automatically combined with internal attribute values:
-   * - `className` will be appended.
-   * - Event handlers will be chained, unless the default is prevented.
-   *
-   * We do not support using this attribute to apply custom styling.
-   *
-   * @awsuiSystem core
-   */
-  nativeAnchorAttributes?: NativeAttributes<React.AnchorHTMLAttributes<HTMLAnchorElement>>;
 }
 
 export interface ButtonProps extends BaseComponentProps, BaseButtonProps {