fix(a11y): add column headers to collections (#3809)

* fix column header: romove announcement

* add table headers

* add column definition API collections

Author: Mnickii

src/app/views/sidebar/resource-explorer/collection/APICollection.tsx

@@ -74,8 +74,8 @@ const APICollection: React.FC<PopupsComponent<APICollection>> = (props) => {
   }
 
   const columns = [
-    { key: 'url', name: '', fieldName: 'url', minWidth: 300, maxWidth: 1100, isResizable: true },
-    { key: 'scope', name: '', fieldName: 'scope', minWidth: 150, maxWidth: 200, isResizable: true }
+    { key: 'url', name: 'URL', fieldName: 'url', minWidth: 300, maxWidth: 1100, isResizable: true },
+    { key: 'scope', name: 'Scope', fieldName: 'scope', minWidth: 150, maxWidth: 200, isResizable: true }
   ];
 
   const generateCollection = () => {

src/app/views/sidebar/resource-explorer/collection/EditCollectionPanel.tsx

@@ -28,8 +28,8 @@ const EditCollectionPanel: React.FC<EditCollectionPanelProps> = ({ closePopup })
   const items = collections && collections.length > 0 ? collections.find(k => k.isDefault)!.paths : [];
 
   const columns = [
-    { key: 'url', name: 'Select all', fieldName: 'url', minWidth: 300, maxWidth: 1100, isResizable: true },
-    { key: 'scope', name: '', fieldName: 'scope', minWidth: 150, maxWidth: 200, isResizable: true }
+    { key: 'url', name: 'URL', fieldName: 'url', minWidth: 300, maxWidth: 1100, isResizable: true },
+    { key: 'scope', name: 'Scope', fieldName: 'scope', minWidth: 150, maxWidth: 200, isResizable: true }
   ];
 
   const removeSelectedItems = () => {

src/app/views/sidebar/resource-explorer/collection/EditScopePanel.tsx

@@ -56,8 +56,8 @@ const EditScopePanel: React.FC<EditScopePanelProps> = ({ closePopup }) => {
   }, [selectedItems]);
 
   const columns = [
-    { key: 'url', name: 'Select all', fieldName: 'url', minWidth: 300, maxWidth: 1100, isResizable: true },
-    { key: 'scope', name: '', fieldName: 'scope', minWidth: 150, maxWidth: 200, isResizable: true }
+    { key: 'url', name: 'URL', fieldName: 'url', minWidth: 300, maxWidth: 1100, isResizable: true },
+    { key: 'scope', name: 'Scope', fieldName: 'scope', minWidth: 150, maxWidth: 200, isResizable: true }
   ];
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any

src/app/views/sidebar/resource-explorer/collection/Paths.tsx

@@ -23,7 +23,14 @@ import { handleShiftArrowSelection } from '../resourcelink.utils';
 
 interface IPathProps {
   resources: ResourcePath[];
-  columns: { key: string, name: string, fieldName: string, minWidth: number, maxWidth: number, isResizable: boolean }[];
+  columns: {
+    key: string;
+    name: string;
+    fieldName: string;
+    minWidth: number;
+    maxWidth: number;
+    isResizable: boolean;
+  }[];
   isSelectable?: boolean;
   onSelectionChange?: (selectedItems: ResourcePath[]) => void;
 }
@@ -61,7 +68,14 @@ const Paths: React.FC<IPathProps> = ({ resources, columns, isSelectable, onSelec
 
   const renderItemColumn = (
     item: ResourcePath,
-    column: { key: string, name: string, fieldName: string, minWidth: number, maxWidth: number, isResizable: boolean }
+    column: {
+      key: string;
+      name: string;
+      fieldName: string;
+      minWidth: number;
+      maxWidth: number;
+      isResizable: boolean;
+    }
   ) => {
     if (column.key === 'scope') {
       return (
@@ -95,24 +109,34 @@ const Paths: React.FC<IPathProps> = ({ resources, columns, isSelectable, onSelec
         <TableHeader>
           <TableRow>
             {isSelectable && (
-              <TableHeaderCell id='select-all-header' aria-label={translateMessage('Select all')} aria-live='polite'>
-                <Checkbox
-                  aria-labelledby='select-all-header'
-                  checked={allSelected}
-                  onChange={handleSelectAllChange}
-                  onKeyDown={(e: React.KeyboardEvent) => {
-                    if (e.key === 'Enter') {
-                      handleSelectAllChange();
-                    }
-                  }}
-                />
+              <TableHeaderCell
+                aria-label={translateMessage('Select collection queries')}
+                aria-live='polite'
+              >
+                <Tooltip
+                  content={translateMessage('Select all')}
+                  relationship="label"
+                  withArrow
+                >
+                  <Checkbox
+                    aria-label={translateMessage('Select all')}
+                    aria-live='polite'
+                    checked={allSelected}
+                    onChange={handleSelectAllChange}
+                    onKeyDown={(e: React.KeyboardEvent) => {
+                      if (e.key === 'Enter') {
+                        handleSelectAllChange();
+                      }
+                    }}
+                  />
+                </Tooltip>
               </TableHeaderCell>
             )}
             {columns.map((column) => (
               <TableHeaderCell
                 className={styles.tableHeader}
                 key={column.key}
-                aria-label={column.name}
+                aria-label={translateMessage(column.key)}
                 aria-live='polite'
               >
                 {column.name}

src/messages/GE.json

@@ -392,6 +392,7 @@
   "Path display": "Path display",
   "More path links": "More path links",
   "Resources available": "Resources available",
+  "Select collection queries": "Select collection queries",
   "Selected Resources": "Selected Resources",
   "A documentation link for this URL exists. Click learn more to access it": "A documentation link for this URL exists. Click here to access it",
   "Feedback": "Help Improve Graph Explorer?",