@procore/data-table 14.46.5 → 14.47.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Change Log
 
+## 14.47.0
+
+### Minor Changes
+
+- 103bc86: Upgrade cdn-translations package to latest version v1
+
+### Patch Changes
+
+- cd6edec: Improve accessibility of the Filters panel:
+  - Filter comboboxes now expose an accessible name matching their visible heading via `aria-label`, so screen readers announce e.g. "CE Number - Title" instead of only the placeholder, and the name persists after a value is selected.
+  - Filter field labels are rendered as `Label` instead of `H3`, removing them from the heading hierarchy so they no longer outrank their parent accordion section headings.
+  - Number filter inputs ("Enter Value") now have distinct, persistent accessible names that identify their purpose and filter group (e.g. "Unit Cost minimum value" / "Unit Cost maximum value" for the "Is Between" operator, and "Unit Cost value" for single-value operators).
+
 ## 14.46.5
 
 ### Patch Changes

package/dist/legacy/index.cjs

@@ -54220,8 +54220,23 @@ function useFilterOptions() {
 }
 var NumberFilterRenderer = React80__default.default.memo(
   function(props) {
-    const ariaLabelledBy = props["aria-labelledby"];
+    const fieldLabel = props["aria-label"];
     const I18n = coreReact.useI18nContext();
+    const minValueAriaLabel = I18n.t("labels.min_value_aria_label", {
+      defaultValue: "%{field} minimum value",
+      field: fieldLabel ?? "",
+      scope
+    }).trim();
+    const maxValueAriaLabel = I18n.t("labels.max_value_aria_label", {
+      defaultValue: "%{field} maximum value",
+      field: fieldLabel ?? "",
+      scope
+    }).trim();
+    const valueAriaLabel = I18n.t("labels.value_aria_label", {
+      defaultValue: "%{field} value",
+      field: fieldLabel ?? "",
+      scope
+    }).trim();
     const defaultFilterOptions = useFilterOptions();
     const lowerLimitInputRef = React80__default.default.useRef(null);
     const [localValue, setLocalValue] = React80__default.default.useState(
@@ -54310,7 +54325,7 @@ var NumberFilterRenderer = React80__default.default.memo(
       {
         block: true,
         label: localLabel,
-        "aria-labelledby": ariaLabelledBy,
+        "aria-label": fieldLabel,
         onClear,
         onSelect,
         placeholder: I18n.t("labels.placeholder", {
@@ -54342,6 +54357,7 @@ var NumberFilterRenderer = React80__default.default.memo(
         {
           ref: lowerLimitInputRef,
           type: "number",
+          "aria-label": hasUpperLimitValue ? minValueAriaLabel : valueAriaLabel,
           placeholder: I18n.t("labels.input_placeholder", {
             defaultValue: "Enter Value",
             scope
@@ -54358,6 +54374,7 @@ var NumberFilterRenderer = React80__default.default.memo(
         coreReact.Input,
         {
           type: "number",
+          "aria-label": maxValueAriaLabel,
           value: localValue == null ? void 0 : localValue.filterTo,
           onChange: onUpdateUpperLimit
         }
@@ -54543,6 +54560,7 @@ var ServerSideFilter = ({
     );
     return null;
   }
+  const filterLabel = typeof filterHeading === "string" ? filterHeading : columnDefinition.headerName;
   return /* @__PURE__ */ React80__default.default.createElement(
     coreReact.Box,
     {
@@ -54552,7 +54570,7 @@ var ServerSideFilter = ({
       style: { width: "100%" }
     },
     filterHeading ? /* @__PURE__ */ React80__default.default.createElement(
-      coreReact.H3,
+      coreReact.Label,
       {
         "data-qa": `data-table-filter-heading-${fieldName}`,
         id: `data-table-filter-heading-${fieldName}`
@@ -54562,6 +54580,7 @@ var ServerSideFilter = ({
     /* @__PURE__ */ React80__default.default.createElement(
       Component4,
       {
+        "aria-label": filterLabel,
         columnDefinition,
         "data-qa": `data-table-filter-input-${fieldName}`,
         getOptions,
@@ -54578,9 +54597,25 @@ var ServerSideFilter = ({
 var DEBOUNCE_TIME = 300;
 function ServerSideNumberFilterRenderer({
   value = [],
-  onChange
+  onChange,
+  "aria-label": fieldLabel
 }) {
   const I18n = coreReact.useI18nContext();
+  const minValueAriaLabel = I18n.t("labels.min_value_aria_label", {
+    defaultValue: "%{field} minimum value",
+    field: fieldLabel ?? "",
+    scope: "dataTable.filters.numberFilter"
+  }).trim();
+  const maxValueAriaLabel = I18n.t("labels.max_value_aria_label", {
+    defaultValue: "%{field} maximum value",
+    field: fieldLabel ?? "",
+    scope: "dataTable.filters.numberFilter"
+  }).trim();
+  const valueAriaLabel = I18n.t("labels.value_aria_label", {
+    defaultValue: "%{field} value",
+    field: fieldLabel ?? "",
+    scope: "dataTable.filters.numberFilter"
+  }).trim();
   const [localFilter, setLocalFilter] = React80.useState(
     () => {
       return {};
@@ -54768,6 +54803,7 @@ function ServerSideNumberFilterRenderer({
     coreReact.Input,
     {
       type: "number",
+      "aria-label": valueAriaLabel,
       placeholder: I18n.t("labels.input_placeholder", {
         defaultValue: "Enter Value",
         scope: "dataTable.filters.numberFilter"
@@ -54779,6 +54815,7 @@ function ServerSideNumberFilterRenderer({
     coreReact.Input,
     {
       type: "number",
+      "aria-label": minValueAriaLabel,
       placeholder: I18n.t("labels.input_placeholder", {
         defaultValue: "Enter Value",
         scope: "dataTable.filters.numberFilter"
@@ -54793,6 +54830,7 @@ function ServerSideNumberFilterRenderer({
     coreReact.Input,
     {
       type: "number",
+      "aria-label": maxValueAriaLabel,
       placeholder: I18n.t("labels.input_placeholder", {
         defaultValue: "Enter Value",
         scope: "dataTable.filters.numberFilter"
@@ -54807,7 +54845,8 @@ function ServerSideNumberFilterRenderer({
 var DEBOUNCE_TIME2 = 300;
 function ServerSideMultiNumberFilterRenderer({
   value = [],
-  onChange
+  onChange,
+  "aria-label": fieldLabel
 }) {
   const I18n = coreReact.useI18nContext();
   const [firstFilter, setFirstFilter] = React80.useState(
@@ -54884,6 +54923,7 @@ function ServerSideMultiNumberFilterRenderer({
   return /* @__PURE__ */ React80__default.default.createElement(coreReact.Box, { style: { display: "flex", flexDirection: "column", gap: "8px" } }, /* @__PURE__ */ React80__default.default.createElement(
     ServerSideNumberFilterRenderer,
     {
+      "aria-label": fieldLabel,
       value: firstFilter.type ? [firstFilter] : [],
       onChange: handleFirstFilterChange
     }
@@ -54920,6 +54960,7 @@ function ServerSideMultiNumberFilterRenderer({
   ), /* @__PURE__ */ React80__default.default.createElement(
     ServerSideNumberFilterRenderer,
     {
+      "aria-label": fieldLabel,
       value: secondFilter.type ? [secondFilter] : [],
       onChange: handleSecondFilterChange
     }
@@ -89377,7 +89418,7 @@ var __decorate230 = function(decorators, target, key, desc) {
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r2 = (c < 3 ? d(r2) : c > 3 ? d(target, key, r2) : d(target, key)) || r2;
   return c > 3 && r2 && Object.defineProperty(target, key, r2), r2;
 };
-var Label = class {
+var Label2 = class {
   constructor() {
     this.enabled = true;
     this.fontSize = 12;
@@ -89392,22 +89433,22 @@ var Label = class {
 };
 __decorate230([
   Validate(BOOLEAN)
-], Label.prototype, "enabled", void 0);
+], Label2.prototype, "enabled", void 0);
 __decorate230([
   Validate(NUMBER(0))
-], Label.prototype, "fontSize", void 0);
+], Label2.prototype, "fontSize", void 0);
 __decorate230([
   Validate(STRING)
-], Label.prototype, "fontFamily", void 0);
+], Label2.prototype, "fontFamily", void 0);
 __decorate230([
   Validate(OPT_FONT_STYLE)
-], Label.prototype, "fontStyle", void 0);
+], Label2.prototype, "fontStyle", void 0);
 __decorate230([
   Validate(OPT_FONT_WEIGHT)
-], Label.prototype, "fontWeight", void 0);
+], Label2.prototype, "fontWeight", void 0);
 __decorate230([
   Validate(COLOR_STRING)
-], Label.prototype, "color", void 0);
+], Label2.prototype, "color", void 0);
 function calculateLabelRotation(opts) {
   const { parallelFlipRotation = 0, regularFlipRotation = 0 } = opts;
   const configuredRotation = opts.rotation ? normalizeAngle360(toRadians(opts.rotation)) : 0;
@@ -91148,7 +91189,7 @@ var PieNodeTag;
   PieNodeTag2[PieNodeTag2["Callout"] = 1] = "Callout";
   PieNodeTag2[PieNodeTag2["Label"] = 2] = "Label";
 })(PieNodeTag || (PieNodeTag = {}));
-var PieSeriesCalloutLabel = class extends Label {
+var PieSeriesCalloutLabel = class extends Label2 {
   constructor() {
     super(...arguments);
     this.offset = 3;
@@ -91177,7 +91218,7 @@ __decorate238([
 __decorate238([
   Validate(BOOLEAN)
 ], PieSeriesCalloutLabel.prototype, "avoidCollisions", void 0);
-var PieSeriesSectorLabel = class extends Label {
+var PieSeriesSectorLabel = class extends Label2 {
   constructor() {
     super(...arguments);
     this.positionOffset = 0;
@@ -91228,7 +91269,7 @@ var PieTitle = class extends Caption {
 __decorate238([
   Validate(BOOLEAN)
 ], PieTitle.prototype, "showInLegend", void 0);
-var DoughnutInnerLabel = class extends Label {
+var DoughnutInnerLabel = class extends Label2 {
   constructor() {
     super(...arguments);
     this.text = "";
@@ -95335,7 +95376,7 @@ var __awaiter11 = function(thisArg, _arguments, P, generator) {
     step((generator = generator.apply(thisArg, [])).next());
   });
 };
-var AreaSeriesLabel = class extends Label {
+var AreaSeriesLabel = class extends Label2 {
   constructor() {
     super(...arguments);
     this.formatter = void 0;
@@ -96377,7 +96418,7 @@ var BarSeriesNodeTag;
   BarSeriesNodeTag2[BarSeriesNodeTag2["Bar"] = 0] = "Bar";
   BarSeriesNodeTag2[BarSeriesNodeTag2["Label"] = 1] = "Label";
 })(BarSeriesNodeTag || (BarSeriesNodeTag = {}));
-var BarSeriesLabel = class extends Label {
+var BarSeriesLabel = class extends Label2 {
   constructor() {
     super(...arguments);
     this.formatter = void 0;
@@ -97122,7 +97163,7 @@ var HistogramSeriesNodeTag;
   HistogramSeriesNodeTag2[HistogramSeriesNodeTag2["Bin"] = 0] = "Bin";
   HistogramSeriesNodeTag2[HistogramSeriesNodeTag2["Label"] = 1] = "Label";
 })(HistogramSeriesNodeTag || (HistogramSeriesNodeTag = {}));
-var HistogramSeriesLabel = class extends Label {
+var HistogramSeriesLabel = class extends Label2 {
   constructor() {
     super(...arguments);
     this.formatter = void 0;
@@ -97733,7 +97774,7 @@ var __awaiter14 = function(thisArg, _arguments, P, generator) {
     step((generator = generator.apply(thisArg, [])).next());
   });
 };
-var LineSeriesLabel = class extends Label {
+var LineSeriesLabel = class extends Label2 {
   constructor() {
     super(...arguments);
     this.formatter = void 0;
@@ -98394,7 +98435,7 @@ var __awaiter15 = function(thisArg, _arguments, P, generator) {
     step((generator = generator.apply(thisArg, [])).next());
   });
 };
-var ScatterSeriesLabel = class extends Label {
+var ScatterSeriesLabel = class extends Label2 {
   constructor() {
     super(...arguments);
     this.formatter = void 0;
@@ -98970,7 +99011,7 @@ var TreemapSeriesNodeDoubleClickEvent = class extends TreemapSeriesNodeBaseClick
     this.type = "nodeDoubleClick";
   }
 };
-var TreemapSeriesLabel = class extends Label {
+var TreemapSeriesLabel = class extends Label2 {
   constructor() {
     super(...arguments);
     this.padding = 10;
@@ -98979,7 +99020,7 @@ var TreemapSeriesLabel = class extends Label {
 __decorate255([
   Validate(NUMBER(0))
 ], TreemapSeriesLabel.prototype, "padding", void 0);
-var TreemapSeriesTileLabel = class extends Label {
+var TreemapSeriesTileLabel = class extends Label2 {
   constructor() {
     super(...arguments);
     this.wrapping = "on-space";
@@ -98991,7 +99032,7 @@ __decorate255([
 var TreemapValueLabel = class {
   constructor() {
     this.style = (() => {
-      const label = new Label();
+      const label = new Label2();
       label.color = "white";
       return label;
     })();
@@ -101522,7 +101563,7 @@ __export(integrated_charts_scene_exports, {
   Group: () => Group,
   HdpiCanvas: () => HdpiCanvas,
   Image: () => Image,
-  Label: () => Label,
+  Label: () => Label2,
   Line: () => Line,
   LinearScale: () => LinearScale,
   Marker: () => Marker,
@@ -103028,7 +103069,7 @@ var LineSparkline = class extends Sparkline {
 LineSparkline.className = "LineSparkline";
 
 // ../../node_modules/@ag-grid-enterprise/sparklines/dist/esm/es6/sparkline/label/label.mjs
-var Label2 = class {
+var Label3 = class {
   constructor() {
     this.enabled = true;
     this.fontSize = 8;
@@ -103053,7 +103094,7 @@ var BarColumnLabelPlacement2;
   BarColumnLabelPlacement3["Center"] = "center";
   BarColumnLabelPlacement3["OutsideEnd"] = "outsideEnd";
 })(BarColumnLabelPlacement2 || (BarColumnLabelPlacement2 = {}));
-var BarColumnLabel = class extends Label2 {
+var BarColumnLabel = class extends Label3 {
   constructor() {
     super(...arguments);
     this.formatter = void 0;
@@ -106150,7 +106191,10 @@ var en_default = {
         labels: {
           and: "and",
           input_placeholder: "Enter Value",
-          placeholder: "Select an item"
+          max_value_aria_label: "%{field} maximum value",
+          min_value_aria_label: "%{field} minimum value",
+          placeholder: "Select an item",
+          value_aria_label: "%{field} value"
         },
         options: {
           any_value: "Any Value",
@@ -107970,7 +108014,10 @@ var pseudo_default = {
         labels: {
           and: "[\u0227\u019E\u1E13]",
           input_placeholder: "[\u1E16\u1E16\u1E16\u019E\u0167\u1E17\u0159 \xB7 \u1E7C\u0227\u0140\u016D\u1E17\u1E17\u1E17]",
-          placeholder: "[\u015E\u015E\u015E\u1E17\u0140\u1E17\u0188\u0167 \xB7 \u0227\u019E \xB7 \u012B\u0167\u1E17\u1E3F\u1E3F\u1E3F]"
+          max_value_aria_label: "[[NOTRANSLATE]%{field}[/NOTRANSLATE] \xB7  \xB7  \xB7 \u1E3F\u0227\u1E8B\u012B\u1E3F\u016D\u1E3F \xB7 \u1E7D\u0227\u0140\u016D\u1E17\u1E17\u1E17]",
+          min_value_aria_label: "[[NOTRANSLATE]%{field}[/NOTRANSLATE] \xB7  \xB7  \xB7 \u1E3F\u012B\u019E\u012B\u1E3F\u016D\u1E3F \xB7 \u1E7D\u0227\u0140\u016D\u1E17\u1E17\u1E17]",
+          placeholder: "[\u015E\u015E\u015E\u1E17\u0140\u1E17\u0188\u0167 \xB7 \u0227\u019E \xB7 \u012B\u0167\u1E17\u1E3F\u1E3F\u1E3F]",
+          value_aria_label: "[[NOTRANSLATE]%{field}[/NOTRANSLATE] \xB7  \xB7 \u1E7D\u0227\u0140\u016D\u1E17\u1E17]"
         },
         options: {
           any_value: "[\u0226\u0226\u019E\u1E8F \xB7 \u1E7C\u0227\u0140\u016D\u1E17\u1E17]",
@@ -111397,6 +111444,7 @@ function ClientSideFilterInner(props) {
   const { Component: Component4, columnDefinition, onChange, options, value } = props;
   const filterHeading = ((_b = (_a = columnDefinition.filterProps) == null ? void 0 : _a.getFilterHeadingText) == null ? void 0 : _b.call(_a, columnDefinition)) ?? columnDefinition.headerName;
   const filterOptions = React80__default.default.useMemo(() => options ?? [], [options]);
+  const filterLabel = typeof filterHeading === "string" ? filterHeading : columnDefinition.headerName;
   return /* @__PURE__ */ React80__default.default.createElement(coreReact.Box, { as: "li", display: "block", paddingBottom: "xl", style: { width: "100%" } }, filterHeading && /* @__PURE__ */ React80__default.default.createElement(
     coreReact.Label,
     {
@@ -111408,7 +111456,7 @@ function ClientSideFilterInner(props) {
     Component4,
     {
       "data-qa": `data-table-filter-input-${columnDefinition.field}`,
-      "aria-labelledby": filterHeading ? `data-table-filter-heading-${columnDefinition.field}` : void 0,
+      "aria-label": filterLabel,
       columnDefinition,
       onChange,
       options: filterOptions,

package/dist/legacy/index.d.cts

@@ -77,7 +77,7 @@ type NumberFilterValue$1 = {
     filterTo?: number;
 } | undefined;
 type NumberFilterProps = FilterComponentProps<unknown, NumberFilterValue$1> & {
-    'aria-labelledby'?: string;
+    'aria-label'?: string;
 };
 declare const NumberFilterRenderer: React__default.NamedExoticComponent<NumberFilterProps>;
 
@@ -1233,8 +1233,9 @@ type NumberFilterValue = ServerSideNumberFilterModel[];
 type NumberFilterRendererProps = {
     value?: NumberFilterValue;
     onChange?: (models: NumberFilterValue) => void;
+    'aria-label'?: string;
 };
-declare function ServerSideNumberFilterRenderer({ value, onChange, }: NumberFilterRendererProps): React__default.JSX.Element;
+declare function ServerSideNumberFilterRenderer({ value, onChange, 'aria-label': fieldLabel, }: NumberFilterRendererProps): React__default.JSX.Element;
 
 type DateFilterComponentProps = FilterComponentProps<{
     date: Date;
@@ -1260,8 +1261,9 @@ type MultiServerSideNumberFilterModel = ServerSideNumberFilterModel & {
 type MultiNumberFilterRendererProps = {
     value?: MultiServerSideNumberFilterModel[];
     onChange?: (models: MultiServerSideNumberFilterModel[]) => void;
+    'aria-label'?: string;
 };
-declare function ServerSideMultiNumberFilterRenderer({ value, onChange, }: MultiNumberFilterRendererProps): React__default.JSX.Element;
+declare function ServerSideMultiNumberFilterRenderer({ value, onChange, 'aria-label': fieldLabel, }: MultiNumberFilterRendererProps): React__default.JSX.Element;
 
 type SingleSelectFilterProps = FilterComponentProps<any, (string | number)[]>;
 declare function SingleSelectFilterRenderer({ columnDefinition, getOptions, loading, onChange, onScrollBottom, onSearch, options, value, ...props }: SingleSelectFilterProps): React__default.JSX.Element;

package/dist/legacy/index.d.ts

@@ -77,7 +77,7 @@ type NumberFilterValue$1 = {
     filterTo?: number;
 } | undefined;
 type NumberFilterProps = FilterComponentProps<unknown, NumberFilterValue$1> & {
-    'aria-labelledby'?: string;
+    'aria-label'?: string;
 };
 declare const NumberFilterRenderer: React__default.NamedExoticComponent<NumberFilterProps>;
 
@@ -1233,8 +1233,9 @@ type NumberFilterValue = ServerSideNumberFilterModel[];
 type NumberFilterRendererProps = {
     value?: NumberFilterValue;
     onChange?: (models: NumberFilterValue) => void;
+    'aria-label'?: string;
 };
-declare function ServerSideNumberFilterRenderer({ value, onChange, }: NumberFilterRendererProps): React__default.JSX.Element;
+declare function ServerSideNumberFilterRenderer({ value, onChange, 'aria-label': fieldLabel, }: NumberFilterRendererProps): React__default.JSX.Element;
 
 type DateFilterComponentProps = FilterComponentProps<{
     date: Date;
@@ -1260,8 +1261,9 @@ type MultiServerSideNumberFilterModel = ServerSideNumberFilterModel & {
 type MultiNumberFilterRendererProps = {
     value?: MultiServerSideNumberFilterModel[];
     onChange?: (models: MultiServerSideNumberFilterModel[]) => void;
+    'aria-label'?: string;
 };
-declare function ServerSideMultiNumberFilterRenderer({ value, onChange, }: MultiNumberFilterRendererProps): React__default.JSX.Element;
+declare function ServerSideMultiNumberFilterRenderer({ value, onChange, 'aria-label': fieldLabel, }: MultiNumberFilterRendererProps): React__default.JSX.Element;
 
 type SingleSelectFilterProps = FilterComponentProps<any, (string | number)[]>;
 declare function SingleSelectFilterRenderer({ columnDefinition, getOptions, loading, onChange, onScrollBottom, onSearch, options, value, ...props }: SingleSelectFilterProps): React__default.JSX.Element;