github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 09:48:58 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Accessibility] Loading indicator aria labels (#166391)

Browse source 
## Summary

Closes https://github.com/elastic/kibana/issues/153597
In full screen, the loading indicator fails a11y tests. By removing the
aria-label and aria-hidden attributes, this allows the validation to
pass.
https://github.com/elastic/kibana/issues/153597#issuecomment-1482805134

This PR also introduces optional props for max and value props on the
`EuiProgress` component to provide consumers of the component greater
ability to define how the component is being used.
[Information](https://eui.elastic.co/#/display/progress#progress-with-values)
on the max and value props can be found in the [EUI
docs](https://eui.elastic.co/#/display/progress#progress-with-values).

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Rachel Shen 2023-09-28 13:54:56 -06:00 • committed by GitHub
parent 05a7d30072
commit 424dec613f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 4 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

8
packages/core/chrome/core-chrome-browser-internal/src/ui/loading_indicator.tsx
View file

@ -19,6 +19,8 @@ export interface LoadingIndicatorProps {
loadingCount$: ReturnType<HttpStart['getLoadingCount$']>;
showAsBar?: boolean;
customLogo?: string;
maxAmount?: number;
valueAmount?: string | number;
}
export class LoadingIndicator extends React.Component<LoadingIndicatorProps, { visible: boolean }> {
@ -62,8 +64,6 @@ export class LoadingIndicator extends React.Component<LoadingIndicatorProps, { v
? 'globalLoadingIndicator'
: 'globalLoadingIndicator-hidden';
const ariaHidden = !this.state.visible;
const ariaLabel = i18n.translate('core.ui.loadingIndicatorAriaLabel', {
defaultMessage: 'Loading content',
});
@ -107,8 +107,8 @@ export class LoadingIndicator extends React.Component<LoadingIndicatorProps, { v
<EuiProgress
className={className}
data-test-subj={testSubj}
aria-hidden={ariaHidden}
aria-label={ariaLabel}
max={this.props.maxAmount}
value={this.props.valueAmount}
position="fixed"
color="accent"
size="xs"