lightning-base-components 1.22.2-alpha → 1.22.3-alpha

package/README.md

@@ -1,5 +1,7 @@
 # lightning-base-components
 
+> ⚠️ Publishing of the package has been paused. Salesforce employees should use the internal package.
+
 Base Lightning web components are the building blocks of the modern user interfaces
 for Lightning Experience, the Salesforce app, and Lightning Communities. The components
 incorporate Lightning Design System markup and classes, providing improved performance

package/metadata/raptor.json

@@ -573,6 +573,11 @@
       {
         "name": "showHelpMessageIfInvalid"
       }
+    ],
+    "staticProperties": [
+      {
+        "name": "validationOptOut"
+      }
     ]
   },
   "clickToDial": {
@@ -3296,7 +3301,7 @@
         "name": "autocomplete"
       },
       {
-        "name": "readonly"
+        "name": "readOnly"
       },
       {
         "name": "selectMode"
@@ -3668,7 +3673,7 @@
         "name": "name"
       },
       {
-        "name": "readonly"
+        "name": "readOnly"
       },
       {
         "name": "required"
@@ -3682,6 +3687,11 @@
       {
         "name": "value"
       }
+    ],
+    "methods": [
+      {
+        "name": "focus"
+      }
     ]
   },
   "primitiveLayout": {
@@ -4141,6 +4151,11 @@
       {
         "name": "variant"
       }
+    ],
+    "staticProperties": [
+      {
+        "name": "stylesheets"
+      }
     ]
   },
   "progressRing": {
@@ -4171,6 +4186,14 @@
       {
         "name": "value"
       }
+    ],
+    "staticProperties": [
+      {
+        "name": "stylesheets"
+      },
+      {
+        "name": "validationOptOut"
+      }
     ]
   },
   "prompt": {
@@ -4990,6 +5013,11 @@
       {
         "name": "type"
       }
+    ],
+    "staticProperties": [
+      {
+        "name": "validationOptOut"
+      }
     ]
   },
   "toast": {
@@ -5141,6 +5169,7 @@
   },
   "uiGraphQLBatchApi": {},
   "uiLayoutApi": {},
