address review comments

Author: nicolethoen

packages/module/src/ColumnManagementModal/ColumnManagementModal.tsx

@@ -75,16 +75,7 @@ const ColumnManagementModal: FunctionComponent<ColumnManagementModalProps> = (
     setCurrentColumns(currentColumns.map(column => ({ ...column, isShown: column.isShownByDefault ?? false })));
   };
 
-  const handleSelect = (item: ListManagerItem) => {
-    const newColumns = currentColumns.map(column =>
-      column.key === item.key
-        ? { ...column, isShown: item.isSelected ?? column.isShownByDefault }
-        : column
-    );
-    setCurrentColumns(newColumns);
-  };
-
-  const handleSelectAll = (items: ListManagerItem[]) => {
+  const updateColumns = (items: ListManagerItem[]) => {
     const newColumns = currentColumns.map(column => {
       const matchingItem = items.find(item => item.key === column.key);
       return matchingItem
@@ -94,6 +85,14 @@ const ColumnManagementModal: FunctionComponent<ColumnManagementModalProps> = (
     setCurrentColumns(newColumns);
   };
 
+  const handleSelect = (item: ListManagerItem) => {
+    updateColumns([item]);
+  };
+
+  const handleSelectAll = (items: ListManagerItem[]) => {
+    updateColumns(items);
+  };
+
   const handleOrderChange = (items: ListManagerItem[]) => {
     // Update the order of currentColumns based on the new order from ListManager
     const newColumns = items.map(item => {

packages/module/src/ListManager/ListManager.tsx

@@ -46,6 +46,8 @@ export interface ListManagerProps {
   onCancel?: () => void;
   /** Enable drag and drop functionality for reordering items */
   enableDragDrop?: boolean;
+  /** Custom aria-label for the DataList */
+  dataListAriaLabel?: string;
 }
 
 const ListManager: FunctionComponent<ListManagerProps> = (
@@ -56,7 +58,8 @@ const ListManager: FunctionComponent<ListManagerProps> = (
     onOrderChange,
     onSave,
     onCancel,
-    enableDragDrop = true }: ListManagerProps) => {
+    enableDragDrop = true,
+    dataListAriaLabel = 'Selected columns' }: ListManagerProps) => {
 
   const [ currentColumns, setCurrentColumns ] = useState(
     () => columns.map(column => ({ ...column, isSelected: column.isSelected ?? column.isShownByDefault, id: column.key }))
@@ -115,14 +118,13 @@ const ListManager: FunctionComponent<ListManagerProps> = (
         isChecked={column.isSelected}
         onChange={() => handleChange(column.key)}
         isDisabled={column.isUntoggleable}
-        aria-labelledby={`${ouiaId}-column-${index}-label`}
         ouiaId={`${ouiaId}-column-${index}-checkbox`}
         id={`${ouiaId}-column-${index}-checkbox`}
       />
       <DataListItemCells
         dataListCells={[
           <DataListCell key={column.key} data-ouia-component-id={`${ouiaId}-column-${index}-label`}>
-            <label htmlFor={`${ouiaId}-column-${index}-checkbox`} id={`${ouiaId}-column-${index}-label`}>
+            <label htmlFor={`${ouiaId}-column-${index}-checkbox`}>
               {column.title}
             </label>
           </DataListCell>
@@ -158,11 +160,11 @@ const ListManager: FunctionComponent<ListManagerProps> = (
               // eslint-disable-next-line no-console
               ({ id: column.key, content: column.title })
             )}
-            wrapper={<DataList aria-label="Selected columns" isCompact data-ouia-component-id={`${ouiaId}-column-list`}/>}
+            wrapper={<DataList aria-label={dataListAriaLabel} isCompact data-ouia-component-id={`${ouiaId}-column-list`}/>}
           />
         </DragDropSort>
       ) : (
-        <DataList aria-label="Selected columns" isCompact data-ouia-component-id={`${ouiaId}-column-list`}>
+        <DataList aria-label={dataListAriaLabel} isCompact data-ouia-component-id={`${ouiaId}-column-list`}>
           {currentColumns.map((column, index) => (
             <DataListItem key={column.key}>
               {renderDataListItem(column, index)}