root
/
grafana
mirror of https://github.com/grafana/grafana.git
1
0
Fork 0
Code Issues Actions 236 Packages Projects Releases Wiki Activity

Core: Implement aria attributes for query rows, improve a11y (#55563) 

* feat: add aria-expanded prop

* refactor: remove console.log()

* feat: add aria-controls

* refactor: add id to expendable section

* refactor: create unique id
This commit is contained in:
Laura Benz 2022-09-30 13:03:55 +02:00 committed by GitHub
parent 9ec7b202b6
commit fc6afc6b84
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 10 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/app/core/components/QueryOperationRow/QueryOperationRow.tsx
View File

@ -104,6 +104,7 @@ export const QueryOperationRow: React.FC<QueryOperationRowProps> = ({
<div ref={provided.innerRef} className={styles.wrapper} {...provided.draggableProps}>
<div>
<QueryOperationRowHeader
id={id}
actionsElement={actionsElement}
disabled={disabled}
draggable
@ -127,6 +128,7 @@ export const QueryOperationRow: React.FC<QueryOperationRowProps> = ({
return (
<div className={styles.wrapper}>
<QueryOperationRowHeader
id={id}
actionsElement={actionsElement}
disabled={disabled}
draggable={false}

4
public/app/core/components/QueryOperationRow/QueryOperationRowHeader.tsx
View File

@ -15,6 +15,7 @@ interface QueryOperationRowHeaderProps {
onRowToggle: () => void;
reportDragMousePosition: MouseEventHandler<HTMLDivElement>;
titleElement?: React.ReactNode;
id: string;
}
export const QueryOperationRowHeader: React.FC<QueryOperationRowHeaderProps> = ({
@ -27,6 +28,7 @@ export const QueryOperationRowHeader: React.FC<QueryOperationRowHeaderProps> = (
onRowToggle,
reportDragMousePosition,
titleElement,
id,
}: QueryOperationRowHeaderProps) => {
const styles = useStyles2(getStyles);
@ -40,6 +42,8 @@ export const QueryOperationRowHeader: React.FC<QueryOperationRowHeaderProps> = (
className={styles.collapseIcon}
onClick={onRowToggle}
type="button"
aria-expanded={isContentVisible}
aria-controls={id}
/>
{titleElement && (
<div className={styles.titleWrapper} onClick={onRowToggle} aria-label="Query operation row title">

7
public/app/features/query/components/QueryEditorRow.tsx
View File

@ -1,6 +1,6 @@
// Libraries
import classNames from 'classnames';
import { cloneDeep, filter, has, uniqBy } from 'lodash';
import { cloneDeep, filter, has, uniqBy, uniqueId } from 'lodash';
import pluralize from 'pluralize';
import React, { PureComponent, ReactNode } from 'react';
@ -451,6 +451,7 @@ export class QueryEditorRow<TQuery extends DataQuery> extends PureComponent<Prop
const { query, id, index, visualization } = this.props;
const { datasource, showingHelp, data } = this.state;
const isDisabled = query.hide;
const generatedUniqueId = uniqueId(id + '_');
const rowClasses = classNames('query-editor-row', {
'query-editor-row--disabled': isDisabled,
@ -467,14 +468,14 @@ export class QueryEditorRow<TQuery extends DataQuery> extends PureComponent<Prop
return (
<div aria-label={selectors.components.QueryEditorRows.rows}>
<QueryOperationRow
id={id}
id={generatedUniqueId}
draggable={true}
index={index}
headerElement={this.renderHeader}
actions={this.renderActions}
onOpen={this.onOpen}
>
<div className={rowClasses}>
<div className={rowClasses} id={generatedUniqueId}>
<ErrorBoundaryAlert>
{showingHelp && DatasourceCheatsheet && (
<OperationRowHelp>