Updated additional examples and demos

patternfly · Mar 12, 2024 · 13de30d · 13de30d
1 parent 73c4f75
commit 13de30d
Show file tree

Hide file tree

Showing 21 changed files with 29 additions and 27 deletions.
diff --git a/packages/react-core/src/demos/Filters/examples/FilterAttributeSearch.tsx b/packages/react-core/src/demos/Filters/examples/FilterAttributeSearch.tsx
@@ -651,7 +651,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>

diff --git a/packages/react-core/src/demos/Filters/examples/FilterCheckboxSelect.tsx b/packages/react-core/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>

diff --git a/packages/react-core/src/demos/Filters/examples/FilterFaceted.tsx b/packages/react-core/src/demos/Filters/examples/FilterFaceted.tsx
@@ -467,7 +467,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>

diff --git a/packages/react-core/src/demos/Filters/examples/FilterMixedSelectGroup.tsx b/packages/react-core/src/demos/Filters/examples/FilterMixedSelectGroup.tsx
@@ -517,7 +517,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>

diff --git a/packages/react-core/src/demos/Filters/examples/FilterSameSelectGroup.tsx b/packages/react-core/src/demos/Filters/examples/FilterSameSelectGroup.tsx
@@ -490,7 +490,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>

diff --git a/packages/react-core/src/demos/Filters/examples/FilterSearchInput.tsx b/packages/react-core/src/demos/Filters/examples/FilterSearchInput.tsx
@@ -298,7 +298,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>

diff --git a/packages/react-core/src/demos/Filters/examples/FilterSingleSelect.tsx b/packages/react-core/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>

