Skip to content

[EuiIconTip] Ensure aria-hidden attribute is suppressed to avoid axe (accessibility) errors in loading cycle #7400

@1Copenut

Description

@1Copenut

Is your feature request related to a problem? Please describe.
Our icon_tip.tsx file adds a tabindex=0 to the child EuiIcon on line 66. This is causing an accessibility violation in Kibana just now because icons with aria-hidden="true" have a tabindex that allows them to be reached by keyboard focus before the finished icon has been loaded.

Describe the solution you'd like
I'd like to find a way to signal to EuiIconTip that it should not be ARIA hidden by its nature. Maybe we could explicitly set the attribute undefined ?

<EuiToolTip position={position} delay={delay} {...rest}>
  <EuiIcon
+   aria-hidden={undefined}
    tabIndex={0}
    type={type}
    color={color}
    size={size}
    aria-label={ariaLabel}
    {...iconProps}
  />
</EuiToolTip>

Additional context
Kibana is tracking this error in elastic/kibana#172598. There may be others that haven't been discovered yet.

The Buildkite error logs showed this snippet, that suggests the scan is running while icons are not fully loaded:

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" class="euiIcon eui-alignTop css-1h8nuic-euiIcon-s-isLoading" tabindex="0" role="img" aria-label="Info" aria-hidden="true" data-is-loading="true"></svg>
Screenshot 2023-12-06 at 12 33 16 PM

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions