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

Accessibility: Improve a11y in DataLinkSuggestions (#59569)

Browse Source 
DataLinkSuggestions: Add role + ignore keyboard lint rule
This commit is contained in:
Ashley Harrison 2022-11-30 15:58:10 +00:00 committed by GitHub
parent 76a586195a
commit 000de83eb4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 5 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/grafana-ui/src/components/DataLinks/DataLinkSuggestions.tsx
View File

@ -69,7 +69,7 @@ export const DataLinkSuggestions: React.FC<DataLinkSuggestionsProps> = ({ sugges
const styles = useStyles2(getStyles); const styles = useStyles2(getStyles);
return ( return (
<div ref={ref} className={styles.wrapper}> <div role="menu" ref={ref} className={styles.wrapper}>
{Object.keys(groupedSuggestions).map((key, i) => { {Object.keys(groupedSuggestions).map((key, i) => {
const indexOffset = const indexOffset =
i === 0 i === 0
@ -116,7 +116,11 @@ const DataLinkSuggestionsList: React.FC<DataLinkSuggestionsListProps> = React.me
renderItem={(item, index) => { renderItem={(item, index) => {
const isActive = index + activeIndexOffset === activeIndex; const isActive = index + activeIndexOffset === activeIndex;
return ( return (
// key events are handled by DataLinkInput
// eslint-disable-next-line jsx-a11y/click-events-have-key-events
<div <div
role="menuitem"
tabIndex={0}
className={cx(styles.item, isActive && styles.activeItem)} className={cx(styles.item, isActive && styles.activeItem)}
ref={isActive ? selectedRef : undefined} ref={isActive ? selectedRef : undefined}
onClick={() => { onClick={() => {