Change href-or-on-click ESLint rule to require href with onClick

packages/eslint-plugin/src/rules/href_or_on_click.test.ts

@@ -54,15 +54,31 @@ ruleTester.run('href-or-on-click', HrefOnClick, {
     {
       code: dedent`
         module.export = () => (
-          <EuiButton onClick={executeAction} />
+          <EuiButton href="/" onClick={executeAction} />
         )
       `,
       languageOptions,
     },
     {
       code: dedent`
         module.export = () => (
-          <EuiButton onClick={() => executeAction()} />
+          <EuiButtonEmpty href="/" onClick={handleClick} />
+        )
+      `,
+      languageOptions,
+    },
+    {
+      code: dedent`
+        module.export = () => (
+          <EuiLink href="/home" onClick={handleClick} />
+        )
+      `,
+      languageOptions,
+    },
+    {
+      code: dedent`
+        module.export = () => (
+          <SomeOtherComponent onClick={handleClick} />
         )
       `,
       languageOptions,
@@ -73,7 +89,20 @@ ruleTester.run('href-or-on-click', HrefOnClick, {
     {
       code: dedent`
         module.export = () => (
-          <EuiButton href="/" onClick={fooBar} />
+          <EuiButton onClick={handleClick} />
+        )
+      `,
+      languageOptions,
+      errors: [
+        {
+          messageId: 'hrefOrOnClick',
+        },
+      ],
+    },
+    {
+      code: dedent`
+        module.export = () => (
+          <EuiButtonEmpty onClick={handleClick} />
         )
       `,
       languageOptions,
@@ -86,7 +115,7 @@ ruleTester.run('href-or-on-click', HrefOnClick, {
     {
       code: dedent`
         module.export = () => (
-          <EuiButtonEmpty href="/" onClick={fooBar} />
+          <EuiLink onClick={handleClick} />
         )
       `,
       languageOptions,
@@ -99,7 +128,7 @@ ruleTester.run('href-or-on-click', HrefOnClick, {
     {
       code: dedent`
         module.export = () => (
-          <EuiLink href="/" onClick={fooBar} />
+          <EuiBadge onClick={handleClick} />
         )
       `,
       languageOptions,

packages/eslint-plugin/src/rules/href_or_on_click.ts

@@ -22,16 +22,16 @@ export const HrefOnClick = ESLintUtils.RuleCreator.withoutDocs({
           return;
         }
 
-        // Check if the node has both `href` and `onClick` attributes
+        // Check if the node has `href` and `onClick` attributes
         const hasHref = node.attributes.some(
           (attr) => attr.type === 'JSXAttribute' && attr.name.name === 'href'
         );
         const hasOnClick = node.attributes.some(
           (attr) => attr.type === 'JSXAttribute' && attr.name.name === 'onClick'
         );
 
-        // Report an issue if both attributes are present
-        if (hasHref && hasOnClick) {
+        // Report an issue if `onClick` is present without `href`
+        if (hasOnClick && !hasHref) {
           context.report({
             node,
             messageId: 'hrefOrOnClick',
@@ -44,15 +44,15 @@ export const HrefOnClick = ESLintUtils.RuleCreator.withoutDocs({
     };
   },
   meta: {
-    type: 'problem',
+    type: 'suggestion',
     docs: {
       description:
-        'Discourage supplying both `href` and `onClick` to certain EUI components.',
+        'Recommend including `href` alongside `onClick` on link-like EUI components so that Cmd+Click (open in new tab) works.',
     },
     schema: [],
     messages: {
       hrefOrOnClick:
-        '<{{name}}> supplied with both `href` and `onClick`; is this intentional? (Valid use cases include programmatic navigation via `onClick` while preserving "Open in new tab" style functionality via `href`.)',
+        '<{{name}}> has `onClick` but no `href`. Consider adding an `href` so that the component renders as a link and supports Cmd+Click / "Open in new tab".',
     },
   },
   defaultOptions: [],