@patternfly/react-core 6.0.0-alpha.5 → 6.0.0-alpha.51

package/src/demos/DataListDemo.md

@@ -14,6 +14,7 @@ import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
 import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
 import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 
 ## Demos
 
@@ -25,411 +26,5 @@ import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle
 
 ### Expandable control in toolbar
 
-```js
-import React from 'react';
-import {
-  Button,
-  DataList,
-  DataListItem,
-  DataListItemRow,
-  DataListCell,
-  DataListAction,
-  DataListToggle,
-  DataListContent,
-  DataListItemCells,
-  Dropdown,
-  DropdownItem,
-  DropdownList,
-  MenuToggle,
-  Toolbar,
-  ToolbarGroup,
-  ToolbarItem,
-  ToolbarExpandIconWrapper,
-  ToolbarContent,
-  SearchInput,
-  Tooltip,
-  Icon
-} from '@patternfly/react-core';
-import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
-import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-
-class ExpandableDataList extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      expanded: ['ex-toggle1', 'ex-toggle3'],
-      isOpen1: false,
-      isOpen2: false,
-      isOpen3: false,
-      allExpanded: false
-    };
-
-    this.onToggleAll = () => {
-      this.setState(
-        {
-          allExpanded: !this.state.allExpanded
-        },
-        () => {
-          if (this.state.allExpanded) {
-            this.setState({
-              expanded: ['ex-toggle1', 'ex-toggle2', 'ex-toggle3']
-            });
-          } else {
-            this.setState({
-              expanded: []
-            });
-          }
-        }
-      );
-    };
-
-    this.onToggle1 = () => {
-      this.setState((prevState) => ({ isOpen1: !prevState.isOpen1 }));
-    };
-
-    this.onToggle2 = () => {
-      this.setState((prevState) => ({ isOpen2: !prevState.isOpen2 }));
-    };
-
-    this.onToggle3 = () => {
-      this.setState((prevState) => ({ isOpen3: !prevState.isOpen3 }));
-    };
-
-    this.onSelect1 = () => {
-      this.setState({
-        isOpen1: false
-      });
-    };
-
-    this.onSelect2 = () => {
-      this.setState({
-        isOpen2: false
-      });
-    };
-
-    this.onSelect3 = () => {
-      this.setState({
-        isOpen3: false
-      });
-    };
-  }
-
-  renderToolbar() {
-    return (
-      <React.Fragment>
-        <Toolbar>
-          <ToolbarContent>
-            <ToolbarGroup>
-              <ToolbarItem variant="expand-all" isAllExpanded={this.state.allExpanded}>
-                <Tooltip
-                  position="right"
-                  content={
-                    <div>
-                      {this.state.allExpanded && 'Collapse all rows'}
-                      {!this.state.allExpanded && 'Expand all rows'}
-                    </div>
-                  }
-                >
-                  <Button
-                    onClick={this.onToggleAll}
-                    variant="plain"
-                    aria-label={this.state.allExpanded ? 'Collapse all rows' : 'Expand all rows'}
-                  >
-                    <Icon shouldMirrorRTL>
-                      <ToolbarExpandIconWrapper>
-                        <AngleRightIcon />
-                      </ToolbarExpandIconWrapper>
-                    </Icon>
-                  </Button>
-                </Tooltip>
-              </ToolbarItem>
-              <ToolbarItem>
-                <SearchInput aria-label="search input example" />
-              </ToolbarItem>
-              <ToolbarItem>
-                <Button variant="secondary">Action</Button>
-              </ToolbarItem>
-              <ToolbarItem variant="separator" />
-              <ToolbarItem>
-                <Button variant="primary">Action</Button>
-              </ToolbarItem>
-            </ToolbarGroup>
-          </ToolbarContent>
-        </Toolbar>
-      </React.Fragment>
-    );
-  }
-
-  render() {
-    const { isOpen1, isOpen2, isOpen3 } = this.state;
-    const toggle = (id) => {
-      const expanded = this.state.expanded;
-      const index = expanded.indexOf(id);
-      const newExpanded =
-        index >= 0 ? [...expanded.slice(0, index), ...expanded.slice(index + 1, expanded.length)] : [...expanded, id];
-      this.setState(() => ({ expanded: newExpanded }));
-      if (newExpanded.length === 3) {
-        this.setState(() => ({ allExpanded: true }));
-      } else if (newExpanded.length === 0) {
-        this.setState(() => ({ allExpanded: false }));
-      }
-    };
-
-    return (
-      <React.Fragment>
-        {this.renderToolbar()}
-        <br />
-        <br />
-        <DataList aria-label="Expandable data list example">
-          <DataListItem aria-labelledby="ex-item1" isExpanded={this.state.expanded.includes('ex-toggle1')}>
-            <DataListItemRow>
-              <DataListToggle
-                onClick={() => toggle('ex-toggle1')}
-                isExpanded={this.state.expanded.includes('ex-toggle1')}
-                id="ex-toggle1"
-                aria-controls="ex-expand1"
-              />
-              <DataListItemCells
-                dataListCells={[
-                  <DataListCell isIcon key="icon">
-                    <CodeBranchIcon />
-                  </DataListCell>,
-                  <DataListCell key="primary content">
-                    <div id="ex-item1">Primary content</div>
-                    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
-                    <a href="#">link</a>
-                  </DataListCell>,
-                  <DataListCell key="secondary content">
-                    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
-                  </DataListCell>,
-                  <DataListCell key="secondary content 2">
-                    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
-                  </DataListCell>
-                ]}
-              />
-              <DataListAction
-                aria-labelledby="ex-item1 ex-action1"
-                id="ex-action1"
-                aria-label="Actions"
-                isPlainButtonAction
-              >
-                <Dropdown
-                  isOpen={isOpen1}
-                  onSelect={this.onSelect1}
-                  popperProps={{ position: 'right' }}
-                  onOpenChange={(isOpen) => this.setState({ isOpen1: isOpen })}
-                  toggle={(toggleRef) => (
-                    <MenuToggle
-                      ref={toggleRef}
-                      onClick={this.onToggle1}
-                      isExpanded={isOpen1}
-                      variant="plain"
-                      aria-label="Primary content kebab toggle"
-                    >
-                      <EllipsisVIcon aria-hidden="true" />
-                    </MenuToggle>
-                  )}
-                >
-                  <DropdownList>
-                    <DropdownItem value={0} key="action1">
-                      Action
-                    </DropdownItem>
-                    <DropdownItem
-                      value={1}
-                      key="link1"
-                      to="#default-link2"
-                      // Prevent the default onClick functionality for example purposes
-                      onClick={(ev) => ev.preventDefault()}
-                    >
-                      Link
-                    </DropdownItem>
-                    <DropdownItem value={2} isDisabled key="disabled action1">
-                      Disabled Action
-                    </DropdownItem>
-                    <DropdownItem value={3} isDisabled key="disabled link1" to="#default-link4">
-                      Disabled Link
-                    </DropdownItem>
-                  </DropdownList>
-                </Dropdown>
-              </DataListAction>
-            </DataListItemRow>
-            <DataListContent
-              aria-label="Primary Content Details"
-              id="ex-expand1"
-              isHidden={!this.state.expanded.includes('ex-toggle1')}
-            >
-              <p>
-                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
-                dolore magna aliqua.
-              </p>
-            </DataListContent>
-          </DataListItem>
-          <DataListItem aria-labelledby="ex-item2" isExpanded={this.state.expanded.includes('ex-toggle2')}>
-            <DataListItemRow>
-              <DataListToggle
-                onClick={() => toggle('ex-toggle2')}
-                isExpanded={this.state.expanded.includes('ex-toggle2')}
-                id="ex-toggle2"
-                aria-controls="ex-expand2"
-              />
-              <DataListItemCells
-                dataListCells={[
-                  <DataListCell isIcon key="icon">
-                    <CodeBranchIcon />
-                  </DataListCell>,
-                  <DataListCell key="secondary content">
-                    <div id="ex-item2">Secondary content</div>
-                    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
-                  </DataListCell>,
-                  <DataListCell key="secondary content 2">
-                    <span>Lorem ipsum dolor sit amet.</span>
-                  </DataListCell>,
-                  <DataListCell key="secondary content3">
-                    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
-                  </DataListCell>
-                ]}
-              />
-              <DataListAction
-                aria-labelledby="ex-item2 ex-action2"
-                id="ex-action2"
-                aria-label="Actions"
-                isPlainButtonAction
-              >
-                <Dropdown
-                  isOpen={isOpen2}
-                  onSelect={this.onSelect2}
-                  popperProps={{ position: 'right' }}
-                  onOpenChange={(isOpen) => this.setState({ isOpen2: isOpen })}
-                  toggle={(toggleRef) => (
-                    <MenuToggle
-                      ref={toggleRef}
-                      onClick={this.onToggle2}
-                      isExpanded={isOpen2}
-                      variant="plain"
-                      aria-label="Secondary content kebab toggle"
-                    >
-                      <EllipsisVIcon aria-hidden="true" />
-                    </MenuToggle>
-                  )}
-                >
-                  <DropdownList>
-                    <DropdownItem value={0} key="action2">
-                      Action
-                    </DropdownItem>
-                    <DropdownItem
-                      value={1}
-                      key="link2"
-                      to="#default-link2"
-                      // Prevent the default onClick functionality for example purposes
-                      onClick={(ev) => ev.preventDefault()}
-                    >
-                      Link
-                    </DropdownItem>
-                    <DropdownItem value={2} isDisabled key="disabled action2">
-                      Disabled Action
-                    </DropdownItem>
-                    <DropdownItem value={3} isDisabled key="disabled link2" to="#default-link4">
-                      Disabled Link
-                    </DropdownItem>
-                  </DropdownList>
-                </Dropdown>
-              </DataListAction>
-            </DataListItemRow>
-            <DataListContent
-              aria-label="Primary Content Details"
-              id="ex-expand2"
-              isHidden={!this.state.expanded.includes('ex-toggle2')}
-            >
-              <p>
-                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
-                dolore magna aliqua.
-              </p>
-            </DataListContent>
-          </DataListItem>
-          <DataListItem aria-labelledby="ex-item3" isExpanded={this.state.expanded.includes('ex-toggle3')}>
-            <DataListItemRow>
-              <DataListToggle
-                onClick={() => toggle('ex-toggle3')}
-                isExpanded={this.state.expanded.includes('ex-toggle3')}
-                id="ex-toggle3"
-                aria-controls="ex-expand3"
-              />
-              <DataListItemCells
-                dataListCells={[
-                  <DataListCell isIcon key="icon">
-                    <CodeBranchIcon />
-                  </DataListCell>,
-                  <DataListCell key="tertiary content">
-                    <div id="ex-item3">Tertiary content</div>
-                    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
-                  </DataListCell>,
-                  <DataListCell key="secondary content">
-                    <span>Lorem ipsum dolor sit amet.</span>
-                  </DataListCell>,
-                  <DataListCell key="secondary content 2">
-                    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
-                  </DataListCell>
-                ]}
-              />
-              <DataListAction
-                aria-labelledby="ex-item3 ex-action3"
-                id="ex-action3"
-                aria-label="Actions"
-                isPlainButtonAction
-              >
-                <Dropdown
-                  isOpen={isOpen3}
-                  onSelect={this.onSelect3}
-                  popperProps={{ position: 'right' }}
-                  onOpenChange={(isOpen) => this.setState({ isOpen3: isOpen })}
-                  toggle={(toggleRef) => (
-                    <MenuToggle
-                      ref={toggleRef}
-                      onClick={this.onToggle3}
-                      isExpanded={isOpen3}
-                      variant="plain"
-                      aria-label="Tertiary content kebab toggle"
-                    >
-                      <EllipsisVIcon aria-hidden="true" />
-                    </MenuToggle>
-                  )}
-                >
-                  <DropdownList>
-                    <DropdownItem value={0} key="action3">
-                      Action
-                    </DropdownItem>
-                    <DropdownItem
-                      value={1}
-                      key="link3"
-                      to="#default-link2"
-                      // Prevent the default onClick functionality for example purposes
-                      onClick={(ev) => ev.preventDefault()}
-                    >
-                      Link
-                    </DropdownItem>
-                    <DropdownItem value={2} isDisabled key="disabled action3">
-                      Disabled Action
-                    </DropdownItem>
-                    <DropdownItem value={3} isDisabled key="disabled link3" to="#default-link4">
-                      Disabled Link
-                    </DropdownItem>
-                  </DropdownList>
-                </Dropdown>
-              </DataListAction>
-            </DataListItemRow>
-            <DataListContent
-              aria-label="Primary Content Details"
-              id="ex-expand3"
-              isHidden={!this.state.expanded.includes('ex-toggle3')}
-              hasNoPadding
-            >
-              This expanded section has no padding.
-            </DataListContent>
-          </DataListItem>
-        </DataList>
-      </React.Fragment>
-    );
-  }
-}
+```js file="./DataList/examples/DataListExpandableControlInToolbar.tsx" isFullscreen
 ```

package/src/demos/ExpandableSection/ExpandableSection.md

@@ -0,0 +1,17 @@
+---
+id: Expandable section
+section: components
+---
+
+## Demos
+
+
+### Expandable text with character truncation
+
+You can truncate long sections of text and add a "Show more" link that allows users to expand and view the full text content.
+
+To specify the number of characters shown prior to truncation, use a `<Truncate>` component and pass a `maxWidth` to the `style` attribute.
+
+```ts file='./examples/ExpandableTextDemo.tsx'
+
+```

package/src/demos/ExpandableSection/examples/ExpandableTextDemo.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { ExpandableSection, ExpandableSectionVariant, Truncate } from '@patternfly/react-core';
+
+export const ExpandableTextDemo: React.FunctionComponent = () => {
+  const [isExpanded, setIsExpanded] = React.useState(false);
+
+  const onToggle = (_event: React.MouseEvent, isExpanded: boolean) => {
+    setIsExpanded(isExpanded);
+  };
+
+  const content = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec dignissim turpis, et tristique purus.
+  Phasellus efficitur ante quis dolor viverra imperdiet. Orci varius natoque penatibus et magnis dis parturient
+  montes, nascetur ridiculus mus. Pellentesque laoreet, sem ac elementum semper, lectus mauris vestibulum nulla,
+  eget volutpat massa neque vel turpis. Donec finibus enim eu leo accumsan consectetur. Praesent massa diam,
+  tincidunt eu dui ac, ullamcorper elementum est. Phasellus metus felis, venenatis vitae semper nec, porta a metus.
+  Vestibulum justo nisi, imperdiet id eleifend at, varius nec lorem. Fusce porttitor mollis nibh, ut elementum ante
+  commodo tincidunt. Integer tincidunt at ipsum non aliquet.`;
+
+  return (
+    <ExpandableSection
+      variant={ExpandableSectionVariant.truncate}
+      toggleText={isExpanded ? 'Show less' : 'Show more'}
+      onToggle={onToggle}
+      isExpanded={isExpanded}
+      truncateMaxLines={-1}
+    >
+      {isExpanded ? content : <Truncate content={content} style={{ maxWidth: '10ch' }} />}
+    </ExpandableSection>
+  );
+};

