diff --git a/packages/eui/changelogs/upcoming/9254.md b/packages/eui/changelogs/upcoming/9254.md new file mode 100644 index 00000000000..fcdd7b2d237 --- /dev/null +++ b/packages/eui/changelogs/upcoming/9254.md @@ -0,0 +1,3 @@ +**Accessibility** + +- Improved `EuiBasicTable` accessibility by ensuring a fallback `tableCaption` is applied if none is provided diff --git a/packages/eui/src/components/basic_table/basic_table.tsx b/packages/eui/src/components/basic_table/basic_table.tsx index 7439747624b..0c0b469aa41 100644 --- a/packages/eui/src/components/basic_table/basic_table.tsx +++ b/packages/eui/src/components/basic_table/basic_table.tsx @@ -235,7 +235,7 @@ interface BasicTableProps */ error?: string; /** - * Describes the content of the table. If not specified, the caption will be "This table contains {itemCount} rows." + * Provides a description of the table’s content. If no description is provided, the table will default to the name Data Table. */ tableCaption?: string; /** @@ -327,7 +327,7 @@ export class EuiBasicTable extends Component< prevState: State ) { if (!nextProps.selection) { - // next props doesn't have a selection, reset our state + // next props don't have a selection, reset our state return { selection: [] }; } @@ -631,53 +631,50 @@ export class EuiBasicTable extends Component< ? Math.ceil(pagination.totalItemCount / this.pageSize) : 1; - let captionElement; - if (tableCaption) { - if (pagination) { - captionElement = ( + let itemCountPart: React.ReactNode = null; + if (!itemCount) { + itemCountPart = this.props.noItemsMessage; + } else if (pagination && totalItemCount > 0) { + itemCountPart = ( +

- ); - } else { - captionElement = tableCaption; - } - } else { - if (pagination) { - if (pagination.totalItemCount > 0) { - captionElement = ( - - ); - } else { - captionElement = ( - - ); - } - } else { - captionElement = ( +

+ ); + } + + let paginationPart: React.ReactNode = null; + if (pagination && pageCount > 1) { + paginationPart = ( +

- ); - } +

+ ); } + return ( {tabularCopyMarkers.hiddenNoCopyBoundary} - {captionElement} + +

+ {tableCaption || ( + + )} +

+ {itemCountPart} + {paginationPart} +
{tabularCopyMarkers.hiddenNoCopyBoundary}