Accessibility: Improved keyboard accessibility in BarGauge

[lpskdl]

What is this feature?

• use button instead of div
• reset default button styles

Why do we need this feature?

• better keyboard accessibility

Who is this feature for?

• everyone

Which issue(s) does this PR fix?:

Fixes #59284

Special notes for your reviewer:

[Clarity-89]

Suggested change

	<button style={styles.wrapper} onClick={onClick} className={cx(clearButtonStyles(theme), className)}>
	<button type='button' style={styles.wrapper} onClick={onClick} className={cx(clearButtonStyles(theme), className)}>

This needs to have button type to prevent the default submit behavior in forms, quite unlikely for this specific component, but better be safe.

[Clarity-89]

Suggested change

	<button style={styles.wrapper} onClick={onClick} className={cx(clearButtonStyles(theme), className)}>
	<button type='button' style={styles.wrapper} onClick={onClick} className={cx(clearButtonStyles(theme), className)}>

[ashharrison90]

ok couple of things to tackle here:

since onClick is optional, this should only be a button if there's an onClick.

so the render function should probably look something like:

    if (onClick) {
      return (
        <button type="button" style={styles.wrapper} onClick={onClick} className={cx(clearButtonStyles(theme), className)}>
          {title && <div style={styles.title}>{title}</div>}
          {this.renderBarAndValue()}
        </button>
      );
    }

    return (
      <div style={styles.wrapper} className={className}>
        {title && <div style={styles.title}>{title}</div>}
        {this.renderBarAndValue()}
      </div>
    );

once we've done that, there's a couple of other issues:

• focus styles aren't appearing when tabbing (they're cut off by the outer panel having overflow: hidden)
• panel links menu appears in the wrong place when using the keyboard (this isn't as much of a big deal tbh...)

[JoaoSilvaGrafana]

We only want it to be a button when there is an onClick action right? Because with these changes, even if there is no onClick, you can tab into the BarGauge and when you hover over it there is a pointer icon.

[grafanabot]

This pull request was removed from the 9.3.0 milestone because 9.3.0 is currently being released.

[grafanabot]

This pull request was removed from the 9.3.1 milestone because 9.3.1 is currently being released.

[mckn]

LGTM!

[ashharrison90]

think we need a different solution 🤔 not sure what tho... i'll do some digging

[ashharrison90]

great job 🙌