IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Alerting: Allow to tab onto elements for a11y (#67684)

Browse Source 
* Make search popover be tabbed onto

Co-Authored-By: Sonia Aguilar <33540275+soniaAguilarPeiron@users.noreply.github.com>

* Allow tokens in rule description to be tabbed onto

Co-Authored-By: Sonia Aguilar <33540275+soniaAguilarPeiron@users.noreply.github.com>

---------

Co-authored-by: Sonia Aguilar <33540275+soniaAguilarPeiron@users.noreply.github.com>
This commit is contained in:
Virginia Cepeda 2023-05-03 09:37:42 -03:00 committed by GitHub
parent 04f1e344b1
commit 471a03328b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 7 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/app/features/alerting/unified/components/HoverCard.tsx
View File

@ -57,6 +57,8 @@ export const HoverCard = ({
wrapperClassName={classnames(styles.popover(arrow ? 1.25 : 0), wrapperClassName)}
onMouseLeave={hidePopper}
onMouseEnter={showPopper}
onFocus={showPopper}
onBlur={hidePopper}
referenceElement={popoverRef.current}
renderArrow={
arrow
@ -70,6 +72,8 @@ export const HoverCard = ({
ref: popoverRef,
onMouseEnter: showPopper,
onMouseLeave: hidePopper,
onFocus: showPopper,
onBlur: hidePopper,
})}
</>
);

4
public/app/features/alerting/unified/components/Tokenize.tsx
View File

@ -88,12 +88,12 @@ function Token({ content, description, type }: TokenProps) {
disabled={disableCard}
content={
<div className={styles.hoverTokenItem}>
<Badge text={<>{type}</>} color={'blue'} /> {description && <code>{description}</code>}
<Badge tabIndex={0} text={<>{type}</>} color={'blue'} /> {description && <code>{description}</code>}
</div>
}
>
<span>
<Badge className={styles.token} text={content} color={'blue'} />
<Badge tabIndex={0} className={styles.token} text={content} color={'blue'} />
</span>
</HoverCard>
);

2
public/app/features/alerting/unified/components/rules/RulesFilter.tsx
View File

@ -203,7 +203,7 @@ const RulesFilter = ({ onFilterCleared = () => undefined }: RulesFilerProps) =>
<Stack gap={0.5}>
<span>Search</span>
<HoverCard content={<SearchQueryHelp />}>
<Icon name="info-circle" size="sm" />
<Icon name="info-circle" size="sm" tabIndex={0} />
</HoverCard>
</Stack>
</Label>