diff --git a/packages/react-core/src/demos/examples/Card/CardStatus.tsx b/packages/react-core/src/demos/examples/Card/CardStatus.tsx
@@ -94,7 +94,7 @@ export const CardStatus: React.FunctionComponent = () => {
       <Table variant="compact">
         <Thead>
           <Tr>
-            <Th />
+            <Th screenReaderText="Row expansion" />
             {columns.map((column, columnIndex) => (
               <Th key={columnIndex} modifier="fitContent">
                 {column}

diff --git a/packages/react-core/src/demos/examples/Tabs/TabsAndTable.tsx b/packages/react-core/src/demos/examples/Tabs/TabsAndTable.tsx
@@ -56,7 +56,7 @@ import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon';
 import { KeyTypes } from '../../../helpers';
-import display from '@patternfly/react-styles/css/utilities/Display/display';
+// import display from '@patternfly/react-styles/css/utilities/Display/display';
 import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
 
 interface Repository {
@@ -192,7 +192,8 @@ export const TablesAndTabs = () => {
           </MenuToggle>
         </ToolbarItem>
         <OverflowMenu breakpoint="md">
-          <OverflowMenuContent className={`${display.displayNone} ${display.displayBlockOnLg}`}>
+          {/* TODO: Remove or update the display class */}
+          <OverflowMenuContent /* className={`${display.displayNone} ${display.displayBlockOnLg}`}*/>
             <OverflowMenuGroup groupType="button" isPersistent>
               <OverflowMenuItem isPersistent>
                 <Button variant="primary">Generate</Button>
@@ -230,7 +231,7 @@ export const TablesAndTabs = () => {
     <Table aria-label="`Composable` table">
       <Thead noWrap>
         <Tr>
-          <Th />
+          <Th screenReaderText="Row select" />
           <Th>{columnNames.name}</Th>
           <Th>{columnNames.branches}</Th>
           <Th>{columnNames.prs}</Th>

diff --git a/...ages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableComposableDemo.tsx b/...ages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableComposableDemo.tsx
@@ -347,7 +347,7 @@ export const TableComposableDemo = () => {
       <Table aria-label="Radio selectable table">
         <Thead>
           <Tr>
-            <Th />
+            <Th screenReaderText="Row select" />
             <Th>{columns[0]}</Th>
             <Th>{columns[1]}</Th>
             <Th>{columns[2]}</Th>
@@ -439,7 +439,7 @@ export const TableComposableDemo = () => {
             <Th>{columns[2]}</Th>
             <Th>{columns[3]}</Th>
             <Th>{columns[4]}</Th>
-            <Th />
+            <Th screenReaderText="Actions" />
           </Tr>
         </Thead>
         <Tbody>
@@ -616,7 +616,7 @@ export const TableComposableDemo = () => {
         <Table aria-label="Expandable Table" variant={compact ? 'compact' : null}>
           <Thead>
             <Tr>
-              <Th />
+              <Th screenReaderText="Row expansion" />
               <Th>{columns[0]}</Th>
               <Th>{columns[1]}</Th>
               <Th>{columns[2]}</Th>

diff --git a/packages/react-table/src/components/Table/Th.tsx b/packages/react-table/src/components/Table/Th.tsx
@@ -60,7 +60,7 @@ export interface ThProps
    * th is intended to be visually empty, and must be conveyed as a column header text.
    */
   screenReaderText?: string;
-  /** Prpvides an accessible name to the th. This should only be passed in when the th contains only non-text
+  /** Provides an accessible name to the th. This should only be passed in when the th contains only non-text
    * content, such as a "select all" checkbox or "expand all" toggle.
    */
   'aria-label'?: string;

diff --git a/packages/react-table/src/components/Table/examples/TableActionsOverflow.tsx b/packages/react-table/src/components/Table/examples/TableActionsOverflow.tsx
@@ -66,7 +66,7 @@ export const TableActions: React.FunctionComponent = () => {
             <Th>{columnNames.prs}</Th>
             <Th>{columnNames.workspaces}</Th>
             <Th>{columnNames.lastCommit}</Th>
-            <Th />
+            <Th screenReaderText="Actions" />
           </Tr>
         </Thead>
         <Tbody>

diff --git a/packages/react-table/src/components/Table/examples/TableCompoundExpandable.tsx b/packages/react-table/src/components/Table/examples/TableCompoundExpandable.tsx
@@ -67,7 +67,7 @@ export const TableCompoundExpandable: React.FunctionComponent = () => {
           <Th>{columnNames.prs}</Th>
           <Th>{columnNames.workspaces}</Th>
           <Th>{columnNames.lastCommit}</Th>
-          <Th />
+          <Th screenReaderText="URL" />
         </Tr>
       </Thead>
       {repositories.map((repo: Repository, rowIndex: number) => {

diff --git a/packages/react-table/src/components/Table/examples/TableDraggable.tsx b/packages/react-table/src/components/Table/examples/TableDraggable.tsx
@@ -140,10 +140,10 @@ export const TableDraggable: React.FunctionComponent = () => {
   ];
 
   return (
-    <Table aria-label="Draggable table" className={isDragging && styles.modifiers.dragOver}>
+    <Table aria-label="Draggable table" className={isDragging ? styles.modifiers.dragOver : ''}>
       <Thead>
         <Tr>
-          <Th />
+          <Th screenReaderText="Drag and drop" />
           {columns.map((column, columnIndex) => (
             <Th key={columnIndex}>{column}</Th>
           ))}

diff --git a/packages/react-table/src/components/Table/examples/TableExpandable.tsx b/packages/react-table/src/components/Table/examples/TableExpandable.tsx
@@ -120,7 +120,7 @@ export const TableExpandable: React.FunctionComponent = () => {
       <Table aria-label="Expandable table" variant={isExampleCompact ? 'compact' : undefined}>
         <Thead>
           <Tr>
-            <Th />
+            <Th screenReaderText="Row expansion" />
             <Th width={25}>{columnNames.name}</Th>
             <Th width={10}>{columnNames.branches}</Th>
             <Th width={15}>{columnNames.prs}</Th>

diff --git a/packages/react-table/src/components/Table/examples/TableNestedExpandable.tsx b/packages/react-table/src/components/Table/examples/TableNestedExpandable.tsx
@@ -64,7 +64,7 @@ export const TableNestedExpandable: React.FunctionComponent = () => {
       <Table aria-label="Nested column headers with expandable rows table" gridBreakPoint="">
         <Thead hasNestedHeader>
           <Tr>
-            <Th rowSpan={2} />
+            <Th screenReaderText="Row expansion" rowSpan={2} />
             <Th width={35} rowSpan={2} hasRightBorder>
               {columnNames.team}
             </Th>

diff --git a/packages/react-table/src/components/Table/examples/TableNestedTableExpandable.tsx b/packages/react-table/src/components/Table/examples/TableNestedTableExpandable.tsx
@@ -131,7 +131,7 @@ export const TableExpandable: React.FunctionComponent = () => {
     <Table aria-label="Simple table">
       <Thead>
         <Tr>
-          <Th />
+          <Th screenReaderText="Row expansion" />
           <Th width={20}>{columnNames.name}</Th>
           <Th>{columnNames.branches}</Th>
           <Th>{columnNames.prs}</Th>

diff --git a/packages/react-table/src/components/Table/examples/TableSelectableRadio.tsx b/packages/react-table/src/components/Table/examples/TableSelectableRadio.tsx
@@ -35,7 +35,7 @@ export const TableSelectableRadio: React.FunctionComponent = () => {
     <Table aria-label="Selectable table">
       <Thead>
         <Tr>
-          <Th />
+          <Th screenReaderText="Row select" />
           <Th>{columnNames.name}</Th>
           <Th>{columnNames.branches}</Th>
           <Th>{columnNames.prs}</Th>

diff --git a/packages/react-table/src/components/Table/examples/TableStripedExpandable.tsx b/packages/react-table/src/components/Table/examples/TableStripedExpandable.tsx
@@ -115,7 +115,7 @@ export const TableStripedExpandable: React.FunctionComponent = () => {
       <Table aria-label="Expandable table" variant={isExampleCompact ? 'compact' : undefined} isStriped isExpandable>
         <Thead>
           <Tr>
-            <Th />
+            <Th screenReaderText="Row expansion" />
             <Th width={25}>{columnNames.name}</Th>
             <Th width={10}>{columnNames.branches}</Th>
             <Th width={15}>{columnNames.prs}</Th>

diff --git a/packages/react-table/src/demos/examples/TableBulkSelect.tsx b/packages/react-table/src/demos/examples/TableBulkSelect.tsx
@@ -154,7 +154,7 @@ export const TableBulkSelect: React.FunctionComponent = () => {
         <Table aria-label="Selectable table">
           <Thead>
             <Tr>
-              <Th />
+              <Th screenReaderText="Row select" />
               <Th key={0}>{columns[0]}</Th>
               <Th key={1}>{columns[1]}</Th>
               <Th key={2}>{columns[2]}</Th>

diff --git a/packages/react-table/src/demos/examples/TableCompoundExpansion.tsx b/packages/react-table/src/demos/examples/TableCompoundExpansion.tsx
@@ -51,7 +51,7 @@ export const TableCompoundExpansion: React.FunctionComponent = () => {
             <Th>{columnNames.description}</Th>
             <Th>{columnNames.date}</Th>
             <Th>{columnNames.status}</Th>
-            <Th />
+            <Th screenReaderText="Actions" />
           </Tr>
         </Thead>
         <Tbody>
@@ -205,7 +205,8 @@ export const TableCompoundExpansion: React.FunctionComponent = () => {
                 <Th>{columnNames.prs}</Th>
                 <Th>{columnNames.workspaces}</Th>
                 <Th>{columnNames.lastCommit}</Th>
-                <Th />
+                <Th screenReaderText="URL" />
+                <Th screenReaderText="Actions" />
               </Tr>
             </Thead>
             {repositories.map((repo, rowIndex) => {