@geotab/zenith 3.11.0 → 3.11.1

package/README.md

@@ -47,6 +47,14 @@ Zenith library provides components defined in Zenith Design System. It includes
 
 ## Change log
 
+### 3.11.1
+
+- Fix `SummaryTile` accessibility: add `tooltipAriaLabel` prop for accessible tooltip name
+- Fix aria-label on generic div in zen-status-pill expand button
+- Fix `SortControl` accessibility: remove redundant aria-label, add visually-hidden sort direction text
+- Fix `SelectList` keyboard navigation: skip disabled items
+- Fix column selection accessibility
+
 ### 3.11.0
 
 - Add `ControlledMenuList` component and `createMenuItem`/`createControlledMenuList` factories for typed, path-based menu navigation with keyboard support

package/dist/checkboxListWithAction/checkboxListWithAction.js

@@ -192,18 +192,10 @@ const CheckboxListWithAction = ({
     });
     return elements;
   }, [options]);
-  const updateTabIndex = (0, react_1.useCallback)((newRowIndex, newElementType) => {
-    const elements = getFocusableElements();
-    elements.forEach(({
-      element,
-      rowIndex,
-      type,
-      blocked
-    }) => {
-      const isActive = rowIndex === newRowIndex && type === newElementType && !blocked;
-      element.setAttribute("tabindex", isActive ? "0" : "-1");
-    });
-  }, [getFocusableElements]);
+  const getTabIndex = (0, react_1.useCallback)((rowIndex, elementType, blocked) => {
+    if (blocked) return -1;
+    return rowIndex === focusedRowIndex && elementType === focusedElementType ? 0 : -1;
+  }, [focusedRowIndex, focusedElementType]);
   const handleKeyDown = (0, react_1.useCallback)(
   // eslint-disable-next-line complexity
   e => {
@@ -277,7 +269,6 @@ const CheckboxListWithAction = ({
       e.preventDefault();
       setFocusedRowIndex(newRowIndex);
       setFocusedElementType(newElementType);
-      updateTabIndex(newRowIndex, newElementType);
       // Find and focus the target element
       const targetElement = elements.find(({
         rowIndex,
@@ -286,7 +277,7 @@ const CheckboxListWithAction = ({
       }) => rowIndex === newRowIndex && type === newElementType && !blocked);
       targetElement === null || targetElement === void 0 ? void 0 : targetElement.element.focus();
     }
-  }, [getFocusableElements, options, focusedRowIndex, focusedElementType, checkboxId, onChange, handleTab, updateTabIndex]);
+  }, [getFocusableElements, options, focusedRowIndex, focusedElementType, checkboxId, onChange, handleTab]);
   const handleFocus = (0, react_1.useCallback)(e => {
     const elements = getFocusableElements();
     const focusedElement = e.target;
@@ -296,10 +287,9 @@ const CheckboxListWithAction = ({
     if (targetElementInfo && !targetElementInfo.blocked && (targetElementInfo.rowIndex !== focusedRowIndex || targetElementInfo.type !== focusedElementType)) {
       setFocusedRowIndex(targetElementInfo.rowIndex);
       setFocusedElementType(targetElementInfo.type);
-      updateTabIndex(targetElementInfo.rowIndex, targetElementInfo.type);
     }
-  }, [focusedRowIndex, focusedElementType, getFocusableElements, updateTabIndex]);
-  // Initialize tabindex when options first become available
+  }, [focusedRowIndex, focusedElementType, getFocusableElements]);
+  // Initialize focusedRowIndex when options first become available
   (0, react_1.useEffect)(() => {
     if (options && options.length > 0 && !isInitialized.current) {
       // Find first non-blocked row
@@ -310,17 +300,25 @@ const CheckboxListWithAction = ({
       if (firstValidRow < options.length) {
         setFocusedRowIndex(firstValidRow);
         setFocusedElementType("checkbox");
-        updateTabIndex(firstValidRow, "checkbox");
         isInitialized.current = true;
       }
     }
-  }, [options, updateTabIndex]);
-  // Update tabindex when focused position changes (only after initialization)
+  }, [options]);
+  // Correct focusedRowIndex if options shrinks or the focused row becomes blocked after init
   (0, react_1.useEffect)(() => {
-    if (isInitialized.current) {
-      updateTabIndex(focusedRowIndex, focusedElementType);
+    if (!isInitialized.current || !options || options.length === 0) {
+      return;
+    }
+    const isInBounds = focusedRowIndex < options.length;
+    if (isInBounds && !options[focusedRowIndex].blocked) {
+      return;
+    }
+    const firstValid = options.findIndex(opt => !opt.blocked);
+    if (firstValid >= 0) {
+      setFocusedRowIndex(firstValid);
+      setFocusedElementType("checkbox");
     }
-  }, [focusedRowIndex, focusedElementType, updateTabIndex]);
+  }, [options, focusedRowIndex]);
   const getLabelColorInfo = (color, withRightPadding, isHidden, extraArgs) => {
     if (!color) {
       return null;
@@ -350,7 +348,7 @@ const CheckboxListWithAction = ({
       })
     }));
   };
