@k-int/stripes-kint-components 2.6.5 → 2.6.6

package/CHANGELOG.md

@@ -1,3 +1,6 @@
+## 2.6.6 2022-06-23
+  * Fix aria label null safety in ActionList
+
 ## 2.6.5 2022-06-22
   * Added label override ability for custom property types. Also documentation
 

package/es/lib/ActionList/ActionListFieldArray.js

@@ -255,12 +255,24 @@ var ActionListFieldArray = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, r
           actionFunction = function actionFunction() {
             return toggleEditing(data.id);
           };
+        }
+
+        var ariaLabel = "action-".concat(action.name, "[").concat(data.rowIndex, "]");
+
+        if (action !== null && action !== void 0 && action.ariaLabel) {
+          if (typeof action.ariaLabel === 'function') {
+            ariaLabel = action.ariaLabel(data);
+          } else if (typeof action.ariaLabel === 'string') {
+            ariaLabel = action.ariaLabel;
+          } else {
+            throw new Error("Provided ariaLabel for action \"".concat(action.name, "\" must be a function or a string."));
+          }
         } // If we're handed an icon, use that for the action button
 
 
         if (action.icon) {
           return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.IconButton, {
-            ariaLabel: action === null || action === void 0 ? void 0 : action.ariaLabel(data),
+            ariaLabel: ariaLabel,
             disabled: editing,
             icon: action.icon,
             onClick: function onClick() {
@@ -274,6 +286,7 @@ var ActionListFieldArray = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, r
 
 
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+          ariaLabel: ariaLabel,
           disabled: editing,
           marginBottom0: true,
           onClick: function onClick() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k-int/stripes-kint-components",
-  "version": "2.6.5",
+  "version": "2.6.6",
   "description": "Stripes Component library for K-Int specific applications",
   "sideEffects": [
     "*.css"

package/src/lib/ActionList/ActionListFieldArray.js

@@ -183,12 +183,23 @@ const ActionListFieldArray = forwardRef(({
             actionFunction = () => toggleEditing(data.id);
           }
 
+          let ariaLabel = `action-${action.name}[${data.rowIndex}]`;
+          if (action?.ariaLabel) {
+            if (typeof action.ariaLabel === 'function') {
+              ariaLabel = action.ariaLabel(data);
+            } else if (typeof action.ariaLabel === 'string') {
+              ariaLabel = action.ariaLabel;
+            } else {
+              throw new Error(`Provided ariaLabel for action "${action.name}" must be a function or a string.`);
+            }
+          }
+
           // If we're handed an icon, use that for the action button
           if (action.icon) {
             return (
               <IconButton
                 key={`action-${action.name}[${data.rowIndex}]`}
-                ariaLabel={action?.ariaLabel(data)}
+                ariaLabel={ariaLabel}
                 disabled={editing}
                 icon={action.icon}
                 onClick={() => (actionFunction ? actionFunction() : () => null)}
@@ -201,6 +212,7 @@ const ActionListFieldArray = forwardRef(({
           return (
             <Button
               key={`action-${action.name}[${data.rowIndex}]`}
+              ariaLabel={ariaLabel}
               disabled={editing}
               marginBottom0
               onClick={() => (actionFunction ? actionFunction() : () => null)}

package/src/lib/ActionList/README.md

@@ -89,7 +89,7 @@ const myRef = useRef();
 
 Name | Type | Description | default | required
 --- | --- | --- | --- | ---
-actionAssigner | function | A function which will be passed the entire row object, and can use that to assign an array of actions valid for that row, in the form `{ name: 'actionName', label: "Action Label", icon: 'someIcon', callback: () => null, to: toObject, ariaLabel: () => null }`. The prop `name` is required, but `label` and `icon` are optional props. The `callback` prop will be prioritised ahead of the deprecated actionCalls prop. The `ariaLabel` prop will give the associated icon button an aria-label, including information about the associated content data. If a `to` prop is passed, then the resulting button will be rendered as a <Link/> element, as per Stripes Button/IconButton.| | ✓ |
+actionAssigner | function | A function which will be passed the entire row object, and can use that to assign an array of actions valid for that row, in the form `{ name: 'actionName', label: "Action Label", icon: 'someIcon', callback: () => null, to: toObject, ariaLabel: () => null }`. The prop `name` is required, but `label` and `icon` are optional props. The `callback` prop will be prioritised ahead of the deprecated actionCalls prop. The `ariaLabel` prop, which can be either a static string or a function accepting the row data and returning a string, will give the associated icon button an aria-label. If a `to` prop is passed, then the resulting button will be rendered as a <Link/> element, as per Stripes Button/IconButton.| | ✓ |
 actionCalls (DEPRECATED) | object<function> | An object with keys matching any "actions" the `actionAssigner` may have assigned (In addition to special case `create`, if relevant), and values which are functions. These functions will be handed the row as a parameter. THESE CAN NOW BE PASSED AS "callback" in the actionAssigner. | {} | ✕ |
 columnMapping | object | An object which will act on the rendered MultiColumnList headers to map the labels for each `visibleField` | | ✕ |
 contentData | array | An array of objects to render along with their actions | | ✓ |