lightning-base-components 1.18.7-alpha → 1.18.8-alpha

package/src/lightning/calendar/calendar.js

@@ -5,6 +5,7 @@ import labelToday from '@salesforce/label/LightningDateTimePicker.today';
 import labelYearSelector from '@salesforce/label/LightningDateTimePicker.yearSelector';
 import { LightningElement, api, track } from 'lwc';
 import { classSet } from 'lightning/utils';
+import { isCSR } from 'lightning/utilsPrivate';
 import { generateUniqueId } from 'lightning/inputUtils';
 import firstDayOfWeek from '@salesforce/i18n/firstDayOfWeek';
 import { handleKeyDownOnCalendar } from './keyboard';
@@ -187,8 +188,11 @@ export default class LightningCalendar extends LightningElement {
     }
 
     get hostDirection() {
-        // eslint-disable-next-line lightning-global/check-return-value-for-nullable-call
-        const computedStyle = window.getComputedStyle(this.template.host);
+        let computedStyle;
+        if (isCSR) {
+            // eslint-disable-next-line lightning-global/check-return-value-for-nullable-call
+            computedStyle = window.getComputedStyle(this.template.host);
+        }
         return computedStyle ? computedStyle.direction.toLowerCase() : 'ltr';
     }
 
@@ -254,8 +258,6 @@ export default class LightningCalendar extends LightningElement {
             return [];
         }
 
-        this.removeCurrentlySelectedDateAttributes();
-
         const selectedDate = this.getSelectedDate();
         const renderDate = this.getCalendarDate();
 
