+
);
diff --git a/components/lib/paginator/RowsPerPageDropdown.js b/components/lib/paginator/RowsPerPageDropdown.js
index db46c2cc32..1ef660be1a 100644
--- a/components/lib/paginator/RowsPerPageDropdown.js
+++ b/components/lib/paginator/RowsPerPageDropdown.js
@@ -1,11 +1,13 @@
import * as React from 'react';
+import { localeOption } from '../api/Api';
import { Dropdown } from '../dropdown/Dropdown';
import { ObjectUtils } from '../utils/Utils';
export const RowsPerPageDropdown = React.memo((props) => {
const hasOptions = props.options && props.options.length > 0;
const options = hasOptions ? props.options.map((opt) => ({ label: String(opt), value: opt })) : [];
- const element = hasOptions ?
: null;
+ const ariaLabel = localeOption('choose');
+ const element = hasOptions ?
: null;
if (props.template) {
const defaultOptions = {
diff --git a/pages/datatable/selection.js b/pages/datatable/selection.js
index 79a58de443..06c7aeff7a 100644
--- a/pages/datatable/selection.js
+++ b/pages/datatable/selection.js
@@ -1,12 +1,12 @@
-import React, { useState, useEffect, useRef, memo } from 'react';
-import { DataTable } from '../../components/lib/datatable/DataTable';
+import Head from 'next/head';
+import React, { memo, useEffect, useRef, useState } from 'react';
+import { DocActions } from '../../components/doc/common/docactions';
+import { useLiveEditorTabs } from '../../components/doc/common/liveeditor';
import { Column } from '../../components/lib/column/Column';
+import { DataTable } from '../../components/lib/datatable/DataTable';
import { TabView } from '../../components/lib/tabview/TabView';
-import { useLiveEditorTabs } from '../../components/doc/common/liveeditor';
-import { ProductService } from '../../service/ProductService';
import { Toast } from '../../components/lib/toast/Toast';
-import { DocActions } from '../../components/doc/common/docactions';
-import Head from 'next/head';
+import { ProductService } from '../../service/ProductService';
const DataTableSelectionDemo = () => {
const [products, setProducts] = useState([]);
@@ -237,7 +237,7 @@ const DataTableSelectionDemo = () => {
Single selection can also be handled using radio buttons and rows by enabling the selectionMode property of column as "single".
Row and RadioButton Selection
-
setSelectedProduct5(e.value)} dataKey="id" responsiveLayout="scroll">
+ setSelectedProduct5(e.value)} dataKey="id" responsiveLayout="scroll" selectionAriaLabel="name">
@@ -246,7 +246,7 @@ const DataTableSelectionDemo = () => {
RadioButton-Only Selection
- setSelectedProduct6(e.value)} dataKey="id" responsiveLayout="scroll">
+ setSelectedProduct6(e.value)} dataKey="id" responsiveLayout="scroll" selectionAriaLabel="name">
@@ -259,7 +259,7 @@ const DataTableSelectionDemo = () => {
Checkbox
Row and Checkbox Selection
- setSelectedProducts7(e.value)} dataKey="id" responsiveLayout="scroll">
+ setSelectedProducts7(e.value)} dataKey="id" responsiveLayout="scroll" selectionAriaLabel="name">
@@ -268,7 +268,7 @@ const DataTableSelectionDemo = () => {
Checkbox-Only Selection
- setSelectedProducts8(e.value)} dataKey="id" responsiveLayout="scroll">
+ setSelectedProducts8(e.value)} dataKey="id" responsiveLayout="scroll" selectionAriaLabel="name">