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

packages/grafana-ui/src/components/Button/Button.tsx

@@ -302,3 +302,12 @@ export function getPropertiesForVariant(theme: GrafanaTheme2, variant: ButtonVar
       return getButtonVariantStyles(theme, theme.colors.primary, fill);
   }
 }
+
+export const clearButtonStyles = (theme: GrafanaTheme2) => {
+  return css`
+    background: transparent;
+    color: ${theme.colors.text.primary};
+    border: none;
+    padding: 0;
+  `;
+};

packages/grafana-ui/src/components/Segment/Segment.story.tsx

@@ -7,9 +7,9 @@ import { Segment, Icon, SegmentSection } from '@grafana/ui';
 import { SegmentSyncProps } from './Segment';
 
 const AddButton = (
-  <a className="gf-form-label query-part">
+  <span className="gf-form-label query-part">
     <Icon name="plus-circle" />
-  </a>
+  </span>
 );
 
 const toOption = (value: any) => ({ label: value, value: value });

packages/grafana-ui/src/components/Segment/SegmentAsync.story.tsx

@@ -9,9 +9,9 @@ import { SegmentAsync, Icon, SegmentSection } from '@grafana/ui';
 import { SegmentAsyncProps } from './SegmentAsync';
 
 const AddButton = (
-  <a className="gf-form-label query-part">
+  <span className="gf-form-label query-part">
     <Icon name="plus" />
-  </a>
+  </span>
 );
 
 const toOption = (value: any) => ({ label: value, value: value });

packages/grafana-ui/src/components/Segment/SegmentInput.story.tsx

@@ -87,14 +87,15 @@ export const InputWithAutoFocus = () => {
       {inputComponents.map((InputComponent: any, i: number) => (
         <InputComponent initialValue="test" key={i} />
       ))}
-      <a
+      <button
+        type="button"
         className="gf-form-label query-part"
         onClick={() => {
           setInputComponents([...inputComponents, InputComponent]);
         }}
       >
         <Icon name="plus" />
-      </a>
+      </button>
     </SegmentFrame>
   );
 };

packages/grafana-ui/src/components/index.ts

@@ -191,7 +191,7 @@ export { RangeSlider } from './Slider/RangeSlider';
 export { Form } from './Forms/Form';
 export { sharedInputStyle } from './Forms/commonStyles';
 export { InputControl } from './InputControl';
-export { Button, LinkButton, type ButtonVariant, ButtonGroup, type ButtonProps } from './Button';
+export { Button, LinkButton, type ButtonVariant, ButtonGroup, type ButtonProps, clearButtonStyles } from './Button';
 export { ToolbarButton, ToolbarButtonRow } from './ToolbarButton';
 export { ValuePicker } from './ValuePicker/ValuePicker';
 export { fieldMatchersUI } from './MatchersUI/fieldMatchersUI';

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);