chore: Provide correct role and href for disabled link buttons (#3685)

Author: taheramr

src/button/__tests__/button.test.tsx

@@ -116,6 +116,8 @@ describe('Button Component', () => {
       expect(wrapper.getElement()).toHaveClass(styles.disabled);
       expect(wrapper.getElement()).not.toHaveAttribute('disabled');
       expect(wrapper.getElement()).toHaveAttribute('aria-disabled');
+      expect(wrapper.getElement()).toHaveAttribute('role', 'link');
+      expect(wrapper.getElement()).not.toHaveAttribute('href');
       expect(wrapper.isDisabled()).toBe(true);
     });
 
@@ -552,6 +554,8 @@ describe('Button Component', () => {
     test('adds a tab index -1 to the link button', () => {
       const wrapper = renderButton({ loading: true, href: 'https://amazon.com' });
       expect(wrapper.getElement()).toHaveAttribute('tabIndex', '-1');
+      expect(wrapper.getElement()).not.toHaveAttribute('href');
+      expect(wrapper.getElement()).toHaveAttribute('role', 'link');
     });
   });
 
@@ -619,6 +623,18 @@ describe('Button Component', () => {
       expect(wrapper.getElement()).toHaveAttribute('href', 'https://amazon.com');
     });
 
+    test('removes href attribute and adds role="link" when button is disabled', () => {
+      const wrapper = renderButton({ href: 'https://amazon.com', disabled: true });
+      expect(wrapper.getElement()).not.toHaveAttribute('href');
+      expect(wrapper.getElement()).toHaveAttribute('role', 'link');
+    });
+
+    test('removes href attribute and adds role="link" when button is loading', () => {
+      const wrapper = renderButton({ href: 'https://amazon.com', loading: true });
+      expect(wrapper.getElement()).not.toHaveAttribute('href');
+      expect(wrapper.getElement()).toHaveAttribute('role', 'link');
+    });
+
     test.each(buttonTargetExpectations)('"target" property %s', (props, expectation) => {
       const wrapper = renderButton({ ...props });
       if (expectation) {

src/button/__tests__/internal.test.tsx

@@ -80,6 +80,18 @@ describe('Analytics', () => {
     );
   });
 
+  test('does not send an externalLinkInteracted metric when button is disabled', () => {
+    const { container } = render(
+      <AnalyticsFunnel funnelType="single-page" optionalStepNumbers={[]} totalFunnelSteps={1}>
+        <Button iconName="external" href="https://example.com" disabled={true} />
+      </AnalyticsFunnel>
+    );
+    act(() => void jest.runAllTimers());
+    createWrapper(container).findButton()!.click();
+
+    expect(FunnelMetrics.externalLinkInteracted).not.toHaveBeenCalled();
+  });
+
   test('does not send an externalLinkInteracted metric when the button is not a link', () => {
     const onClick = jest.fn();
     const { container } = render(
@@ -115,6 +127,18 @@ describe('Analytics', () => {
     );
   });
 
+  test('does not send an externalLinkInteracted metric when button with target=_blank is disabled', () => {
+    const { container } = render(
+      <AnalyticsFunnel funnelType="single-page" optionalStepNumbers={[]} totalFunnelSteps={1}>
+        <Button target="_blank" href="https://example.com" disabled={true} />
+      </AnalyticsFunnel>
+    );
+    act(() => void jest.runAllTimers());
+    createWrapper(container).findButton()!.click();
+
+    expect(FunnelMetrics.externalLinkInteracted).not.toHaveBeenCalled();
+  });
+
   test('does not send an externalLinkInteracted metric for non-external links', () => {
     const { container } = render(
       <AnalyticsFunnel funnelType="single-page" optionalStepNumbers={[]} totalFunnelSteps={1}>

src/button/internal.tsx

@@ -330,11 +330,22 @@ export const InternalButton = React.forwardRef(
         : undefined;
 
     if (isAnchor) {
+      const getAnchorTabIndex = () => {
+        if (isNotInteractive) {
+          // If disabled with a reason, make it focusable so users can access the tooltip
+          // Otherwise, resolve to the default button props tabIndex.
+          return disabledReason ? 0 : buttonProps.tabIndex;
+        }
+        return buttonProps.tabIndex;
+      };
+
       return (
         <>
           <a
             {...buttonProps}
-            href={href}
+            href={isNotInteractive ? undefined : href}
+            role={isNotInteractive ? 'link' : undefined}
+            tabIndex={getAnchorTabIndex()}
             target={target}
             // security recommendation: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target
             rel={rel ?? (target === '_blank' ? 'noopener noreferrer' : undefined)}