Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: adds aria label to datagrid toolbar #4348

Merged
merged 3 commits into from
Feb 16, 2024
Merged

fix: adds aria label to datagrid toolbar #4348

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1d92393
fix: add aria label to datagrid toolbar
davidmenendez Feb 16, 2024
46bbee7
chore: format
davidmenendez Feb 16, 2024
0ad8a00
fix: prop name change
davidmenendez Feb 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion packages/ibm-products/src/components/Datagrid/Datagrid.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -496,7 +496,12 @@ export const BatchActions = () => {
useStickyColumn
);

return <Datagrid datagridState={{ ...datagridState }} />;
return (
<Datagrid
datagridState={{ ...datagridState }}
ariaToolbarLabel="batch actions toolbar"
/>
);
};

export const DisableSelectRow = () => {
Expand Down
8 changes: 7 additions & 1 deletion packages/ibm-products/src/components/Datagrid/Datagrid/Datagrid.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ const componentName = 'Datagrid';
* The `Datagrid` component is an extension of Carbon's DataTable component. At the most basic level, the `Datagrid` component takes in columns and rows and renders a data table. There is a set of data table extensions which this component provides support for, these can be found [here](https://pages.github.ibm.com/cdai-design/pal/components/data-table/overview/). This component is data driven and allows you to choose what pieces will be included based on the hooks/plugins that are provided.
*/
export let Datagrid = React.forwardRef(
({ datagridState, title, ...rest }, ref) => {
({ datagridState, title, ariaToolbarLabel, ...rest }, ref) => {
if (!datagridState) {
pconsole.warn(
'Datagrid was not passed datagridState which is required to render this component.'
Expand All @@ -47,6 +47,7 @@ export let Datagrid = React.forwardRef(
const props = {
title,
datagridState,
ariaToolbarLabel,
};

return (
Expand Down Expand Up @@ -92,6 +93,11 @@ Datagrid = pkg.checkComponentEnabled(Datagrid, componentName);
Datagrid.displayName = componentName;

Datagrid.propTypes = {
/**
* Specify a label to be read by screen readers on the container node
* 'aria-label' of the TableToolbar component.
*/
ariaToolbarLabel: PropTypes.string,
/**
* The data grid state, much of it being supplied by the useDatagrid hook
*/
Expand Down
8 changes: 6 additions & 2 deletions packages/ibm-products/src/components/Datagrid/Datagrid/DatagridContent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ import { clearSingleFilter } from './addons/Filtering/FilterProvider';
const blockClass = `${pkg.prefix}--datagrid`;
const gcClass = `${blockClass}__grid-container`;

export const DatagridContent = ({ datagridState, title }) => {
export const DatagridContent = ({ datagridState, title, ariaToolbarLabel }) => {
const { state: inlineEditState, dispatch } = useContext(InlineEditContext);
const { filterTags, EventEmitter, panelOpen } = useContext(FilterContext);
const { activeCellId, gridActive, editId } = inlineEditState;
Expand Down Expand Up @@ -191,7 +191,10 @@ export const DatagridContent = ({ datagridState, title }) => {
title={gridTitle}
description={gridDescription}
>
<DatagridToolbar {...datagridState} />
<DatagridToolbar
{...datagridState}
ariaToolbarLabel={ariaToolbarLabel}
/>
<div
className={cx(`${blockClass}__table-container`, {
[`${blockClass}__table-container--filter-open`]: panelOpen,
Expand Down Expand Up @@ -233,6 +236,7 @@ export const DatagridContent = ({ datagridState, title }) => {
};

DatagridContent.propTypes = {
ariaToolbarLabel: PropTypes.string,
datagridState: PropTypes.shape({
getTableProps: PropTypes.func,
getFilterFlyoutProps: PropTypes.func,
Expand Down
13 changes: 9 additions & 4 deletions packages/ibm-products/src/components/Datagrid/Datagrid/DatagridToolbar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
*/

import React, { useEffect, useRef, useState } from 'react';
import PropTypes from 'prop-types';
import {
TableToolbar,
TableBatchActions,
Expand Down Expand Up @@ -127,7 +128,7 @@ const DatagridBatchActionsToolbar = (datagridState, width, ref) => {
dispatch,
rows: [],
getRowId,
isChecked: false
isChecked: false,
});
toggleAllRowsSelected(false);
setGlobalFilter(null);
Expand Down Expand Up @@ -180,7 +181,7 @@ const DatagridBatchActionsToolbar = (datagridState, width, ref) => {
);
};

const DatagridToolbar = (datagridState) => {
const DatagridToolbar = ({ ariaToolbarLabel, ...datagridState }) => {
const ref = useRef(null);
const { width } = useResizeObserver(ref);
const { DatagridActions, DatagridBatchActions, batchActions, rowSize } =
Expand All @@ -193,20 +194,24 @@ const DatagridToolbar = (datagridState) => {
ref={ref}
className={cx([blockClass, `${blockClass}--${getRowHeight}`])}
>
<TableToolbar>
<TableToolbar aria-label={ariaToolbarLabel}>
{DatagridActions && <DatagridActions {...datagridState} />}
{DatagridBatchActionsToolbar &&
DatagridBatchActionsToolbar(datagridState, width, ref)}
</TableToolbar>
</div>
) : DatagridActions ? (
<div className={blockClass}>
<TableToolbar>
<TableToolbar aria-label={ariaToolbarLabel}>
{DatagridActions && <DatagridActions {...datagridState} />}
{DatagridBatchActions && DatagridBatchActions(datagridState)}
</TableToolbar>
</div>
) : null;
};

DatagridToolbar.propTypes = {
ariaToolbarLabel: PropTypes.string,
};

export default DatagridToolbar;
5 changes: 4 additions & 1 deletion packages/ibm-products/src/components/Datagrid/Datagrid/addons/stateReducer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,10 @@ export const stateReducer = (newState, action) => {
const newData = { ...newState.selectedRowData };
const dataWithRemovedRow = Object.fromEntries(
Object.entries(newData).filter(([key]) => {
return parseInt(key) !== parseInt(getRowId(rowData.original, rowData.index));
return (
parseInt(key) !==
parseInt(getRowId(rowData.original, rowData.index))
);
})
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not seeing any real changes. It looks like you saved this page, and it reformatted it for you.

);
return {
Expand Down
9 changes: 6 additions & 3 deletions packages/ibm-products/src/components/Datagrid/utils/makeData.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,8 @@ const getRandomInteger = (min, max, decimalPlaces) => {
};

export const makeData = (...lens) => {
const config = lens.filter(a => typeof a === 'object')[0];
const filteredData = lens.filter(a => typeof a === 'number');
const config = lens.filter((a) => typeof a === 'object')[0];
const filteredData = lens.filter((a) => typeof a === 'number');
Comment on lines +27 to +28
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not seeing any real changes. It looks like you saved this page, and it reformatted it for you.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

correct

const makeDataLevel = (depth = 0) => {
const len = filteredData[depth];
return range(len).map((index) => ({
Expand Down Expand Up @@ -147,7 +147,10 @@ const newPerson = (index, config) => {
bonus: `$\r${getRandomInteger(100, 500, 2)}`,
passwordStrength: getPasswordStrength(),
doc_link: renderDocLink(),
slug: config?.enableAIRow && (index === 1 || index === 3 || index === 4) && <ExampleSlug align={config?.slugAlign} />
slug: config?.enableAIRow &&
(index === 1 || index === 3 || index === 4) && (
<ExampleSlug align={config?.slugAlign} />
),
};
};

Expand Down
7 changes: 5 additions & 2 deletions packages/ibm-products/src/components/FullPageError/FullPageError.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,15 +38,18 @@ errors, and not caused by server connectivity issues.

### 403 variant

Display an Access Denied (403) error message when the user lacks permission to access the page or data, or when login is required.
Display an Access Denied (403) error message when the user lacks permission to
access the page or data, or when login is required.

<Canvas>
<Story id={getStoryId(FullPageError.displayName, 'full-page-error-403')} />
</Canvas>

### 404 variant

Show a Page Not Found (404) error message when the requested page cannot be located on the server, typically due to outdated bookmarks, mistyped URLs, or broken links.
Show a Page Not Found (404) error message when the requested page cannot be
located on the server, typically due to outdated bookmarks, mistyped URLs, or
broken links.

<Canvas>
<Story id={getStoryId(FullPageError.displayName, 'full-page-error-404')} />
Expand Down
Loading