@@ -313,13 +315,15 @@ export default class LightningCalendar extends LightningElement {
             ? '0'
             : false;
 
-        const className = classSet()
-            .add({
-                'slds-is-today': isToday,
-                'slds-is-selected': isSelected,
-                'slds-day_adjacent-month': isInAdjacentMonth,
-            })
-            .toString();
+        // setting className to undefined avoids hydration errors in SSR
+        const className =
+            classSet()
+                .add({
+                    'slds-is-today': isToday,
+                    'slds-is-selected': isSelected,
+                    'slds-day_adjacent-month': isInAdjacentMonth,
+                })
+                .toString() || undefined;
 
         return {
             dayInMonth: toLocalizedDigits(String(date.getDate())),
@@ -431,16 +435,6 @@ export default class LightningCalendar extends LightningElement {
         this.dispatchSelectEvent();
     }
 
-    // we should be able to control the select value with an attribute once we have a select component
-    selectYear(year) {
-        const optionElement = this.template.querySelector(
-            `option[value='${year}']`
-        );
-        if (optionElement) {
-            optionElement.selected = true;
-        }
-    }
-
     getElementByDate(dateString) {
         return this.template.querySelector(`td[data-value='${dateString}']`);
     }
@@ -476,8 +470,6 @@ export default class LightningCalendar extends LightningElement {
     renderCalendar(newDate) {
         this.calendarMonth = newDate.getMonth();
         this.calendarYear = newDate.getFullYear();
-
-        this.selectYear(newDate.getFullYear());
     }
 
     renderToday() {

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

@@ -529,14 +529,20 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     justify-content: center;
   }
 
+  /**
+   * Represents inner spacing around icon for icon-position="left", when present
+   */
   :host([data-render-mode="shadow"]) [part~='start'] {
     display: inline-flex;
-    padding-inline-end: var(--sds-g-spacing-2, 0.5rem);
+    padding-inline-end: 0;
   }
 
+  /**
+   * Represents inner spacing around icon for icon-position="right", when present
+   */
   :host([data-render-mode="shadow"]) [part~='end'] {
     display: inline-flex;
-    padding-inline-start: var(--sds-g-spacing-2, 0.5rem);
+    padding-inline-start: 0;
   }
 }
 
@@ -928,7 +934,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   /**
       * End part
       */
-  :host([data-render-mode="shadow"]) [part~='end'] {
+  :host([data-render-mode="shadow"]) [part='end'] {
     padding-inline-start: var(--slds-c-buttonicon-end-spacing-inline-start, 0);
   }
 
@@ -1683,7 +1689,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
 @supports (--styling-hooks: '') {
     /* SELECT */
-    :host([data-render-mode="shadow"]) [part~='select'] {
+    :host([data-render-mode="shadow"]) [part='select'] {
       height: calc(var(--slds-c-select-input-sizing-height, 1.875rem) + (var(--sds-g-sizing-border-1, 1px) * 2));
       width: 100%;
       border: var(--sds-g-sizing-border-1, 1px) solid var(--slds-c-select-color-border, var(--sds-g-color-neutral-base-80, #c9c9c9));
@@ -1695,12 +1701,12 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
       transition: border 0.1s linear, background-color 0.1s linear;
     }
 
-    :host([data-render-mode="shadow"]) [part~='select'][required] {
+    :host([data-render-mode="shadow"]) [part='select'][required] {
       box-shadow: none; /* @legacy: This is ported over from SLDS but not clear why this design decision is made.  */
     }
 
-    :host([data-render-mode="shadow"]) [part~='select']:focus,:host([data-render-mode="shadow"]) 
-    [part~='select']:active {
+    :host([data-render-mode="shadow"]) [part='select']:focus,:host([data-render-mode="shadow"]) 
+    [part='select']:active {
       outline: 0;
       border-color: var(--slds-c-select-color-border-focus, var(--sds-g-color-brand-base-60, #1b96ff));
       background-color: var(--slds-c-select-color-background-focus, var(--sds-g-color-neutral-base-100, #ffffff));
@@ -1708,7 +1714,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
       box-shadow: var(--slds-c-select-shadow-focus, 0 0 3px var(--sds-g-color-brand-base-50, #0176d3));
     }
 
-    :host([data-render-mode="shadow"]) [part~='select'][disabled] {
+    :host([data-render-mode="shadow"]) [part='select'][disabled] {
       background-color: var(--sds-g-color-neutral-base-95, #f3f3f3);
       border-color: var(--sds-g-color-neutral-base-80, #c9c9c9);
       color: var(--sds-g-color-neutral-base-50, #747474);
@@ -1717,19 +1723,19 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
       opacity: 1;
     }
 
-    :host([data-render-mode="shadow"]) [part~='select'][disabled]:focus,:host([data-render-mode="shadow"])  
-    [part~='select'][disabled]:active {
+    :host([data-render-mode="shadow"]) [part='select'][disabled]:focus,:host([data-render-mode="shadow"]) 
+    [part='select'][disabled]:active {
       box-shadow: none;
     }
 
-    :host([data-render-mode="shadow"]) [part~='select'][size],:host([data-render-mode="shadow"])  
-    [part~='select'][multiple] {
+    :host([data-render-mode="shadow"]) [part='select'][size],:host([data-render-mode="shadow"]) 
+    [part='select'][multiple] {
       min-height: calc(var(--slds-c-select-input-sizing-height) + (var(--sds-g-sizing-border-1, 1px) * 2));
       height: inherit;
     }
 
-    :host([data-render-mode="shadow"]) [part~='select'][size] option,:host([data-render-mode="shadow"])  
-    [part~='select'][multiple] option {
+    :host([data-render-mode="shadow"]) [part='select'][size] option,:host([data-render-mode="shadow"]) 
+    [part='select'][multiple] option {
       padding: var(--sds-g-spacing-2, 0.5rem);
     }
 
@@ -1738,7 +1744,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
       color: var(--slds-c-select-container-color);
     }
 
-    :host([data-render-mode="shadow"]) .slds-select_container [part~="select"] {
+    :host([data-render-mode="shadow"]) .slds-select_container [part="select"] {
       /* stylelint-disable property-no-vendor-prefix */
       -moz-appearance: none;
       -webkit-appearance: none;
@@ -1746,11 +1752,11 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
       padding: 0 var(--sds-g-spacing-5, 1.5rem) 0 var(--sds-g-spacing-2, 0.5rem);
     }
 
-    :host([data-render-mode="shadow"]) .slds-select_container [part~="select"]::-ms-expand {
+    :host([data-render-mode="shadow"]) .slds-select_container [part="select"]::-ms-expand {
       display: none;
     }
 
-    :host([data-render-mode="shadow"]) .slds-select_container::before,:host([data-render-mode="shadow"])  
+    :host([data-render-mode="shadow"]) .slds-select_container::before,:host([data-render-mode="shadow"]) 
     .slds-select_container::after {
       position: absolute;
       content: '';
@@ -1767,7 +1773,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
       border-bottom: 5px solid currentColor;
       top: calc((var(--sds-g-sizing-8, 1.75rem) / 2) - 6px);
     }
- 
+
     :host([data-render-mode="shadow"]) .slds-select_container::after {
       border-top: 5px solid currentColor;
       bottom: calc((var(--sds-g-sizing-8, 1.75rem) / 2) - 6px);
@@ -1777,27 +1783,27 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
       display: none;
     }
 
-    :host([data-render-mode="shadow"][invalid]) [part~="select"] {
+    :host([data-render-mode="shadow"][invalid]) [part="select"] {
       border-color: var(--sds-g-color-error-base-50, #ea001e);
       box-shadow: var(--sds-g-color-error-base-50, #ea001e) 0 0 0 var(--sds-g-sizing-border-1, 1px) inset;
       background-clip: padding-box;
     }
 
-    :host([data-render-mode="shadow"][invalid]) [part~="select"]:focus,:host([data-render-mode="shadow"][invalid]) [part~="select"]:active {
+    :host([data-render-mode="shadow"][invalid]) [part="select"]:focus,:host([data-render-mode="shadow"][invalid]) [part="select"]:active {
       box-shadow: var(--sds-g-color-error-base-50, #ea001e) 0 0 0 var(--sds-g-sizing-border-1, 1px) inset, 0 0 3px var(--sds-g-color-brand-base-50, #0176d3);
     }
 
     /* LABEL */
 
     /* Styling Specifically for select label */
-    :host([data-render-mode="shadow"]) [part~="select-label"] {
+    :host([data-render-mode="shadow"]) [part="select-label"] {
       padding-inline-end: var(--sds-g-spacing-2, 0.5rem);
       color: var(--slds-c-select-label-color, var(--sds-g-color-neutral-base-30, #444444));
       font-size: var(--slds-c-select-label-font-size, var(--sds-g-font-scale-neg-3, 0.75rem));
-  
+
       /* We inline flex to control the spacing between elements and not have to rely on whitespace characters */
       display: inline-flex;
-  
+
       /* TODO: Add global hook once SLDS creates a new spacing hook that equals the value needed here */
       column-gap: 0.125rem;
     }

package/src/lightning/card/card.slds.css

@@ -51,77 +51,77 @@
 
 @supports (--styling-hooks: '') {
 
-	:host([data-render-mode="shadow"]) [part~="card"] {
+	:host([data-render-mode="shadow"]) [part="card"] {
 		position: relative;
-		--sds-c-card-spacing-block-start: 
-      var(--slds-c-card-spacing-block-start, 
+		--sds-c-card-spacing-block-start:
+      var(--slds-c-card-spacing-block-start,
         var(--slds-c-card-spacing-block, 0));
-		--sds-c-card-spacing-block-end: 
-      var(--slds-c-card-spacing-block-end, 
+		--sds-c-card-spacing-block-end:
+      var(--slds-c-card-spacing-block-end,
         var(--slds-c-card-spacing-block, 0));
-		--sds-c-card-spacing-inline-start: 
-      var(--slds-c-card-spacing-inline-start, 
+		--sds-c-card-spacing-inline-start:
+      var(--slds-c-card-spacing-inline-start,
         var(--slds-c-card-spacing-inline, 0));
-		--sds-c-card-spacing-inline-end: 
+		--sds-c-card-spacing-inline-end:
       var(--slds-c-card-spacing-inline-end,
         var(--slds-c-card-spacing-inline, 0));
-    --sds-c-card-color-background: 
-      var(--slds-c-card-color-background, 
+    --sds-c-card-color-background:
+      var(--slds-c-card-color-background,
         var(--slds-g-color-neutral-base-100));
-		--sds-c-card-sizing-border: 
-      var(--slds-c-card-sizing-border, 
+		--sds-c-card-sizing-border:
+      var(--slds-c-card-sizing-border,
         var(--sds-g-sizing-border-1, 1px));
-		--sds-c-card-color-border: 
-      var(--slds-c-card-color-border, 
-        var(--slds-g-color-border-base-1, 
+		--sds-c-card-color-border:
+      var(--slds-c-card-color-border,
+        var(--slds-g-color-border-base-1,
           var(--sds-g-color-neutral-base-80, #c9c9c9)));
-		--sds-c-card-radius-border: 
-      var(--slds-c-card-radius-border, 
+		--sds-c-card-radius-border:
+      var(--slds-c-card-radius-border,
         var(--sds-g-radius-border-2, 0.25rem));
-		--sds-c-card-shadow: 
-      var(--slds-c-card-shadow, 
+		--sds-c-card-shadow:
+      var(--slds-c-card-shadow,
         0 2px 2px 0 var(--sds-g-color-neutral-base-90, #e5e5e5)); /* Note: remove sds color when slds color is implemented to subsystem */
-    --sds-c-card-text-color: 
+    --sds-c-card-text-color:
       var(--slds-c-card-text-color);
 
     border-style: solid;
 		background-clip: padding-box;
 	}
 
-  :host([data-render-mode="shadow"]) [part~='header'] {
+  :host([data-render-mode="shadow"]) [part='header'] {
     display: grid;
     grid-template-columns: auto minmax(0, 1fr) auto;
     grid-template-areas: 'icon title actions';
     align-items: center;
 
     /* Padding */
-		--sds-c-card-header-spacing-block-start: 
+		--sds-c-card-header-spacing-block-start:
 			var(--slds-c-card-header-spacing-block-start,
-				var(--slds-c-card-header-spacing-block, 
+				var(--slds-c-card-header-spacing-block,
           var(--sds-g-spacing-3, 0.75rem)));
-		--sds-c-card-header-spacing-block-end: 
+		--sds-c-card-header-spacing-block-end:
 			var(--slds-c-card-header-spacing-block-end,
         var(--slds-c-card-header-spacing-block, 0));
-		--sds-c-card-header-spacing-inline-start: 
-			var(--slds-c-card-header-spacing-inline-start, 	
-				var(--slds-c-card-header-spacing-inline, 
+		--sds-c-card-header-spacing-inline-start:
+			var(--slds-c-card-header-spacing-inline-start,
+				var(--slds-c-card-header-spacing-inline,
           var(--sds-g-spacing-4, 1rem)));
-		--sds-c-card-header-spacing-inline-end: 
-			var(--slds-c-card-header-spacing-inline-end, 
-				var(--slds-c-card-header-spacing-inline, 
+		--sds-c-card-header-spacing-inline-end:
+			var(--slds-c-card-header-spacing-inline-end,
+				var(--slds-c-card-header-spacing-inline,
           var(--sds-g-spacing-4, 1rem)));
 
     /* Margin */
-    margin-block-end: var(--slds-c-card-header-spacing-block-end, 
+    margin-block-end: var(--slds-c-card-header-spacing-block-end,
         var(--sds-g-spacing-3, 0.75rem));
 
     /**
      * These become reassignments once base headings get hooks.
-     * See [part~='header'] h2 rule block for more info.
+     * See [part='header'] h2 rule block for more info.
      */
     color: var(--slds-c-card-header-text-color);
     font-size: var(--slds-c-card-heading-font-size);
-    font-weight: var(--slds-g-font-weight-bold, 
+    font-weight: var(--slds-g-font-weight-bold,
       var(--sds-g-font-weight-bold, bold));
     line-height: var(--sds-g-font-lineheight-2, 1.25);
 	}
@@ -132,16 +132,16 @@
    * The header sections utilize grid areas and 'part' apis to allow the header's
    * layout be modular (grid-area) and explicitly customized (part).
    */
-  :host([data-render-mode="shadow"]) [part~="icon"] {
+  :host([data-render-mode="shadow"]) [part="icon"] {
     grid-area: icon;
     line-height: 0;
   }
 
-	:host([data-render-mode="shadow"]) [part~="title"] {
+	:host([data-render-mode="shadow"]) [part="title"] {
 		grid-area: title;
 	}
 
-  :host([data-render-mode="shadow"]) [part~="actions"] {
+  :host([data-render-mode="shadow"]) [part="actions"] {
     grid-area: actions;
   }
 
@@ -153,68 +153,68 @@
    * :host { --sds-g-heading-font-size: var(--slds-c-card-heading-font-size); }
    */
 
-  :host([data-render-mode="shadow"]) [part~="title"] h2 {
+  :host([data-render-mode="shadow"]) [part="title"] h2 {
     font-weight: inherit;
     font-size: inherit;
   }
 
-  /** 
+  /**
    * Recreating truncation explicitly here so the behavior is consistent with
    * current SLDS.
    *
    * @TODO: Evaluate if this should be a utility or something similar.
    */
-  :host([data-render-mode="shadow"]) [part~="title"] span {
+  :host([data-render-mode="shadow"]) [part="title"] span {
     display: block;
     overflow: hidden;
     text-overflow: ellipsis;
   }
 
-  :host([data-render-mode="shadow"]) [part~="body"] {
-    --sds-c-card-body-spacing-block-start: 
-      var(--slds-c-card-body-spacing-block-start, 
+  :host([data-render-mode="shadow"]) [part="body"] {
+    --sds-c-card-body-spacing-block-start:
+      var(--slds-c-card-body-spacing-block-start,
         var(--slds-c-card-body-spacing-block));
-    --sds-c-card-body-spacing-block-end: 
-      var(--slds-c-card-body-spacing-block-end, 
+    --sds-c-card-body-spacing-block-end:
+      var(--slds-c-card-body-spacing-block-end,
         var(--slds-c-card-body-spacing-block));
-    --sds-c-card-body-spacing-inline-start: 
-      var(--slds-c-card-body-spacing-inline-start, 
+    --sds-c-card-body-spacing-inline-start:
+      var(--slds-c-card-body-spacing-inline-start,
         var(--slds-c-card-body-spacing-inline));
-    --sds-c-card-body-spacing-inline-end: 
-      var(--slds-c-card-body-spacing-inline-end, 
+    --sds-c-card-body-spacing-inline-end:
+      var(--slds-c-card-body-spacing-inline-end,
         var(--slds-c-card-body-spacing-inline));
     --slds-c-card-color-border: transparent;
     --slds-c-card-shadow: none;
   }
 
-  :host([data-render-mode="shadow"]) [part~='footer'] {
-    --sds-c-card-footer-spacing-block-start: 
-      var(--slds-c-card-footer-spacing-block-start, 
-        var(--slds-c-card-footer-spacing-block, 
+  :host([data-render-mode="shadow"]) [part='footer'] {
+    --sds-c-card-footer-spacing-block-start:
+      var(--slds-c-card-footer-spacing-block-start,
+        var(--slds-c-card-footer-spacing-block,
           var(--sds-g-spacing-3, 0.75rem)));
-    --sds-c-card-footer-spacing-block-end: 
-      var(--slds-c-card-footer-spacing-block-end, 
-        var(--slds-c-card-footer-spacing-block, 
+    --sds-c-card-footer-spacing-block-end:
+      var(--slds-c-card-footer-spacing-block-end,
+        var(--slds-c-card-footer-spacing-block,
           var(--sds-g-spacing-3, 0.75rem)));
-    --sds-c-card-footer-spacing-inline-start: 
-      var(--slds-c-card-footer-spacing-inline-start, 
-        var(--slds-c-card-footer-spacing-inline, 
+    --sds-c-card-footer-spacing-inline-start:
+      var(--slds-c-card-footer-spacing-inline-start,
+        var(--slds-c-card-footer-spacing-inline,
           var(--sds-g-spacing-4, 1rem)));
-    --sds-c-card-footer-spacing-inline-end: 
-      var(--slds-c-card-footer-spacing-inline-end, 
-        var(--slds-c-card-footer-spacing-inline, 
+    --sds-c-card-footer-spacing-inline-end:
+      var(--slds-c-card-footer-spacing-inline-end,
+        var(--slds-c-card-footer-spacing-inline,
           var(--sds-g-spacing-4, 1rem)));
-    --sds-c-card-footer-sizing-border: 
-      var(--slds-c-card-footer-sizing-border, 
+    --sds-c-card-footer-sizing-border:
+      var(--slds-c-card-footer-sizing-border,
         var(--sds-g-sizing-border-1, 1px));
-    --sds-c-card-footer-color-border: 
-      var(--slds-c-card-footer-color-border, 
-        var(--slds-g-color-border-base-1, 
+    --sds-c-card-footer-color-border:
+      var(--slds-c-card-footer-color-border,
+        var(--slds-g-color-border-base-1,
           var(--sds-g-color-neutral-base-80, #c9c9c9)));
 
     border-top-style: solid;
     text-align: var(--slds-c-card-footer-font-align, center);
-    font-size: var(--slds-c-card-footer-font-size, 
+    font-size: var(--slds-c-card-footer-font-size,
       var(--sds-g-font-scale-neg-2, 0.8125rem));
   }
 
@@ -226,7 +226,7 @@
   /* Note: Refactor the below. Utility classes that should be removed once utility implementation is completed. */
   :host([data-render-mode="shadow"]) .slds-media__figure {
     flex-shrink: 0;
-    margin-inline-end: var(--slds-c-card-icon-spacing-inline-end, 
+    margin-inline-end: var(--slds-c-card-icon-spacing-inline-end,
       var(--sds-g-spacing-3, 0.75rem));
   }
 

package/src/lightning/combobox/combobox.slds.css

@@ -6,7 +6,7 @@
   /**
    * Invalid State
    */
-  :host([data-render-mode="shadow"][invalid]) [part~='combobox'] {
+  :host([data-render-mode="shadow"][invalid]) [part='combobox'] {
     --slds-c-inputtext-color-border: var(--sds-g-color-error-base-50, #ea001e);
     --slds-c-inputtext-sizing-border: var(--sds-g-sizing-border-1, 1px);
   }

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

@@ -278,4 +278,12 @@
     :host([data-render-mode="shadow"]) .slds-form-element_address .slds-form-element__row {
       align-items: flex-end;
     }
+
+    /* --------------------------------------- */
+
+    /* FORM ELEMENT: HIDDEN */
+
+    :host([data-render-mode="shadow"][variant~='label-hidden']) .slds-form-element__label {
+      display: none
+  }
 }

package/src/lightning/datatable/datatable.js

@@ -84,6 +84,7 @@ import {
     getActiveCellElement,
     getDataRow,
     FOCUS_CLASS,
+    updateActiveCellTabIndexAfterSync,
 } from './keyboard';
 import {
     getRowNumberOffset,
@@ -333,6 +334,8 @@ export default class LightningDatatable extends LightningElement {
         if (hasValidKeyField(this.state)) {
             this.updateRowsAndCellIndexes(this.state);
         }
+
+        updateActiveCellTabIndexAfterSync(this.state);
     }
 
     /**
@@ -1531,6 +1534,7 @@ export default class LightningDatatable extends LightningElement {
         if (!customerEvent.defaultPrevented) {
             cancelInlineEdit(this);
         }
+        updateActiveCellTabIndexAfterSync(this.state);
     }
 
     /**

package/src/lightning/datatable/keyboard.js

@@ -1173,10 +1173,7 @@ export function updateTabIndexActiveCell(state, index = 0) {
     }
 
     // we need to check again because maybe there is no active cell after sync
-    if (state.activeCell && !isRowNavigationMode(state)) {
-        const { rowIndex, colIndex } = getIndexesActiveCell(state);
-        updateTabIndex(state, rowIndex, colIndex, index);
-    }
+    updateActiveCellTabIndexAfterSync(state, index);
     return state;
 }
 
@@ -1417,3 +1414,10 @@ function isActiveCellValid(state) {
     }
     return false;
 }
+
+export function updateActiveCellTabIndexAfterSync(state, index = 0) {
+    if (state.activeCell && !isRowNavigationMode(state)) {
+        const { rowIndex, colIndex } = getIndexesActiveCell(state);
+        updateTabIndex(state, rowIndex, colIndex, index);
+    }
+}

package/src/lightning/datatable/sort.js

@@ -133,7 +133,7 @@ export function updateColumnSortingState(column, state) {
     } else {
         Object.assign(column, {
             sorted: false,
-            sortAriaLabel: column.sortable ? 'none' : null,
+            sortAriaLabel: column.sortable ? 'other' : null,
             sortedDirection: defaultSortDirection,
         });
     }

package/src/lightning/datepicker/datepicker.js

@@ -750,7 +750,7 @@ export default class LightningDatePicker extends LightningElement {
         const isAriaInvalid =
             this.template.host.getAttribute('data-aria-invalid') ||
             this._errorMessage;
-        return computeAriaInvalid(isAriaInvalid, this.value);
+        return computeAriaInvalid(isAriaInvalid, this.hasBadInput() || '');
     }
 
     get helptextAlternativeText() {

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

@@ -278,4 +278,12 @@
     :host([data-render-mode="shadow"]) .slds-form-element_address .slds-form-element__row {
       align-items: flex-end;
     }
+
+    /* --------------------------------------- */
+
+    /* FORM ELEMENT: HIDDEN */
+
+    :host([data-render-mode="shadow"][variant~='label-hidden']) .slds-form-element__label {
+      display: none
+  }
 }