-  const renderLabel = (option, lbl, ttl) => {
+  const renderLabel = (option, lbl, ttl, rowIndex) => {
     const additionalTitle = option.countSelectedChild && option.isWithAction ? translate("Number of selected child groups - {count}").replace("{count}", option.countSelectedChild.toString()) : "";
     const title = option.isWithAction ? translate("View {groupName} children").replace("{groupName}", ttl).concat(additionalTitle ? `${". "}${additionalTitle}` : "") : translate("Toggle {groupName} filter").replace("{groupName}", ttl);
     const classN = (0, classNames_1.classNames)(["zen-checkbox-list-with-action__label", "zen-ellipsis", option.isWithAction ? "zen-checkbox-list-with-action__label--action" : ""]);
@@ -379,7 +377,8 @@ const CheckboxListWithAction = ({
       onClick: handleClick,
       title: title,
       className: classN,
-      tabIndex: -1
+      tabIndex: getTabIndex(rowIndex, "button", option.blocked),
+      disabled: option.blocked
     }, otherArgs, {
       children: childEl
     })) : (0, jsx_runtime_1.jsx)("div", {
@@ -415,7 +414,7 @@ const CheckboxListWithAction = ({
       children: optionsArr.map((opt, ind) => {
         const titleForRender = opt.title || opt.label;
         const labelForRender = selectSearchTerm(opt.label);
-        const labelElement = renderLabel(opt, labelForRender, titleForRender);
+        const labelElement = renderLabel(opt, labelForRender, titleForRender, ind);
         return (0, jsx_runtime_1.jsxs)("li", {
           className: (0, classNames_1.classNames)(["zen-checkbox-list-with-action__action-item", opt.isWithAction ? "zen-checkbox-list-with-action__action-item--action" : ""]),
           "data-item": opt.property,
@@ -429,7 +428,7 @@ const CheckboxListWithAction = ({
             title: translate("Toggle {groupName} filter").replace("{groupName}", titleForRender),
             describedBy: opt.isWithAction ? navigationInstructionsId : undefined,
             "data-indeterminate": opt.partialChecked,
-            tabIndex: -1,
+            tabIndex: getTabIndex(ind, "checkbox", opt.blocked),
             children: opt.isWithAction ? null : labelElement
           }), opt.isWithAction && labelElement]
         }, `li_${ind}_${opt.property}`);

package/dist/dataGrid/withFlexibleColumns/components/columnSettingsList.js

@@ -1,54 +1,126 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+const {
+  injectString
+} = require("../../../utils/localization/translationsDictionary");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.ColumnSettingsList = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const groupColumns_1 = require("../../extensions/groupColumns");
 const selectList_1 = require("../../../selectList/selectList");
 const checkboxState_1 = require("../../../checkbox/checkboxState");
-const SubColumnsList = ({ title, columns, settings, disabledColumns, onChange, sortColumns }) => {
-    const id = (0, react_1.useId)();
-    const sortColumnsInt = (0, react_1.useCallback)((a, b) => {
-        if (sortColumns) {
-            return sortColumns(a.title, b.title);
-        }
-        return 0;
-    }, [sortColumns]);
-    const items = (0, react_1.useMemo)(() => columns.sort(sortColumnsInt).map(c => ({
-        id: c.id,
-        title: c.title,
-        disabled: (disabledColumns === null || disabledColumns === void 0 ? void 0 : disabledColumns.includes(c.name)) || false,
-        showCheckbox: true,
-        children: c.title
-    })), [columns, disabledColumns, sortColumnsInt]);
-    const state = columns.reduce((res, c) => {
-        res.set(c.id, settings.get(c.name) !== false ? checkboxState_1.CheckboxState.On : checkboxState_1.CheckboxState.Off);
-        return res;
-    }, new Map());
-    const onChangeItem = (0, react_1.useCallback)((newState) => {
-        const newSettings = new Map(settings);
-        newState.forEach((stateVal, itemId) => {
-            var _a;
-            newSettings.set((_a = columns.find(c => c.id === itemId)) === null || _a === void 0 ? void 0 : _a.name, stateVal === checkboxState_1.CheckboxState.On);
-        });
-        onChange && onChange(newSettings);
-    }, [columns, settings, onChange]);
-    const list = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(selectList_1.SelectList, { id: id, items: items, value: state, title: title || "", multiselect: true, showCheckbox: true, onChange: onChangeItem }), [id, items, state, title, onChangeItem]);
-    if (!title) {
-        return list;
+injectString("cs", "Select visible columns", "Vyberte viditeln\xE9 sloupce");
+injectString("da-DK", "Select visible columns", "V\xE6lg synlige kolonner");
+injectString("de", "Select visible columns", "Sichtbare Spalten ausw\xE4hlen");
+injectString("en", "Select visible columns", "Select visible columns");
+injectString("es", "Select visible columns", "Seleccionar columnas visibles");
+injectString("fi-FI", "Select visible columns", "Valitse n\xE4kyv\xE4t sarakkeet");
+injectString("fr", "Select visible columns", "S\xE9lectionner les colonnes visibles");
+injectString("fr-FR", "Select visible columns", "S\xE9lectionner les colonnes visibles");
+injectString("hu-HU", "Select visible columns", "L\xE1that\xF3 oszlopok kiv\xE1laszt\xE1sa");
+injectString("id", "Select visible columns", "Pilih kolom yang terlihat");
+injectString("it", "Select visible columns", "Selezionare colonne visibili");
+injectString("ja", "Select visible columns", "\u8868\u793A\u5217\u3092\u9078\u629E");
+injectString("ko-KR", "Select visible columns", "\uD45C\uC2DC\uB418\uB294 \uC5F4 \uC120\uD0DD");
+injectString("ms", "Select visible columns", "Pilih lajur yang boleh dilihat");
+injectString("nb-NO", "Select visible columns", "Velg synlige kolonner");
+injectString("nl", "Select visible columns", "Zichtbare kolommen selecteren");
+injectString("pl", "Select visible columns", "Wybierz widoczne kolumny");
+injectString("pt-BR", "Select visible columns", "Selecionar colunas vis\xEDveis");
+injectString("pt-PT", "Select visible columns", "Selecionar colunas vis\xEDveis");
+injectString("sk-SK", "Select visible columns", "Vybra\u0165 vidite\u013En\xE9 st\u013Apce");
+injectString("sv", "Select visible columns", "V\xE4lj synbara kolumner");
+injectString("th", "Select visible columns", "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E04\u0E2D\u0E25\u0E31\u0E21\u0E19\u0E4C\u0E17\u0E35\u0E48\u0E21\u0E2D\u0E07\u0E40\u0E2B\u0E47\u0E19\u0E44\u0E14\u0E49");
+injectString("tr", "Select visible columns", "G\xF6r\xFCn\xFCr s\xFCtunlar\u0131 se\xE7");
+injectString("zh-Hans", "Select visible columns", "\u9009\u62E9\u53EF\u89C1\u5217");
+injectString("zh-TW", "Select visible columns", "\u9078\u53D6\u53EF\u898B\u6B04");
+injectString("ro-RO", "Select visible columns", "Selecta\u021Bi coloanele vizibile");
+injectString("ar-SA", "Select visible columns", "\u062A\u062D\u062F\u064A\u062F \u0627\u0644\u0623\u0639\u0645\u062F\u0629 \u0627\u0644\u0645\u0631\u0626\u064A\u0629");
+const useLanguage_1 = require("../../../utils/localization/useLanguage");
+const SubColumnsList = ({
+  title,
+  columns,
+  settings,
+  disabledColumns,
+  onChange,
+  sortColumns
+}) => {
+  const id = (0, react_1.useId)();
+  const {
+    translate
+  } = (0, useLanguage_1.useLanguage)();
+  const sortColumnsInt = (0, react_1.useCallback)((a, b) => {
+    if (sortColumns) {
+      return sortColumns(a.title, b.title);
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "zen-columns-list__sub-section", children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-columns-list__title zen-ellipsis", children: title }), list] }));
+    return 0;
+  }, [sortColumns]);
+  const items = (0, react_1.useMemo)(() => columns.sort(sortColumnsInt).map(c => ({
+    id: c.id,
+    title: c.title,
+    disabled: (disabledColumns === null || disabledColumns === void 0 ? void 0 : disabledColumns.includes(c.name)) || false,
+    showCheckbox: true,
+    children: c.title
+  })), [columns, disabledColumns, sortColumnsInt]);
+  const allDisabled = (0, react_1.useMemo)(() => items.every(item => item.disabled), [items]);
+  const state = columns.reduce((res, c) => {
+    res.set(c.id, settings.get(c.name) !== false ? checkboxState_1.CheckboxState.On : checkboxState_1.CheckboxState.Off);
+    return res;
+  }, new Map());
+  const onChangeItem = (0, react_1.useCallback)(newState => {
+    const newSettings = new Map(settings);
+    newState.forEach((stateVal, itemId) => {
+      var _a;
+      newSettings.set((_a = columns.find(c => c.id === itemId)) === null || _a === void 0 ? void 0 : _a.name, stateVal === checkboxState_1.CheckboxState.On);
+    });
+    onChange && onChange(newSettings);
+  }, [columns, settings, onChange]);
+  const list = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(selectList_1.SelectList, {
+    id: id,
+    items: items,
+    value: state,
+    title: title || translate("Select visible columns"),
+    multiselect: true,
+    showCheckbox: true,
+    onChange: onChangeItem,
+    disabled: allDisabled
+  }), [id, items, state, title, translate, onChangeItem, allDisabled]);
+  if (!title) {
+    return list;
+  }
+  return (0, jsx_runtime_1.jsxs)("div", {
+    className: "zen-columns-list__sub-section",
+    children: [(0, jsx_runtime_1.jsx)("div", {
+      className: "zen-columns-list__title zen-ellipsis",
+      children: title
+    }), list]
+  });
 };
-function ColumnSettingsList({ columns, settings, disabledColumns, onChange, sortGroups, sortColumns }) {
-    const groupped = (0, groupColumns_1.groupColumns)(columns);
-    const sortGroupsInt = (0, react_1.useCallback)((a, b) => {
-        if (sortGroups) {
-            return sortGroups(a[0], b[0]);
-        }
-        return 0;
-    }, [sortGroups]);
-    return Array.from(groupped.entries())
-        .sort(sortGroupsInt)
-        .map(([title, cs]) => ((0, jsx_runtime_1.jsx)(SubColumnsList, { title: title, columns: cs, settings: settings, disabledColumns: disabledColumns, onChange: onChange, sortColumns: sortColumns }, cs.map(c => c.id).join("-"))));
+function ColumnSettingsList({
+  columns,
+  settings,
+  disabledColumns,
+  onChange,
+  sortGroups,
+  sortColumns
+}) {
+  const groupped = (0, groupColumns_1.groupColumns)(columns);
+  const sortGroupsInt = (0, react_1.useCallback)((a, b) => {
+    if (sortGroups) {
+      return sortGroups(a[0], b[0]);
+    }
+    return 0;
+  }, [sortGroups]);
+  return Array.from(groupped.entries()).sort(sortGroupsInt).map(([title, cs]) => (0, jsx_runtime_1.jsx)(SubColumnsList, {
+    title: title,
+    columns: cs,
+    settings: settings,
+    disabledColumns: disabledColumns,
+    onChange: onChange,
+    sortColumns: sortColumns
+  }, cs.map(c => c.id).join("-")));
 }
-exports.ColumnSettingsList = ColumnSettingsList;
+exports.ColumnSettingsList = ColumnSettingsList;