Make citations keyboard-accessible

By switching from <x-link> to <button>, the action can now be
triggered via keyboard as well.

Bug: 393061324
Change-Id: I70ec9193c286be1c84ea136e2a5a001491169a0d
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6310995
Auto-Submit: Wolfgang Beyer <[email protected]>
Commit-Queue: Alex Rudenko <[email protected]>
Reviewed-by: Alex Rudenko <[email protected]>

Author: wolfib

front_end/panels/explain/components/ConsoleInsight.test.ts

@@ -363,7 +363,7 @@ describeWithEnvironment('ConsoleInsight', () => {
 
     assert.isFalse(details?.hasAttribute('open'));
     assert.isFalse(directCitations[0].classList.contains('highlighted'));
-    const link = markdownView!.shadowRoot?.querySelector('sup x-link') as HTMLElement;
+    const link = markdownView!.shadowRoot?.querySelector('sup button') as HTMLElement;
     link.click();
     assert.isTrue(details?.hasAttribute('open'));
     assert.isTrue(directCitations[0].classList.contains('highlighted'));

front_end/ui/components/markdown_view/MarkdownView.ts

@@ -352,11 +352,11 @@ export class MarkdownInsightRenderer extends MarkdownLitRenderer {
         </devtools-code-block>`;
       case 'citation':
         // clang-format off
-        return html`<sup><x-link
-            class="devtools-link"
+        return html`<sup><button
+            class="citation"
             jslog=${VisualLogging.link('inline-citation').track({click: true})}
             @click=${this.#citationClickHandler.bind(this, Number(token.linkText))}
-          >[${token.linkText}]</x-link></sup>`;
+          >[${token.linkText}]</button></sup>`;
         // clang-format on
     }
     return super.templateForToken(token as Marked.Marked.MarkedToken);

front_end/ui/components/markdown_view/markdownView.css

@@ -82,11 +82,16 @@ devtools-code-block {
   margin-bottom: var(--sys-size-5);
 }
 
-.devtools-link {
-  color: var(--sys-color-primary);
-  outline-offset: 2px;
+.citation {
   text-decoration: underline;
+  color: var(--sys-color-primary);
+  background-color: transparent;
   cursor: pointer;
+  outline-offset: var(--sys-size-2);
+  border: none;
+  padding: 0;
+  font-size: 10px;
+  font-family: var(--default-font-family);
 }
 
 h1.insight, h2.insight, h3.insight, h4.insight, h5.insight, h6.insight {