Skip to content

Commit 6b8fa1d

Browse files
mgadewollmgadewoll
authored
[EuiDataGrid][A11y] Add contextual aria-label to column selector drag handle (#9282)
1 parent 827f7f2 commit 6b8fa1d

File tree

4 files changed

+87
-76
lines changed

4 files changed

+87
-76
lines changed

‎packages/eui/changelogs/upcoming/9282.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
**Accessibility**
2+
3+
- Improved the accessibility of `EuiDataGrid`s column selector drag handle buttons by ensuring distinctive labels
4+

‎packages/eui/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -147,7 +147,7 @@ exports[`useDataGridColumnSelector columnSelector renders a toolbar button/popov
147147
</div>
148148
<div
149149
aria-describedby="rfd-hidden-text-:r0:-hidden-text-:r1:"
150-
aria-label="Drag handle"
150+
aria-label="columnA drag handle"
151151
class="euiFlexItem emotion-euiFlexItem-growZero"
152152
data-rfd-drag-handle-context-id=":r0:"
153153
data-rfd-drag-handle-draggable-id="columnA"
@@ -220,7 +220,7 @@ exports[`useDataGridColumnSelector columnSelector renders a toolbar button/popov
220220
</div>
221221
<div
222222
aria-describedby="rfd-hidden-text-:r0:-hidden-text-:r1:"
223-
aria-label="Drag handle"
223+
aria-label="columnB drag handle"
224224
class="euiFlexItem emotion-euiFlexItem-growZero"
225225
data-rfd-drag-handle-context-id=":r0:"
226226
data-rfd-drag-handle-draggable-id="columnB"

‎packages/eui/src/components/datagrid/controls/column_selector.test.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -131,7 +131,7 @@ describe('useDataGridColumnSelector', () => {
131131
);
132132
fireEvent.click(getByTestSubject('dataGridColumnSelectorButton'));
133133
waitForEuiPopoverOpen();
134-
const getDragHandles = () => getAllByLabelText('Drag handle');
134+
const getDragHandles = () => getAllByLabelText(/drag handle/);
135135

136136
const columnA = getDragHandles()[0]!;
137137
expect(columnA).toHaveAttribute(

‎packages/eui/src/components/datagrid/controls/column_selector.tsx‎

Lines changed: 80 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -163,7 +163,7 @@ export const useDataGridColumnSelector = (
163163
const isDragEnabled = allowColumnReorder && columnSearchText.length === 0; // only allow drag-and-drop when not filtering columns
164164
const dragHandleAriaLabel = useEuiI18n(
165165
'euiColumnSelector.dragHandleAriaLabel',
166-
'Drag handle'
166+
'drag handle'
167167
);
168168

169169
const orderedVisibleColumns = useMemo(
@@ -235,84 +235,91 @@ export const useDataGridColumnSelector = (
235235
css={styles.euiDataGridColumnSelector}
236236
>
237237
<>
238-
{filteredColumns.map((id, index) => (
239-
<EuiDraggable
240-
key={id}
241-
draggableId={id}
242-
index={index}
243-
isDragDisabled={!isDragEnabled}
244-
hasInteractiveChildren
245-
customDragHandle
246-
usePortal
247-
>
248-
{(provided, state) => (
249-
<div
250-
css={styles.euiDataGridColumnSelector__item}
251-
className={classNames('euiDataGridColumnSelector__item', {
252-
'euiDataGridColumnSelector__item-isDragging':
253-
state.isDragging,
254-
})}
255-
data-test-subj={`dataGridColumnSelectorColumnItem-${id}`}
256-
>
257-
<EuiFlexGroup
258-
responsive={false}
259-
gutterSize="s"
260-
alignItems="center"
261-
>
262-
{allowColumnHiding && (
263-
<EuiFlexItem grow={false}>
264-
<EuiSwitch
265-
name={id}
266-
label={displayValues[id] || id}
267-
showLabel={false}
268-
checked={visibleColumnIds.has(id)}
269-
mini
270-
onChange={(event) => {
271-
const {
272-
target: { checked },
273-
} = event;
274-
const nextVisibleColumns = sortedColumns.filter(
275-
(columnId) =>
276-
checked
277-
? visibleColumnIds.has(columnId) ||
278-
id === columnId
279-
: visibleColumnIds.has(columnId) &&
280-
id !== columnId
281-
);
282-
setVisibleColumns(nextVisibleColumns);
283-
}}
284-
data-test-subj={`dataGridColumnSelectorToggleColumnVisibility-${id}`}
285-
/>
286-
</EuiFlexItem>
238+
{filteredColumns.map((id, index) => {
239+
const label = displayValues[id] || id;
240+
241+
return (
242+
<EuiDraggable
243+
key={id}
244+
draggableId={id}
245+
index={index}
246+
isDragDisabled={!isDragEnabled}
247+
hasInteractiveChildren
248+
customDragHandle
249+
usePortal
250+
>
251+
{(provided, state) => (
252+
<div
253+
css={styles.euiDataGridColumnSelector__item}
254+
className={classNames(
255+
'euiDataGridColumnSelector__item',
256+
{
257+
'euiDataGridColumnSelector__item-isDragging':
258+
state.isDragging,
259+
}
287260
)}
288-
<EuiFlexItem
289-
// This extra column name flex item affords the column more grabbable real estate
290-
// for mouse users, while hiding repetition for keyboard/screen reader users
291-
{...provided.dragHandleProps}
292-
aria-hidden
293-
tabIndex={-1}
261+
data-test-subj={`dataGridColumnSelectorColumnItem-${id}`}
262+
>
263+
<EuiFlexGroup
264+
responsive={false}
265+
gutterSize="s"
266+
alignItems="center"
294267
>
295-
<EuiText
296-
size="xs"
297-
className="euiDataGridColumnSelector__itemLabel"
298-
>
299-
{displayValues[id] || id}
300-
</EuiText>
301-
</EuiFlexItem>
302-
{isDragEnabled && (
268+
{allowColumnHiding && (
269+
<EuiFlexItem grow={false}>
270+
<EuiSwitch
271+
name={id}
272+
label={label}
273+
showLabel={false}
274+
checked={visibleColumnIds.has(id)}
275+
mini
276+
onChange={(event) => {
277+
const {
278+
target: { checked },
279+
} = event;
280+
const nextVisibleColumns =
281+
sortedColumns.filter((columnId) =>
282+
checked
283+
? visibleColumnIds.has(columnId) ||
284+
id === columnId
285+
: visibleColumnIds.has(columnId) &&
286+
id !== columnId
287+
);
288+
setVisibleColumns(nextVisibleColumns);
289+
}}
290+
data-test-subj={`dataGridColumnSelectorToggleColumnVisibility-${id}`}
291+
/>
292+
</EuiFlexItem>
293+
)}
303294
<EuiFlexItem
304-
grow={false}
295+
// This extra column name flex item affords the column more grabbable real estate
296+
// for mouse users, while hiding repetition for keyboard/screen reader users
305297
{...provided.dragHandleProps}
306-
aria-label={dragHandleAriaLabel}
298+
aria-hidden
299+
tabIndex={-1}
307300
>
308-
<EuiIcon type="grab" color="subdued" />
301+
<EuiText
302+
size="xs"
303+
className="euiDataGridColumnSelector__itemLabel"
304+
>
305+
{label}
306+
</EuiText>
309307
</EuiFlexItem>
310-
)}
311-
</EuiFlexGroup>
312-
</div>
313-
)}
314-
</EuiDraggable>
315-
))}
308+
{isDragEnabled && (
309+
<EuiFlexItem
310+
grow={false}
311+
{...provided.dragHandleProps}
312+
aria-label={`${label} ${dragHandleAriaLabel}`}
313+
>
314+
<EuiIcon type="grab" color="subdued" />
315+
</EuiFlexItem>
316+
)}
317+
</EuiFlexGroup>
318+
</div>
319+
)}
320+
</EuiDraggable>
321+
);
322+
})}
316323
</>
317324
</EuiDroppable>
318325
</EuiDragDropContext>

0 commit comments

Comments
 (0)