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

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
1 changed files with 5 additions and 1 deletions
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={() => {