package/src/demos/Filters/examples/FilterAttributeSearch.tsx

@@ -13,7 +13,6 @@ import {
   Popper,
   Pagination,
   EmptyState,
-  EmptyStateHeader,
   EmptyStateFooter,
   EmptyStateBody,
   Button,
@@ -22,8 +21,7 @@ import {
   ToolbarGroup,
   ToolbarFilter,
   ToolbarToggleGroup,
-  EmptyStateActions,
-  EmptyStateIcon
+  EmptyStateActions
 } from '@patternfly/react-core';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
@@ -625,8 +623,7 @@ export const FilterAttributeSearch: React.FunctionComponent = () => {
   );
 
   const emptyState = (
-    <EmptyState>
-      <EmptyStateHeader headingLevel="h4" titleText="No results found" icon={<EmptyStateIcon icon={SearchIcon} />} />
+    <EmptyState headingLevel="h4" titleText="No results found" icon={SearchIcon}>
       <EmptyStateBody>No results match the filter criteria. Clear all filters and try again.</EmptyStateBody>
       <EmptyStateFooter>
         <EmptyStateActions>
@@ -651,7 +648,7 @@ export const FilterAttributeSearch: React.FunctionComponent = () => {
       <Table aria-label="Selectable table">
         <Thead>
           <Tr>
-            <Th />
+            <Th screenReaderText="Row select" />
             <Th width={20}>{columnNames.name}</Th>
             <Th width={10}>{columnNames.threads}</Th>
             <Th width={10}>{columnNames.apps}</Th>

package/src/demos/Filters/examples/FilterCheckboxSelect.tsx

@@ -377,7 +377,7 @@ export const FilterCheckboxSelect: React.FunctionComponent = () => {
       <Table aria-label="Selectable table">
         <Thead>
           <Tr>
-            <Th />
+            <Th screenReaderText="Row select" />
             <Th width={20}>{columnNames.name}</Th>
             <Th width={10}>{columnNames.threads}</Th>
             <Th width={10}>{columnNames.apps}</Th>

package/src/demos/Filters/examples/FilterFaceted.tsx

@@ -12,7 +12,6 @@ import {
   Popper,
   Pagination,
   EmptyState,
-  EmptyStateHeader,
   EmptyStateFooter,
   EmptyStateBody,
   Button,
@@ -21,7 +20,6 @@ import {
   ToolbarFilter,
   ToolbarToggleGroup,
   MenuGroup,
-  EmptyStateIcon,
   EmptyStateActions
 } from '@patternfly/react-core';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
@@ -442,8 +440,7 @@ export const FilterFaceted: React.FunctionComponent = () => {
   );
 
   const emptyState = (
-    <EmptyState>
-      <EmptyStateHeader headingLevel="h4" titleText="No results found" icon={<EmptyStateIcon icon={SearchIcon} />} />
+    <EmptyState headingLevel="h4" titleText="No results found" icon={SearchIcon}>
       <EmptyStateBody>No results match the filter criteria. Clear all filters and try again.</EmptyStateBody>
       <EmptyStateFooter>
         <EmptyStateActions>
@@ -467,7 +464,7 @@ export const FilterFaceted: React.FunctionComponent = () => {
       <Table aria-label="Selectable table">
         <Thead>
           <Tr>
-            <Th />
+            <Th screenReaderText="Row select" />
             <Th width={20}>{columnNames.name}</Th>
             <Th width={10}>{columnNames.threads}</Th>
             <Th width={10}>{columnNames.apps}</Th>

package/src/demos/Filters/examples/FilterMixedSelectGroup.tsx

@@ -12,7 +12,6 @@ import {
   Popper,
   Pagination,
   EmptyState,
-  EmptyStateHeader,
   EmptyStateFooter,
   EmptyStateBody,
   Button,
@@ -20,7 +19,6 @@ import {
   Badge,
   ToolbarFilter,
   ToolbarToggleGroup,
-  EmptyStateIcon,
   EmptyStateActions
 } from '@patternfly/react-core';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
@@ -492,8 +490,7 @@ export const FilterMixedSelectGroup: React.FunctionComponent = () => {
   );
 
   const emptyState = (
-    <EmptyState>
-      <EmptyStateHeader headingLevel="h4" titleText="No results found" icon={<EmptyStateIcon icon={SearchIcon} />} />
+    <EmptyState headingLevel="h4" titleText="No results found" icon={SearchIcon}>
       <EmptyStateBody>No results match the filter criteria. Clear all filters and try again.</EmptyStateBody>
       <EmptyStateFooter>
         <EmptyStateActions>
@@ -517,7 +514,7 @@ export const FilterMixedSelectGroup: React.FunctionComponent = () => {
       <Table aria-label="Selectable table">
         <Thead>
           <Tr>
-            <Th />
+            <Th screenReaderText="Row select" />
             <Th width={20}>{columnNames.name}</Th>
             <Th width={10}>{columnNames.threads}</Th>
             <Th width={10}>{columnNames.apps}</Th>

package/src/demos/Filters/examples/FilterSameSelectGroup.tsx

@@ -12,13 +12,11 @@ import {
   Popper,
   Pagination,
   EmptyState,
-  EmptyStateHeader,
   EmptyStateFooter,
   EmptyStateBody,
   Button,
   Bullseye,
   ToolbarToggleGroup,
-  EmptyStateIcon,
   EmptyStateActions
 } from '@patternfly/react-core';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
@@ -465,8 +463,7 @@ export const FilterSameSelectGroup: React.FunctionComponent = () => {
   );
 
   const emptyState = (
-    <EmptyState>
-      <EmptyStateHeader headingLevel="h4" titleText="No results found" icon={<EmptyStateIcon icon={SearchIcon} />} />
+    <EmptyState headingLevel="h4" titleText="No results found" icon={SearchIcon}>
       <EmptyStateBody>No results match the filter criteria. Clear all filters and try again.</EmptyStateBody>
       <EmptyStateFooter>
         <EmptyStateActions>
@@ -490,7 +487,7 @@ export const FilterSameSelectGroup: React.FunctionComponent = () => {
       <Table aria-label="Selectable table">
         <Thead>
           <Tr>
-            <Th />
+            <Th screenReaderText="Row select" />
             <Th width={20}>{columnNames.name}</Th>
             <Th width={10}>{columnNames.threads}</Th>
             <Th width={10}>{columnNames.apps}</Th>

package/src/demos/Filters/examples/FilterSearchInput.tsx

@@ -13,12 +13,10 @@ import {
   Popper,
   Pagination,
   EmptyState,
-  EmptyStateHeader,
   EmptyStateFooter,
   EmptyStateBody,
   Button,
   Bullseye,
-  EmptyStateIcon,
   EmptyStateActions
 } from '@patternfly/react-core';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
@@ -267,15 +265,14 @@ export const FilterSearchInput: React.FunctionComponent = () => {
     <Toolbar id="search-input-filter-toolbar">
       <ToolbarContent>
         <ToolbarItem>{toolbarBulkSelect}</ToolbarItem>
-        <ToolbarItem variant="search-filter">{searchInput}</ToolbarItem>
+        <ToolbarItem>{searchInput}</ToolbarItem>
         <ToolbarItem variant="pagination">{toolbarPagination}</ToolbarItem>
       </ToolbarContent>
     </Toolbar>
   );
 
   const emptyState = (
-    <EmptyState>
-      <EmptyStateHeader headingLevel="h4" titleText="No results found" icon={<EmptyStateIcon icon={SearchIcon} />} />
+    <EmptyState headingLevel="h4" titleText="No results found" icon={SearchIcon}>
       <EmptyStateBody>No results match the filter criteria. Clear all filters and try again.</EmptyStateBody>
       <EmptyStateFooter>
         <EmptyStateActions>
@@ -298,7 +295,7 @@ export const FilterSearchInput: React.FunctionComponent = () => {
       <Table aria-label="Selectable table">
         <Thead>
           <Tr>
-            <Th />
+            <Th screenReaderText="Row select" />
             <Th width={20}>{columnNames.name}</Th>
             <Th width={10}>{columnNames.threads}</Th>
             <Th width={10}>{columnNames.apps}</Th>

package/src/demos/Filters/examples/FilterSingleSelect.tsx

@@ -362,7 +362,7 @@ export const FilterSingleSelect: React.FunctionComponent = () => {
       <Table aria-label="Selectable table">
         <Thead>
           <Tr>
-            <Th />
+            <Th screenReaderText="Row select" />
             <Th width={20}>{columnNames.name}</Th>
             <Th width={10}>{columnNames.threads}</Th>
             <Th width={10}>{columnNames.apps}</Th>