A11y: enable rule jsx-a11y/anchor-is-valid (#56690)

packages/jaeger-ui-components/src/TracePageHeader/TracePageHeader.tsx

@@ -83,6 +83,10 @@ const getStyles = (theme: GrafanaTheme2) => {
       &:hover small {
         text-decoration: none;
       }
+      /* Adapt styles when changing from a element into button */
+      background: transparent;
+      text-align: left;
+      border: none;
     `,
     TracePageHeaderDetailToggle: css`
       label: TracePageHeaderDetailToggle;
@@ -236,7 +240,8 @@ export default function TracePageHeader(props: TracePageHeaderEmbedProps) {
       <div className={styles.TracePageHeaderTitleRow}>
         {links && links.length > 0 && <ExternalLinks links={links} className={styles.TracePageHeaderBack} />}
         {canCollapse ? (
-          <a
+          <button
+            type="button"
             className={styles.TracePageHeaderTitleLink}
             onClick={onSlimViewClicked}
             role="switch"
@@ -249,7 +254,7 @@ export default function TracePageHeader(props: TracePageHeaderEmbedProps) {
               )}
             />
             {title}
-          </a>
+          </button>
         ) : (
           title
         )}

packages/jaeger-ui-components/src/TraceTimelineViewer/SpanBarRow.tsx

@@ -240,6 +240,9 @@ const getStyles = stylesFactory((theme: GrafanaTheme2) => {
       &:hover > small {
         color: ${autoColor(theme, '#000')};
       }
+      text-align: left;
+      background: transparent;
+      border: none;
     `,
     nameDetailExpanded: css`
       label: nameDetailExpanded;
@@ -437,7 +440,8 @@ export class UnthemedSpanBarRow extends React.PureComponent<SpanBarRowProps> {
               addHoverIndentGuideId={addHoverIndentGuideId}
               removeHoverIndentGuideId={removeHoverIndentGuideId}
             />
-            <a
+            <button
+              type="button"
               className={cx(styles.name, { [styles.nameDetailExpanded]: isDetailExpanded })}
               aria-checked={isDetailExpanded}
               title={labelDetail}
@@ -478,7 +482,7 @@ export class UnthemedSpanBarRow extends React.PureComponent<SpanBarRowProps> {
               </span>
               <small className={styles.endpointName}>{rpc ? rpc.operationName : operationName}</small>
               <small className={styles.endpointName}> {this.getSpanBarLabel(span, spanBarOptions, label)}</small>
-            </a>
+            </button>
             {createSpanLink &&
               (() => {
                 const links = createSpanLink(span);