Matarialize中文技术社区-使用 Material UI 的 Data Grid

使用 Material UI 的 Data Grid - 可访问性（Accessibility）功能

smartzeng 2024-10-09 21:35:44

32 Accessibility 专栏

可访问性（Accessibility）是构建现代 Web 应用时必须考虑的重要因素。Material UI 的 Data Grid 组件通过多种方式支持可访问性，确保所有用户，包括那些使用辅助技术的用户，都能有效地与数据表格进行交互。本文将深入探讨如何使用 Data Grid 的可访问性功能，包括详细的使用说明、属性、方法，以及与其他组件的结合使用，提供丰富的示例代码。

1. 安装 Material UI 和 Data Grid

在开始之前，确保你已安装 Material UI 和 Data Grid。可以使用以下命令进行安装：

npm install @mui/material @mui/x-data-grid

还需要安装 @mui/icons-material，以便使用图标。

npm install @mui/icons-material

2. Data Grid 的基础用法

在介绍可访问性之前，我们先创建一个简单的 Data Grid 示例。以下代码展示了一些用户的基本信息：

import React from 'react';
import { DataGrid } from '@mui/x-data-grid';

const columns = [
  { field: 'id', headerName: 'ID', width: 90 },
  { field: 'firstName', headerName: 'First Name', width: 150 },
  { field: 'lastName', headerName: 'Last Name', width: 150 },
  { field: 'age', headerName: 'Age', type: 'number', width: 110 },
];

const rows = [
  { id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 },
  { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42 },
  { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 45 },
  { id: 4, lastName: 'Stark', firstName: 'Arya', age: 16 },
  { id: 5, lastName: 'Targaryen', firstName: 'Daenerys', age: null },
];

export default function BasicDataGrid() {
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid rows={rows} columns={columns} pageSize={5} />
    </div>
  );
}

3. 可访问性支持

3.1 ARIA 属性

Material UI 的 Data Grid 自动为每个单元格、行和列添加 ARIA 属性，以帮助屏幕阅读器识别和读取内容。可以使用以下属性来增强可访问性：

aria-labelledby: 将表格的标题与表格本身关联，提供上下文信息。
role: 指定表格的角色，确保正确地传达其功能。

3.2 键盘导航

Data Grid 支持完整的键盘导航，允许用户通过键盘操作进行选择、编辑和删除等操作。用户可以使用以下键：

方向键: 上下左右移动光标。
Enter: 编辑选中的单元格。
Space: 选择或取消选择当前行。

以下是一个启用可访问性的完整示例：

import React from 'react';
import { DataGrid } from '@mui/x-data-grid';

const columns = [
  { field: 'id', headerName: 'ID', width: 90 },
  { field: 'firstName', headerName: 'First Name', width: 150 },
  { field: 'lastName', headerName: 'Last Name', width: 150 },
  { field: 'age', headerName: 'Age', type: 'number', width: 110 },
];

const rows = [
  { id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 },
  { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42 },
  { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 45 },
  { id: 4, lastName: 'Stark', firstName: 'Arya', age: 16 },
  { id: 5, lastName: 'Targaryen', firstName: 'Daenerys', age: null },
];

export default function AccessibleDataGrid() {
  return (
    <div role="table" aria-labelledby="data-grid-title" style={{ height: 400, width: '100%' }}>
      <h2 id="data-grid-title">User Information</h2>
      <DataGrid rows={rows} columns={columns} pageSize={5} />
    </div>
  );
}

在这个示例中，我们为 Data Grid 添加了一个标题，并使用 role="table" 和 aria-labelledby 属性提供更多信息。

4. 结合其他组件的可访问性

4.1 使用筛选功能

结合筛选组件，我们可以增强 Data Grid 的可访问性。例如，使用 Material UI 的 TextField 进行筛选，确保用户可以轻松访问和使用筛选功能：

import React, { useState } from 'react';
import { DataGrid } from '@mui/x-data-grid';
import TextField from '@mui/material/TextField';

const AccessibleDataGridWithFilter = () => {
  const [filterText, setFilterText] = useState('');

  const filteredRows = rows.filter((row) =>
    `${row.firstName} ${row.lastName}`
      .toLowerCase()
      .includes(filterText.toLowerCase())
  );

  return (
    <div role="table" aria-labelledby="data-grid-title" style={{ height: 600, width: '100%' }}>
      <h2 id="data-grid-title">User Information</h2>
      <TextField
        label="Search"
        variant="outlined"
        onChange={(e) => setFilterText(e.target.value)}
        aria-label="Search users"
      />
      <DataGrid
        rows={filteredRows}
        columns={columns}
        pageSize={5}
        aria-labelledby="data-grid-title"
      />
    </div>
  );
};

在这个示例中，我们添加了 aria-label 属性，以提高筛选框的可访问性。

4.2 使用按钮和交互组件

在 Data Grid 中使用按钮或其他交互组件时，确保这些组件也是可访问的。例如，如果需要在每行中添加一个“删除”按钮，可以这样实现：

import React from 'react';
import { DataGrid } from '@mui/x-data-grid';
import Button from '@mui/material/Button';

const columns = [
  { field: 'id', headerName: 'ID', width: 90 },
  { field: 'firstName', headerName: 'First Name', width: 150 },
  { field: 'lastName', headerName: 'Last Name', width: 150 },
  { field: 'age', headerName: 'Age', type: 'number', width: 110 },
  {
    field: 'action',
    headerName: 'Action',
    width: 150,
    renderCell: (params) => (
      <Button
        variant="contained"
        color="secondary"
        onClick={() => handleDelete(params.row.id)}
        aria-label={`Delete ${params.row.firstName} ${params.row.lastName}`}
      >
        Delete
      </Button>
    ),
  },
];

const handleDelete = (id) => {
  console.log(`Deleted user with ID: ${id}`);
};

const AccessibleDataGridWithActions = () => {
  return (
    <div role="table" aria-labelledby="data-grid-title" style={{ height: 600, width: '100%' }}>
      <h2 id="data-grid-title">User Information</h2>
      <DataGrid rows={rows} columns={columns} pageSize={5} />
    </div>
  );
};

在这个示例中，我们为每一行添加了一个“删除”按钮，并使用 aria-label 属性提供更多上下文信息。

5. 属性和方法总结

5.1 主要属性

rows: 数据源，数组格式。
columns: 列定义，数组格式。
pageSize: 每页显示的行数。
autoHeight: 自动调整高度以适应行数，布尔值。
disableSelectionOnClick: 点击行时是否禁用选择，布尔值。
getRowId: 自定义行 ID 的方法。
aria-labelledby: 指定标签的 ID，增强可访问性。

5.2 主要方法

onSelectionModelChange: 行选择模型变化时触发的回调。
onPageChange: 页面变化时触发的回调。
onFilterModelChange: 过滤模型变化时触发的回调。

6. 完整示例

以下是一个结合可访问性、筛选和操作的完整示例：

import React, { useState } from 'react';
import { DataGrid } from '@mui/x-data-grid';
import TextField from '@mui/material/TextField';
import Button from '@mui/material/Button';

const columns = [
  { field: 'id', headerName: 'ID', width: 90 },
  { field: 'firstName', headerName: 'First Name', width: 150 },
  { field: 'lastName', headerName: 'Last Name', width: 150 },
  { field: 'age', headerName: 'Age', type: 'number', width: 110 },
  {
    field: 'action',
    headerName: 'Action',
    width: 150,
    renderCell: (params) => (
      <Button
        variant="contained"
        color="secondary"
        onClick={() => handleDelete(params.row.id)}
        aria-label={`Delete ${params.row.firstName} ${params.row.lastName}`}
      >
        Delete
      </Button>
    ),
  },
];

const rows = [
  { id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 },
  { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42 },
  { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 45 },
  { id: 4, lastName: 'Stark', firstName: 'Arya', age: 16 },
  { id: 5, lastName: 'Targaryen', firstName: 'Daenerys', age: null },
];

const handleDelete = (id) => {
  console.log(`Deleted user with ID: ${id}`);
};

const AccessibleDataGridWithFilterAndActions = () => {
  const [filterText, setFilterText] = useState('');

  const filteredRows = rows.filter((row) =>
    `${row.firstName} ${row.lastName}`
      .toLowerCase()
      .includes(filterText.toLowerCase())
  );

  return (
    <div role="table" aria-labelledby="data-grid-title" style={{ height: 600, width: '100%' }}>
      <h2 id="data-grid-title">User Information</h2>
      <TextField
        label="Search"
        variant="outlined"
        onChange={(e) => setFilterText(e.target.value)}
        aria-label="Search users"
      />
      <DataGrid
        rows={filteredRows}
        columns={columns}
        pageSize={5}
        aria-labelledby="data-grid-title"
      />
    </div>
  );
};

export default AccessibleDataGridWithFilterAndActions;

结论

在构建现代 Web 应用时，考虑可访问性是至关重要的。Material UI 的 Data Grid 组件通过自动化的 ARIA 属性、键盘导航支持以及与其他组件的结合使用，为开发人员提供了增强可访问性的工具。希望本文能帮助你更好地理解和应用 Data Grid 的可访问性功能，以提升你的应用对所有用户的友好性。

评论区