fix: change selection count position and visibility, enhance accessibility support

Author: yordan-st

packages/pluggableWidgets/datagrid-web/src/Datagrid.editorConfig.ts

@@ -75,6 +75,7 @@ export function getProperties(
             ]);
         }
     });
+
     if (values.pagination === "buttons") {
         hidePropertyIn(defaultProperties, values, "showNumberOfRows");
     } else {
@@ -169,7 +170,11 @@ function hideSelectionProperties(defaultProperties: Properties, values: Datagrid
     }
 
     if (itemSelection !== "Multi") {
-        hidePropertyIn(defaultProperties, values, "keepSelection");
+        hidePropertiesIn(defaultProperties, values, [
+            "keepSelection",
+            "selectionCountPosition",
+            "clearSelectionButtonLabel"
+        ]);
     }
 }
 

packages/pluggableWidgets/datagrid-web/src/Datagrid.xml

@@ -53,6 +53,22 @@
                     <caption>Keep selection</caption>
                     <description>If enabled, selected items will stay selected unless cleared by the user or a Nanoflow.</description>
                 </property>
+                <property key="selectionCountPosition" type="enumeration" defaultValue="bottom" required="true">
+                    <caption>Show selection count</caption>
+                    <description />
+                    <enumerationValues>
+                        <enumerationValue key="top">Top</enumerationValue>
+                        <enumerationValue key="bottom">Bottom</enumerationValue>
+                        <enumerationValue key="off">Off</enumerationValue>
+                    </enumerationValues>
+                </property>
+                <property key="clearSelectionButtonLabel" type="textTemplate" required="false">
+                    <caption>Clear selection label</caption>
+                    <description>Customize the label of the 'Clear section' button</description>
+                    <translations>
+                        <translation lang="en_US">Clear selection</translation>
+                    </translations>
+                </property>
                 <property key="loadingType" type="enumeration" defaultValue="spinner" required="true">
                     <caption>Loading type</caption>
                     <description />
@@ -244,22 +260,6 @@
                         <enumerationValue key="both">Both</enumerationValue>
                     </enumerationValues>
                 </property>
-                <property key="selectionCountPosition" type="enumeration" defaultValue="bottom" required="true">
-                    <caption>Show selection count</caption>
-                    <description />
-                    <enumerationValues>
-                        <enumerationValue key="top">Top</enumerationValue>
-                        <enumerationValue key="bottom">Bottom</enumerationValue>
-                        <enumerationValue key="off">Off</enumerationValue>
-                    </enumerationValues>
-                </property>
-                <property key="clearSelectionButtonLabel" type="textTemplate" required="false">
-                    <caption>Clear selection label</caption>
-                    <description>Customize the label of the 'Clear section' button</description>
-                    <translations>
-                        <translation lang="en_US">Clear selection</translation>
-                    </translations>
-                </property>
                 <property key="loadMoreButtonCaption" type="textTemplate" required="false">
                     <caption>Load more caption</caption>
                     <description />

packages/pluggableWidgets/datagrid-web/src/components/SelectionCounter.tsx

@@ -14,11 +14,20 @@ export const SelectionCounter = observer(function SelectionCounter({
 
     const containerClass = location === "top" ? "widget-datagrid-tb-start" : "widget-datagrid-pb-start";
 
+    const clearButtonAriaLabel = `${selectionCountStore.clearButtonLabel} (${selectionCountStore.selectedCount} selected)`;
+
     return (
         <If condition={selectionCountStore.displayCount !== ""}>
             <div className={containerClass}>
-                <span className="widget-datagrid-selection-count">{selectionCountStore.displayCount}</span>&nbsp;|&nbsp;
-                <button className="widget-datagrid-clear-selection" onClick={selectActionHelper.onClearSelection}>
+                <span className="widget-datagrid-selection-count" aria-live="polite" aria-atomic="true">
+                    {selectionCountStore.displayCount}
+                </span>
+                &nbsp;|&nbsp;
+                <button
+                    className="widget-datagrid-clear-selection"
+                    onClick={selectActionHelper.onClearSelection}
+                    aria-label={clearButtonAriaLabel}
+                >
                     {selectionCountStore.clearButtonLabel}
                 </button>
             </div>

packages/pluggableWidgets/datagrid-web/typings/DatagridProps.d.ts

@@ -11,6 +11,8 @@ export type ItemSelectionMethodEnum = "checkbox" | "rowClick";
 
 export type ItemSelectionModeEnum = "toggle" | "clear";
 
+export type SelectionCountPositionEnum = "top" | "bottom" | "off";
+
 export type LoadingTypeEnum = "spinner" | "skeleton";
 
 export type ShowContentAsEnum = "attribute" | "dynamicText" | "customContent";
@@ -53,8 +55,6 @@ export type ShowPagingButtonsEnum = "always" | "auto";
 
 export type PagingPositionEnum = "bottom" | "top" | "both";
 
-export type SelectionCountPositionEnum = "top" | "bottom" | "off";
-
 export type ShowEmptyPlaceholderEnum = "none" | "custom";
 
 export type OnClickTriggerEnum = "single" | "double";
@@ -98,6 +98,8 @@ export interface DatagridContainerProps {
     itemSelectionMode: ItemSelectionModeEnum;
     showSelectAllToggle: boolean;
     keepSelection: boolean;
+    selectionCountPosition: SelectionCountPositionEnum;
+    clearSelectionButtonLabel?: DynamicValue<string>;
     loadingType: LoadingTypeEnum;
     refreshIndicator: boolean;
     columns: ColumnsType[];
@@ -107,8 +109,6 @@ export interface DatagridContainerProps {
     showPagingButtons: ShowPagingButtonsEnum;
     showNumberOfRows: boolean;
     pagingPosition: PagingPositionEnum;
-    selectionCountPosition: SelectionCountPositionEnum;
-    clearSelectionButtonLabel?: DynamicValue<string>;
     loadMoreButtonCaption?: DynamicValue<string>;
     showEmptyPlaceholder: ShowEmptyPlaceholderEnum;
     emptyPlaceholder?: ReactNode;
@@ -152,6 +152,8 @@ export interface DatagridPreviewProps {
     itemSelectionMode: ItemSelectionModeEnum;
     showSelectAllToggle: boolean;
     keepSelection: boolean;
+    selectionCountPosition: SelectionCountPositionEnum;
+    clearSelectionButtonLabel: string;
     loadingType: LoadingTypeEnum;
     refreshIndicator: boolean;
     columns: ColumnsPreviewType[];
@@ -161,8 +163,6 @@ export interface DatagridPreviewProps {
     showPagingButtons: ShowPagingButtonsEnum;
     showNumberOfRows: boolean;
     pagingPosition: PagingPositionEnum;
-    selectionCountPosition: SelectionCountPositionEnum;
-    clearSelectionButtonLabel: string;
     loadMoreButtonCaption: string;
     showEmptyPlaceholder: ShowEmptyPlaceholderEnum;
     emptyPlaceholder: { widgetCount: number; renderer: ComponentType<{ children: ReactNode; caption?: string }> };