+  "uiLayoutUserStateApi": {},
   "uiLearningContentPlatformApi": {},
   "uiListApi": {
     "minVersion": "45.0"

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "lightning-base-components",
-    "version": "1.22.2-alpha",
+    "version": "1.22.3-alpha",
     "license": "MIT",
     "files": [
         "external",
@@ -1066,6 +1066,10 @@
                 "name": "@salesforce/label/LightningRecordPicker.emptyStateNoResultText",
                 "path": "scopedImports/@salesforce-label-LightningRecordPicker.emptyStateNoResultText.js"
             },
+            {
+                "name": "@salesforce/label/LightningRecordPicker.actionIconAlternativeText",
+                "path": "scopedImports/@salesforce-label-LightningRecordPicker.actionIconAlternativeText.js"
+            },
             {
                 "name": "@salesforce/label/LightningPicklist.available",
                 "path": "scopedImports/@salesforce-label-LightningPicklist.available.js"
@@ -1489,6 +1493,7 @@
             "lightning-button-stateful",
             "lightning-card",
             "lightning-calendar",
+            "lightning-checkbox-group",
             "lightning-color-picker-custom",
             "lightning-color-picker-panel",
             "lightning-combobox",
@@ -1544,6 +1549,7 @@
             "lightning-tab-bar",
             "lightning-tabset",
             "lightning-textarea",
+            "lightning-tile",
             "lightning-timepicker",
             "lightning-vertical-navigation",
             "lightning-vertical-navigation-item",
@@ -1570,6 +1576,8 @@
             "lightning-popup-source",
             "lightning-primitive-icon",
             "lightning-primitive-iframe",
+            "lightning-progress-indicator",
+            "lightning-progress-step",
             "lightning-static-map",
             "lightning-toast",
             "lightning-toast-container",
@@ -1660,7 +1668,9 @@
             "lightning-primitive-input-toggle",
             "lightning-prompt",
             "lightning-progress-bar",
+            "lightning-progress-indicator",
             "lightning-progress-ring",
+            "lightning-progress-step",
             "lightning-radio-group",
             "lightning-rich-text-toolbar-button",
             "lightning-rich-text-toolbar-button-group",
@@ -1672,6 +1682,7 @@
             "lightning-tabset",
             "lightning-toast",
             "lightning-toast-container",
+            "lightning-tile",
             "lightning-timepicker",
             "lightning-vertical-navigation",
             "lightning-vertical-navigation-item",

package/scopedImports/@salesforce-label-LightningRecordPicker.actionIconAlternativeText.js

@@ -0,0 +1 @@
+export default 'Action';

package/src/lightning/ariaObserver/ariaObserver.js

@@ -40,7 +40,7 @@ const SUPPORTED_ATTRIBUTES_ARRAY = [
     [
         'aria-details',
         {
-            ariaReflection: 'ariaControlsElements',
+            ariaReflection: 'ariaDetailsElements',
             polyfill: setAriaDetails,
         },
     ],

package/src/lightning/baseCombobox/baseCombobox.html

@@ -131,7 +131,7 @@
                                 <template if:true={item.label}>
                                     <li role="presentation" class="slds-listbox__item">
                                         <div class="slds-media slds-listbox__option slds-listbox__option_plain slds-media_small" role="presentation">
-                                            <h3 role="presentation" title={item.label}>{item.label}</h3>
+                                            <h3 role="presentation" title={item.label} class="slds-listbox__option-header">{item.label}</h3>
                                         </div>
                                     </li>
                                 </template>

package/src/lightning/baseCombobox/baseCombobox.js

@@ -102,6 +102,7 @@ export default class LightningBaseCombobox extends LightningShadowBaseClass {
     _logoLoaded = false;
     _inputDescribedBy = [];
     _inputAriaControls;
+    _inputAriaDetails;
     _activeElementDomId;
     _autocomplete = 'off';
     _dropdownAlignment = 'left';

package/src/lightning/baseCombobox/input-text.slds.css

@@ -246,7 +246,7 @@
         --sds-c-inputtext-text-color: var(--slds-c-inputtext-text-color);
         --sds-c-inputtext-font-size: var(
             --slds-c-inputtext-font-size,
-            var(--slds-g-font-size-base)
+            var(--slds-g-font-scale-neg-2)
         );
         --sds-c-inputtext-text-color-placeholder: var(
             --slds-c-inputtext-text-color-placeholder,
@@ -264,7 +264,7 @@
 
         display: flex;
         flex-wrap: wrap;
-        flex-direction: column;
+        align-items: center;
     }
 /**
    * Input Container
@@ -371,10 +371,6 @@
         --sds-c-inputtext-color-border: var(--slds-g-color-border-disabled-1);
         --sds-c-inputtext-text-color: var(--slds-g-color-on-disabled-2);
     }
-:host([data-render-mode="shadow"][disabled]) [part='input-text'] {
-        --sds-c-inputtext-text-color-placeholder:
-            var(--slds-g-color-on-disabled-2);
-    }
 /**
    * Label
    *
@@ -388,7 +384,10 @@
             --slds-c-inputtext-label-color,
             var(--slds-g-color-on-surface-2)
         );
-        font-size: var(--slds-s-label-font-size, var(--slds-g-font-scale-neg-2));
+        font-size: var(
+            --slds-c-inputtext-label-font-size,
+            var(--slds-g-font-scale-neg-3)
+        );
         margin-block-end: var(--slds-g-sizing-1);
 
         /* We inline flex to control the spacing between elements and not have to rely on whitespace characters */

package/src/lightning/baseComboboxItem/card.lbc.native.css

@@ -1,2 +1,3 @@
 @import 'lightning/sldsCommon';
+@import 'lightning/sldsMediaObject';
 @import './listbox.slds.css';

package/src/lightning/baseComboboxItem/inline.lbc.native.css

@@ -1,2 +1,3 @@
 @import 'lightning/sldsCommon';
+@import 'lightning/sldsMediaObject';
 @import './listbox.slds.css';

package/src/lightning/buttonIcon/button-icon.slds.css

@@ -553,19 +553,19 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   --sds-c-button-color-border-disabled: var(--slds-g-color-border-disabled-1);
 }
 /* slds-icon interaction states */
-:host([data-render-mode="shadow"]) [part~='button-icon']:hover {
+:host([data-render-mode="shadow"]) [part~='button-icon']:not(.slds-is-selected):hover {
   --slds-c-icon-color-foreground: var(
-    --slds-c-buttonicon-color-foreground-hover, 
+    --slds-c-buttonicon-color-foreground-hover,
     var(--slds-g-color-accent-3)
   );
 }
-:host([data-render-mode="shadow"]) [part~='button-icon']:focus {
+:host([data-render-mode="shadow"]) [part~='button-icon']:not(.slds-is-selected):focus {
   --slds-c-icon-color-foreground: var(
     --slds-c-buttonicon-color-foreground-focus,
     var(--slds-g-color-accent-3)
   );
 }
-:host([data-render-mode="shadow"]) [part~='button-icon']:active {
+:host([data-render-mode="shadow"]) [part~='button-icon']:not(.slds-is-selected):active {
   --slds-c-icon-color-foreground: var(
     --slds-c-buttonicon-color-foreground-active,
     var(--slds-g-color-accent-3)
@@ -643,7 +643,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
   /* Icon */
   --slds-c-buttonicon-color-foreground: var(--slds-g-color-neutral-base-100);
-  --slds-c-buttonicon-color-foreground-hover: color-mix(in oklab, var(--slds-g-color-on-surface-inverse-1), transparent 25%);
+  --slds-c-buttonicon-color-foreground-hover: var(--slds-g-color-neutral-base-95);
   --slds-c-buttonicon-color-foreground-focus: var(--slds-g-color-neutral-base-95);
   --slds-c-buttonicon-color-foreground-active: var(--slds-g-color-neutral-base-90);
 

package/src/lightning/buttonIconStateful/button-icon.slds.css

@@ -553,19 +553,19 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   --sds-c-button-color-border-disabled: var(--slds-g-color-border-disabled-1);
 }
 /* slds-icon interaction states */
-:host([data-render-mode="shadow"]) [part~='button-icon']:hover {
+:host([data-render-mode="shadow"]) [part~='button-icon']:not(.slds-is-selected):hover {
   --slds-c-icon-color-foreground: var(
-    --slds-c-buttonicon-color-foreground-hover, 
+    --slds-c-buttonicon-color-foreground-hover,
     var(--slds-g-color-accent-3)
   );
 }
-:host([data-render-mode="shadow"]) [part~='button-icon']:focus {
+:host([data-render-mode="shadow"]) [part~='button-icon']:not(.slds-is-selected):focus {
   --slds-c-icon-color-foreground: var(
     --slds-c-buttonicon-color-foreground-focus,
     var(--slds-g-color-accent-3)
   );
 }
-:host([data-render-mode="shadow"]) [part~='button-icon']:active {
+:host([data-render-mode="shadow"]) [part~='button-icon']:not(.slds-is-selected):active {
   --slds-c-icon-color-foreground: var(
     --slds-c-buttonicon-color-foreground-active,
     var(--slds-g-color-accent-3)
@@ -643,7 +643,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
   /* Icon */
   --slds-c-buttonicon-color-foreground: var(--slds-g-color-neutral-base-100);
-  --slds-c-buttonicon-color-foreground-hover: color-mix(in oklab, var(--slds-g-color-on-surface-inverse-1), transparent 25%);
+  --slds-c-buttonicon-color-foreground-hover: var(--slds-g-color-neutral-base-95);
   --slds-c-buttonicon-color-foreground-focus: var(--slds-g-color-neutral-base-95);
   --slds-c-buttonicon-color-foreground-active: var(--slds-g-color-neutral-base-90);
 

package/src/lightning/buttonMenu/button-icon.slds.css

@@ -553,19 +553,19 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   --sds-c-button-color-border-disabled: var(--slds-g-color-border-disabled-1);
 }
 /* slds-icon interaction states */
-:host([data-render-mode="shadow"]) [part~='button-icon']:hover {
+:host([data-render-mode="shadow"]) [part~='button-icon']:not(.slds-is-selected):hover {
   --slds-c-icon-color-foreground: var(
-    --slds-c-buttonicon-color-foreground-hover, 
+    --slds-c-buttonicon-color-foreground-hover,
     var(--slds-g-color-accent-3)
   );
 }
-:host([data-render-mode="shadow"]) [part~='button-icon']:focus {
+:host([data-render-mode="shadow"]) [part~='button-icon']:not(.slds-is-selected):focus {
   --slds-c-icon-color-foreground: var(
     --slds-c-buttonicon-color-foreground-focus,
     var(--slds-g-color-accent-3)
   );
 }
-:host([data-render-mode="shadow"]) [part~='button-icon']:active {
+:host([data-render-mode="shadow"]) [part~='button-icon']:not(.slds-is-selected):active {
   --slds-c-icon-color-foreground: var(
     --slds-c-buttonicon-color-foreground-active,
     var(--slds-g-color-accent-3)
@@ -643,7 +643,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
   /* Icon */
   --slds-c-buttonicon-color-foreground: var(--slds-g-color-neutral-base-100);
-  --slds-c-buttonicon-color-foreground-hover: color-mix(in oklab, var(--slds-g-color-on-surface-inverse-1), transparent 25%);
+  --slds-c-buttonicon-color-foreground-hover: var(--slds-g-color-neutral-base-95);
   --slds-c-buttonicon-color-foreground-focus: var(--slds-g-color-neutral-base-95);
   --slds-c-buttonicon-color-foreground-active: var(--slds-g-color-neutral-base-90);
 

package/src/lightning/calendar/calendar.slds.css

@@ -18,7 +18,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
         --slds-c-buttonicon-sizing: 0.875rem;
 
         padding: 0;
-        font-size: var(--slds-g-font-scale-neg-1);
+        font-size: var(--slds-g-font-scale-neg-3);
     }
 
     :host([data-render-mode="shadow"]) [part~="calendar"] thead > tr > th,:host([data-render-mode="shadow"]) 
@@ -34,7 +34,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
     :host([data-render-mode="shadow"]) [part~="calendar"] tbody > tr > td {
         padding: var(--slds-g-spacing-1);
-        font-size: var(--slds-g-font-scale-neg-1);
+        font-size: var(--slds-g-font-scale-neg-3);
     }
 
     :host([data-render-mode="shadow"]) [part~="calendar"] tbody > tr > td > .slds-day {
@@ -57,8 +57,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     }
 
     :host([data-render-mode="shadow"]) [part~="calendar"] tbody > tr > td.slds-is-today > .slds-day {
-        background-color: var(--slds-g-color-brand-base-90);
-        color: var(--slds-g-color-accent-2);
+        background-color: var(--slds-g-color-surface-container-2);
     }
 
     :host([data-render-mode="shadow"]) [part~="calendar"] tbody > tr > td:focus {
@@ -66,25 +65,23 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     }
 
     :host([data-render-mode="shadow"]) [part~="calendar"] tbody > tr > td:focus > .slds-day {
-        
-        /* stylelint-disable-next-line sds-stylelint-plugin/styling-hooks-pattern */
-        box-shadow: var(--slds-s-table-cell-shadow-selected);
+        box-shadow: var(--slds-g-color-accent-2) 0 0 0 1px inset;
     }
 
     :host([data-render-mode="shadow"]) [part~="calendar"] tbody > tr > td:hover > .slds-day {
-        background-color: var(--slds-g-color-brand-base-90);
+        background-color: var(--slds-g-color-surface-container-2);
     }
 
     /* Indicates selected days */
 
     :host([data-render-mode="shadow"]) [part~="calendar"] tbody > tr > td.slds-is-selected > .slds-day {
-        background: var(--slds-g-color-accent-container-1);
+        background: var(--slds-g-color-accent-container-2);
         color: var(--slds-g-color-on-accent-1);
     }
 
     :host([data-render-mode="shadow"]) [part~="calendar"] tbody > tr > td.slds-is-selected:focus > .slds-day {
         background: var(--slds-g-color-accent-container-2);
-        box-shadow: var(--slds-g-shadow-5, 0 0 3px #0176d3);
+        box-shadow: var(--slds-g-color-accent-4) 0 0 3px;
         color: var(--slds-g-color-on-accent-1);
     }
 
@@ -104,12 +101,12 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     /* Month Table */
 
     :host([data-render-mode="shadow"]) .slds-datepicker__month {
-        font-size: var(--slds-g-font-scale-neg-1);
+        font-size: var(--slds-g-font-scale-neg-3);
       }
 
     :host([data-render-mode="shadow"]) .slds-has-error .slds-datepicker__filter .slds-select {
-        border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-base-1);
-        box-shadow: none;
+    border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-base-1);
+    box-shadow: none;
     }
 
     /* Indicates days that are in previous/next months */

package/src/lightning/checkboxGroup/checkboxGroup.js

@@ -5,6 +5,7 @@ import {
     synchronizeAttrs,
     getRealDOMId,
     classListMutation,
+    isCSR,
 } from 'lightning/utilsPrivate';
 import {
     FieldConstraintApi,
@@ -25,6 +26,8 @@ const DEBOUNCE_PERIOD = 200;
  * A checkbox group that enables selection of single or multiple options.
  */
 export default class LightningCheckboxGroup extends LightningElement {
+    static validationOptOut = ['class'];
+
     static delegatesFocus = true;
 
     /**
@@ -98,7 +101,7 @@ export default class LightningCheckboxGroup extends LightningElement {
     }
 
     get fieldsetElement() {
-        return this.template.querySelector('fieldset');
+        return isCSR ? this.template.querySelector('fieldset') : null;
     }
 
     renderedCallback() {
@@ -207,7 +210,7 @@ export default class LightningCheckboxGroup extends LightningElement {
      */
     @api
     checkValidity() {
-        return this._constraint.checkValidity();
+        return isCSR ? this._constraint.checkValidity() : null;
     }
 
     /**
@@ -218,9 +221,12 @@ export default class LightningCheckboxGroup extends LightningElement {
     @api
     reportValidity() {
         // required to make sure the sync happens after the render
-        return this._constraint.reportValidity((message) => {
-            this._helpMessage = message;
-        });
+        if (isCSR) {
+            return this._constraint.reportValidity((message) => {
+                this._helpMessage = message;
+            });
+        }
+        return null;
     }
 
     /**
@@ -242,8 +248,11 @@ export default class LightningCheckboxGroup extends LightningElement {
     }
 
     get computedUniqueHelpElementId() {
-        const helpElement = this.template.querySelector('[data-helptext]');
-        return getRealDOMId(helpElement);
+        if (isCSR) {
+            const helpElement = this.template.querySelector('[data-helptext]');
+            return getRealDOMId(helpElement);
+        }
+        return null;
     }
 
     /**
@@ -251,9 +260,11 @@ export default class LightningCheckboxGroup extends LightningElement {
      */
     @api
     focus() {
-        const firstCheckbox = this.template.querySelector('input');
-        if (firstCheckbox) {
-            firstCheckbox.focus();
+        if (isCSR) {
+            const firstCheckbox = this.template.querySelector('input');
+            if (firstCheckbox) {
+                firstCheckbox.focus();
+            }
         }
     }
 

package/src/lightning/checkboxGroup/checkboxGroup.js-meta.xml

@@ -3,4 +3,7 @@
     <isExposed>true</isExposed>
     <minApiVersion>41.0</minApiVersion>
     <support>GA</support>
+    <capabilities>
+        <capability>lightning__ServerRenderableWithHydration</capability>
+    </capabilities>
 </LightningComponentBundle>

package/src/lightning/colorPickerCustom/input-text.slds.css

@@ -246,7 +246,7 @@
         --sds-c-inputtext-text-color: var(--slds-c-inputtext-text-color);
         --sds-c-inputtext-font-size: var(
             --slds-c-inputtext-font-size,
-            var(--slds-g-font-size-base)
+            var(--slds-g-font-scale-neg-2)
         );
         --sds-c-inputtext-text-color-placeholder: var(
             --slds-c-inputtext-text-color-placeholder,
@@ -264,7 +264,7 @@
 
         display: flex;
         flex-wrap: wrap;
-        flex-direction: column;
+        align-items: center;
     }
 /**
    * Input Container
@@ -371,10 +371,6 @@
         --sds-c-inputtext-color-border: var(--slds-g-color-border-disabled-1);
         --sds-c-inputtext-text-color: var(--slds-g-color-on-disabled-2);
     }
-:host([data-render-mode="shadow"][disabled]) [part='input-text'] {
-        --sds-c-inputtext-text-color-placeholder:
-            var(--slds-g-color-on-disabled-2);
-    }
 /**
    * Label
    *
@@ -388,7 +384,10 @@
             --slds-c-inputtext-label-color,
             var(--slds-g-color-on-surface-2)
         );
-        font-size: var(--slds-s-label-font-size, var(--slds-g-font-scale-neg-2));
+        font-size: var(
+            --slds-c-inputtext-label-font-size,
+            var(--slds-g-font-scale-neg-3)
+        );
         margin-block-end: var(--slds-g-sizing-1);
 
         /* We inline flex to control the spacing between elements and not have to rely on whitespace characters */

package/src/lightning/combobox/form-element.slds.css

@@ -46,7 +46,7 @@
         hyphens: auto;
         display: inline-block;
         color: var(--slds-g-color-on-surface-2);
-        font-size: var(--slds-s-label-font-size, var(--slds-g-font-scale-neg-2));
+        font-size: var(--slds-g-font-scale-neg-3);
         padding-inline-end: var(--slds-g-spacing-2);
         padding-block-start: var(--slds-g-spacing-1);
         margin-block-end: calc(var(--slds-g-spacing-1) / 2);

package/src/lightning/datatable/__docs__/datatable.md

@@ -1260,12 +1260,17 @@ To return the name of the action, use the `event.target.action.name` property.
 
 Each row header renders with an `aria-label` attribute with the labels you provide for the column definition. By default, the row number column renders with `aria-label="Row Number"` and cannot be changed. When row selection is enabled, each row renders with `aria-selected` set to true or false depending on whether the row is selected. Each cell renders with a `gridcell` role.
 
-Use the following `aria` attributes on `lightning-datatable` to provide a caption or description on your table for assistive technologies. These attributes are rendered on the `<table>` element. We recommend that you use one or the other, but not both.
+Use the following `aria` attributes on `lightning-datatable` to provide a caption or description on your table for assistive technologies. These attributes are rendered on the `<table>` element. 
 
-| Attribute       | Type              | Description                                                                                                                        |
-| --------------- | ----------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
-| aria-label      | string            | Provides an assistive label to identify a table from other tables on a page.                                                       |
-| aria-labelledby | ID reference list | Specifies the ID or list of IDs of the element or elements that contain visible descriptive text to caption or describe the table. |
+| Attribute        | Type              | Description                                                                                                                                        |
+| ---------------- | ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
+| aria-label       | string            | Provides an assistive label to identify a table from other tables on a page.                                                                       |
+| aria-describedby | ID reference list | Specifies the ID or space-separated list of IDs that describes the current element.                                                                |
+| aria-labelledby  | ID reference list | Specifies the ID or space-separated list of IDs of the element or elements that contain visible descriptive text to caption or describe the table. |
+
+When using `aria-label`, consider using `aria-describedby` to provide supplemental information. We don't recommend using `aria-label` together with `aria-labelledby`. When there's visible text that labels an element, consider using `aria-labelledby` instead of `aria-label`. 
+
+If you use `aria-describedby`, the element that provides the description doesn't need to be visible. For more information, see [MDN web docs: aria-describedby](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby).
 
 ##### Provide an Accessible Label for the Table
 

package/src/lightning/datatable/columnResizer.js

@@ -150,10 +150,11 @@ export function getCustomerColumnWidths(columns, widthsData) {
  * It returns if table is rendered and not hidden.
  *
  * @param {Node} template - The datatable template
+ * @param {Object} refs - The datatable refs
  * @returns {boolean} - Whether the datatable is rendered and not hidden on the page
  */
-export function isTableRenderedVisible(template) {
-    const scrollerY = getScrollerY(template);
+export function isTableRenderedVisible(template, refs) {
+    const scrollerY = getScrollerY(template, refs);
     return (
         scrollerY &&
         !!(