lightning-base-components 1.15.1-alpha → 1.15.2-alpha

package/src/lightning/datatable/__wdio__/utam/utam.spec.js

@@ -1,189 +1,214 @@
 const Datatable = require('pageobjects/datatable');
 const Button = require('pageobjects/button');
 
-describe('datatable utam test', () => {
-    let root;
-
-    beforeEach(async () => {
-        await browser.url('/datatable/utam');
-        root = await $('datatable-utam');
-        await root.waitForDisplayed();
-    });
-    it('should get the cell value by row and column index', async () => {
-        const datatable = await utam.load(Datatable, {
-            element: await root.shadow$('lightning-datatable'),
-        });
-
-        const cellValue = await datatable.getCellValueByIndex(1, 2);
-        expect(cellValue).toBe('Billy Simmons');
-    });
-    it('should get the cell value by row index and column label', async () => {
-        const datatable = await utam.load(Datatable, {
-            element: await root.shadow$('lightning-datatable'),
-        });
-
-        const cellValue = await datatable.getCellValueByLabel(2, 'Age');
-        expect(cellValue).toBe('35');
-    });
-    it('should get the number of rows in the table', async () => {
-        const datatable = await utam.load(Datatable, {
-            element: await root.shadow$('lightning-datatable'),
-        });
-
-        const cellValue = await datatable.getNumRows();
-        expect(cellValue).toBe(4);
-    });
-    it('should tell if the table has any rows', async () => {
-        const datatable = await utam.load(Datatable, {
-            element: await root.shadow$('lightning-datatable'),
-        });
-
-        const cellValue = await datatable.hasRows();
-        expect(cellValue).toBe(true);
-    });
-    it('should toggle selection of row - comprehensive', async () => {
-        const datatable = await utam.load(Datatable, {
-            element: await root.shadow$('lightning-datatable'),
-        });
-
-        for (let i = 1; i <= 4; i++) {
-            expect(await datatable.isRowSelected(i)).toBe('false');
-        }
-
-        await datatable.toggleRowSelection(1);
-        expect(await datatable.isRowSelected(1)).toBe('true');
-        [2, 3, 4].forEach(async (i) => {
-            expect(await datatable.isRowSelected(i)).toBe('false');
+const tableTypes = {
+    default: '[data-render-mode="default"]',
+    roleBased: '[data-render-mode="role-based"]',
+};
+
+describe('Datatable UTAM Page Object Tests', () => {
+    Object.keys(tableTypes).forEach((type) => {
+        describe(`${type} table`, () => {
+            const TABLE_SELECTOR = tableTypes[type];
+
+            let root;
+
+            beforeEach(async () => {
+                await browser.url('/datatable/utam');
+                root = await $('datatable-utam');
+                await root.waitForDisplayed();
+            });
+
+            it('should get the cell value by row and column index', async () => {
+                const datatable = await utam.load(Datatable, {
+                    element: await root.shadow$(TABLE_SELECTOR),
+                });
+
+                const cellValue = await datatable.getCellValueByIndex(1, 2);
+                expect(cellValue).toBe('Billy Simmons');
+            });
+            it('should get the cell value by row index and column label', async () => {
+                const datatable = await utam.load(Datatable, {
+                    element: await root.shadow$(TABLE_SELECTOR),
+                });
+
+                const cellValue = await datatable.getCellValueByLabel(2, 'Age');
+                expect(cellValue).toBe('35');
+            });
+            it('should get the number of rows in the table', async () => {
+                const datatable = await utam.load(Datatable, {
+                    element: await root.shadow$(TABLE_SELECTOR),
+                });
+
+                const cellValue = await datatable.getNumRows();
+                expect(cellValue).toBe(4);
+            });
+            it('should tell if the table has any rows', async () => {
+                const datatable = await utam.load(Datatable, {
+                    element: await root.shadow$(TABLE_SELECTOR),
+                });
+
+                const cellValue = await datatable.hasRows();
+                expect(cellValue).toBe(true);
+            });
+            it('should toggle selection of row - comprehensive', async () => {
+                const datatable = await utam.load(Datatable, {
+                    element: await root.shadow$(TABLE_SELECTOR),
+                });
+
+                for (let i = 1; i <= 4; i++) {
+                    expect(await datatable.isRowSelected(i)).toBe('false');
+                }
+
+                await datatable.toggleRowSelection(1);
+                expect(await datatable.isRowSelected(1)).toBe('true');
+                [2, 3, 4].forEach(async (i) => {
+                    expect(await datatable.isRowSelected(i)).toBe('false');
+                });
+
+                await datatable.toggleRowSelection(2);
+                expect(await datatable.isRowSelected(2)).toBe('true');
+                [3, 4].forEach(async (i) => {
+                    expect(await datatable.isRowSelected(i)).toBe('false');
+                });
+
+                await datatable.toggleRowSelection(3);
+                expect(await datatable.isRowSelected(3)).toBe('true');
+                expect(await datatable.isRowSelected(4)).toBe('false');
+
+                await datatable.toggleRowSelection(4);
+                expect(await datatable.isRowSelected(4)).toBe('true');
+            });
+            it('should toggle selection of row', async () => {
+                const datatable = await utam.load(Datatable, {
+                    element: await root.shadow$(TABLE_SELECTOR),
+                });
+
+                await datatable.toggleRowSelection(3);
+                expect(await datatable.isRowSelected(3)).toBe('true');
+
+                await datatable.toggleRowSelection(3);
+                expect(await datatable.isRowSelected(3)).toBe('false');
+            });
+            it('should get the number of selected rows when not all rows are selected', async () => {
+                const datatable = await utam.load(Datatable, {
+                    element: await root.shadow$(TABLE_SELECTOR),
+                });
+
+                await datatable.toggleRowSelection(3);
+                expect(await datatable.getNumSelectedRows()).toBe(1);
+
+                await datatable.toggleRowSelection(2);
+                expect(await datatable.getNumSelectedRows()).toBe(2);
+            });
+            it('should get the number of selected rows when all rows are selected', async () => {
+                const datatable = await utam.load(Datatable, {
+                    element: await root.shadow$(TABLE_SELECTOR),
+                });
+
+                await datatable.clickSelectAllCheckbox();
+                expect(await datatable.getNumSelectedRows()).toBe(4);
+            });
+            it('should get the number of columns in the table', async () => {
+                const datatable = await utam.load(Datatable, {
+                    element: await root.shadow$(TABLE_SELECTOR),
+                });
+
+                expect(await datatable.getNumColumns()).toBe(5);
+            });
+            it('should tell whether or not a column is sortable', async () => {
+                const datatable = await utam.load(Datatable, {
+                    element: await root.shadow$(TABLE_SELECTOR),
+                });
+
+                expect(await datatable.isSortableColumn('Age')).toBe(true);
+
+                // Need to speak to UTAM (about isPresent) or find a better way to write this method
+                // If column is not sortable, the test fails with the error:
+                // "Can't find elements with locator 'lightning-primitive-header-factory.slds-is-sortable' inside its scope element."
+                // expect(await datatable.isSortableColumn('Name')).toBe(false);
+            });
+            it('should tell whether or not the row is selectable', async () => {
+                const datatable = await utam.load(Datatable, {
+                    element: await root.shadow$(TABLE_SELECTOR),
+                });
+
+                expect(await datatable.isSelectableRow(1)).toBe(true);
+            });
+            it('should get the width of a column', async () => {
+                const datatable = await utam.load(Datatable, {
+                    element: await root.shadow$(TABLE_SELECTOR),
+                });
+
+                const datatableElement = await root.shadow$(
+                    'lightning-datatable'
+                );
+                const columnHeader = await datatableElement.shadow$(
+                    '[aria-label="Name"]'
+                );
+
+                // Remove intermediate white spaces
+                let expectedWidth = await columnHeader.getAttribute('style');
+                expectedWidth = expectedWidth.replace(/\s/g, '');
+                let actualWidth = await datatable.getWidth('Name');
+                actualWidth = actualWidth.replace(/\s/g, '');
+
+                // Using indexOf in case of presence of ';'
+                expect(actualWidth.indexOf(expectedWidth) >= 0).toBe(true);
+            });
+            it('should tell whether or not a column has header actions', async () => {
+                const datatable = await utam.load(Datatable, {
+                    element: await root.shadow$(TABLE_SELECTOR),
+                });
+
+                expect(await datatable.hasHeaderActions('Name')).toBe(true);
+                expect(await datatable.hasHeaderActions('Age')).toBe(true);
+                // false fails; need to check for true or null; check with UTAM if expected
+                expect(await datatable.hasHeaderActions('Email')).toBe(null);
+            });
+            it('should get the text of the rowheader cell of the specified row', async () => {
+                const datatable = await utam.load(Datatable, {
+                    element: await root.shadow$(TABLE_SELECTOR),
+                });
+
+                expect(await datatable.getRowHeaderText(2)).toBe(
+                    'Kelsey Denesik'
+                );
+            });
+            it('should click column header of the sortable column', async () => {
+                const datatable = await utam.load(Datatable, {
+                    element: await root.shadow$(TABLE_SELECTOR),
+                });
+
+                let cellValue = await datatable.getCellValueByLabel(1, 'Age');
+                expect(cellValue).toBe('40');
+
+                await datatable.clickSortHeaderButton('Age');
+
+                cellValue = await datatable.getCellValueByLabel(1, 'Age');
+                expect(cellValue).toBe('35');
+            });
+            it('should tell whether the specified row has row actions or not', async () => {
+                const datatable = await utam.load(Datatable, {
+                    element: await root.shadow$(TABLE_SELECTOR),
+                });
+
+                expect(await datatable.hasRowActionInRow(2)).toBe(true);
+            });
+            it('should tell whether or not the datatable has the loading indicator visible', async () => {
+                const datatable = await utam.load(Datatable, {
+                    element: await root.shadow$(TABLE_SELECTOR),
+                });
+
+                expect(await datatable.isLoading()).toBe(false);
+
+                const button = await utam.load(Button, {
+                    element: await root.shadow$('lightning-button'),
+                });
+                await button.click();
+
+                expect(await datatable.isLoading()).toBe(true);
+            });
         });
-
-        await datatable.toggleRowSelection(2);
-        expect(await datatable.isRowSelected(2)).toBe('true');
-        [3, 4].forEach(async (i) => {
-            expect(await datatable.isRowSelected(i)).toBe('false');
-        });
-
-        await datatable.toggleRowSelection(3);
-        expect(await datatable.isRowSelected(3)).toBe('true');
-        expect(await datatable.isRowSelected(4)).toBe('false');
-
-        await datatable.toggleRowSelection(4);
-        expect(await datatable.isRowSelected(4)).toBe('true');
-    });
-    it('should toggle selection of row', async () => {
-        const datatable = await utam.load(Datatable, {
-            element: await root.shadow$('lightning-datatable'),
-        });
-
-        await datatable.toggleRowSelection(3);
-        expect(await datatable.isRowSelected(3)).toBe('true');
-
-        await datatable.toggleRowSelection(3);
-        expect(await datatable.isRowSelected(3)).toBe('false');
-    });
-    it('should get the number of selected rows when not all rows are selected', async () => {
-        const datatable = await utam.load(Datatable, {
-            element: await root.shadow$('lightning-datatable'),
-        });
-
-        await datatable.toggleRowSelection(3);
-        expect(await datatable.getNumSelectedRows()).toBe(1);
-
-        await datatable.toggleRowSelection(2);
-        expect(await datatable.getNumSelectedRows()).toBe(2);
-    });
-    it('should get the number of selected rows when all rows are selected', async () => {
-        const datatable = await utam.load(Datatable, {
-            element: await root.shadow$('lightning-datatable'),
-        });
-
-        await datatable.clickSelectAllCheckbox();
-        expect(await datatable.getNumSelectedRows()).toBe(4);
-    });
-    it('should get the number of columns in the table', async () => {
-        const datatable = await utam.load(Datatable, {
-            element: await root.shadow$('lightning-datatable'),
-        });
-
-        expect(await datatable.getNumColumns()).toBe(5);
-    });
-    it('should tell whether or not a column is sortable', async () => {
-        const datatable = await utam.load(Datatable, {
-            element: await root.shadow$('lightning-datatable'),
-        });
-
-        expect(await datatable.isSortableColumn('Age')).toBe(true);
-
-        // Need to speak to UTAM (about isPresent) or find a better way to write this method
-        // If column is not sortable, the test fails with the error:
-        // "Can't find elements with locator 'lightning-primitive-header-factory.slds-is-sortable' inside its scope element."
-        // expect(await datatable.isSortableColumn('Name')).toBe(false);
-    });
-    it('should tell whether or not the row is selectable', async () => {
-        const datatable = await utam.load(Datatable, {
-            element: await root.shadow$('lightning-datatable'),
-        });
-
-        expect(await datatable.isSelectableRow(1)).toBe(true);
-    });
-    it('should get the width of a column', async () => {
-        const datatable = await utam.load(Datatable, {
-            element: await root.shadow$('lightning-datatable'),
-        });
-
-        const dt = await root.shadow$('lightning-datatable');
-        const columnHeader = await dt.shadow$('thead > tr > th:nth-child(2)');
-        const expectedWidth = await columnHeader.getAttribute('style');
-        expect(await datatable.getWidth('Name')).toBe(expectedWidth);
-    });
-    it('should tell whether or not a column has header actions', async () => {
-        const datatable = await utam.load(Datatable, {
-            element: await root.shadow$('lightning-datatable'),
-        });
-
-        expect(await datatable.hasHeaderActions('Name')).toBe(true);
-        expect(await datatable.hasHeaderActions('Age')).toBe(true);
-        // false fails; need to check for true or null; check with UTAM if expected
-        expect(await datatable.hasHeaderActions('Email')).toBe(null);
-    });
-    it('should get the text of the rowheader cell of the specified row', async () => {
-        const datatable = await utam.load(Datatable, {
-            element: await root.shadow$('lightning-datatable'),
-        });
-
-        expect(await datatable.getRowHeaderText(2)).toBe('Kelsey Denesik');
-    });
-    it('should click column header of the sortable column', async () => {
-        const datatable = await utam.load(Datatable, {
-            element: await root.shadow$('lightning-datatable'),
-        });
-
-        let cellValue = await datatable.getCellValueByLabel(1, 'Age');
-        expect(cellValue).toBe('40');
-
-        await datatable.clickSortHeaderButton('Age');
-
-        cellValue = await datatable.getCellValueByLabel(1, 'Age');
-        expect(cellValue).toBe('35');
-    });
-    it('should tell whether the specified row has row actions or not', async () => {
-        const datatable = await utam.load(Datatable, {
-            element: await root.shadow$('lightning-datatable'),
-        });
-
-        expect(await datatable.hasRowActionInRow(2)).toBe(true);
-    });
-    it('should tell whether or not the datatable has the loading indicator visible', async () => {
-        const datatable = await utam.load(Datatable, {
-            element: await root.shadow$('lightning-datatable'),
-        });
-
-        expect(await datatable.isLoading()).toBe(false);
-
-        const button = await utam.load(Button, {
-            element: await root.shadow$('lightning-button'),
-        });
-        await button.click();
-
-        expect(await datatable.isLoading()).toBe(true);
     });
 });

package/src/lightning/datatable/datatable.js

@@ -211,7 +211,6 @@ export default class LightningDatatable extends LightningElement {
     _privateWidthObserver = null; // Instance of LightningDatatableResizeObserver
     _renderMode = 'table';
     _shouldResetFocus = false; // used to ensure focus isn't lost from changes in renderedRows
-    _shouldResetHeights = false;
     _suppressBottomBar = false;
 
     /************************* PUBLIC PROPERTIES *************************/
@@ -514,8 +513,8 @@ export default class LightningDatatable extends LightningElement {
      */
 
     /**
-     * Reserved for internal use.
      * Enables and configures advanced rendering modes.
+     * It supports properties 'bufferSize', 'fixedHeight', 'rowHeight', and 'virtualize'.
      *
      * @type {RenderManagerConfig} value - config object for datatable rendering
      */
@@ -552,7 +551,8 @@ export default class LightningDatatable extends LightningElement {
      * `default`    -> Renders <table>
      */
     /**
-     * Reserved for internal use.
+     * Enables virtual rendering when set to 'role-based'.
+     * Default value is 'default'.
      */
     @api
     get renderMode() {
@@ -1157,7 +1157,12 @@ export default class LightningDatatable extends LightningElement {
         if (this._shouldResetFocus) {
             // since focus is now getting reset, can change this back to false
             this._shouldResetFocus = false;
-            if (state.activeCell && state.activeCell.focused) {
+            // don't return focus to active cell when inline edit panel is open
+            if (
+                state.activeCell &&
+                state.activeCell.focused &&
+                !state.inlineEdit.isPanelVisible
+            ) {
                 const cellElement = getActiveCellElement(template, state);
                 if (
                     cellElement &&
@@ -1380,7 +1385,7 @@ export default class LightningDatatable extends LightningElement {
     handleResizeEnd(event) {
         event.stopPropagation();
         this._isResizing = false;
-        this._shouldResetHeights = true;
+        this.state.shouldResetHeights = true;
     }
 
     /**
@@ -1650,9 +1655,9 @@ export default class LightningDatatable extends LightningElement {
 
         // no need to handle other virtualization/row height logic
         // if heights need to be reset
-        if (this._shouldResetHeights) {
+        if (this.state.shouldResetHeights) {
             resetRowHeights(state);
-            this._shouldResetHeights = false;
+            this.state.shouldResetHeights = false;
         } else if (virtualizedRows && !state.fixedHeight) {
             // if row heights aren't fixed, we need to update items
             // in state to know where rows should be positioned

package/src/lightning/datatable/inlineEdit.js

@@ -317,11 +317,6 @@ function openInlineEdit(dt, target) {
 
     const { rowKeyValue, colKeyValue } = target;
 
-    // ensure that focus remains on inline edit panel instead of active cell
-    if (state.activeCell) {
-        state.activeCell.focused = false;
-    }
-
     inlineEdit.isPanelVisible = true;
     inlineEdit.rowKeyValue = rowKeyValue;
     inlineEdit.colKeyValue = colKeyValue;

package/src/lightning/datatable/inlineEditShared.js

@@ -14,8 +14,10 @@ export function getDirtyValueFromCell(state, rowKeyValue, colKeyValue) {
 
     if (
         dirtyValues &&
-        dirtyValues[rowKeyValue] &&
-        dirtyValues[rowKeyValue][colKeyValue]
+        // eslint-disable-next-line no-prototype-builtins
+        dirtyValues.hasOwnProperty(rowKeyValue) &&
+        // eslint-disable-next-line no-prototype-builtins
+        dirtyValues[rowKeyValue].hasOwnProperty(colKeyValue)
     ) {
         return dirtyValues[rowKeyValue][colKeyValue];
     }

package/src/lightning/datatable/keyboard.js

@@ -799,7 +799,13 @@ function stillValidActiveCell(state) {
     const {
         activeCell: { rowKeyValue, colKeyValue },
     } = state;
+
+    let sortableColumns = state.columns.filter((column) => column.sortable);
+
     if (rowKeyValue === HEADER_ROW) {
+        if (state.rows.length && sortableColumns.length === 0) {
+            return false;
+        }
         return state.headerIndexes[colKeyValue] !== undefined;
     }
     return !!(
@@ -830,9 +836,7 @@ export function setFocusActiveCell(
     const { keyboardMode } = state;
     const { rowIndex, colIndex } = getIndexesActiveCell(state);
 
-    // if pressing tab on editable cell, focus will go to inline edit panel instead of cell
-    state.activeCell.focused =
-        !(info && isActiveCellEditable(state)) && isActiveCellValid(state);
+    state.activeCell.focused = !(info && isActiveCellValid(state));
     updateTabIndex(state, rowIndex, colIndex);
 
     let cellElement = getActiveCellElement(template, state);

package/src/lightning/datatable/rowSelection.js

@@ -430,7 +430,7 @@ export function setSelectedRowsKeys(state, value) {
 export function syncSelectedRowsKeys(state, selectedRows) {
     let changed = false;
     const { selectedRowsKeys, keyField } = state;
-
+    const maxRowSelection = getMaxRowSelection(state) || getRowsTotal(state);
     if (Object.keys(selectedRowsKeys).length !== selectedRows.length) {
         changed = true;
         state.selectedRowsKeys = updateSelectedRowsKeysFromSelectedRows(
@@ -446,7 +446,13 @@ export function syncSelectedRowsKeys(state, selectedRows) {
             );
         }
     }
-
+    if (maxRowSelection > 1 && changed) {
+        if (selectedRows.length < maxRowSelection) {
+            markDeselectedRowEnabled(state);
+        } else {
+            markDeselectedRowDisabled(state);
+        }
+    }
     updateBulkSelectionState(state);
 
     return {

package/src/lightning/datatable/state.js

@@ -69,6 +69,7 @@ export const getDefaultState = function () {
         offsetRanges: [],
         firstRowOffset: 0, // how many pixels scrollTop is from top of first visible row
         tableHeight: 0,
+        shouldResetHeights: false,
 
         // inline edit
         inlineEdit: {

package/src/lightning/datatable/templates/table/table.html

@@ -40,7 +40,7 @@
                         <!-- empty since keyField wasn't provided TODO: Why is this here? Test and remove! -->
                     </template>
                     <template if:true={hasValidKeyField}>
-                        <thead>
+                        <thead data-rowgroup-header>
                             <!-- Column Header Row -->
                             <tr class="slds-line-height_reset"
                                 data-row-key-value="HEADER"
@@ -101,7 +101,7 @@
                                 </template>
                             </tr>
                         </thead>
-                        <tbody style={computedTbodyStyle}>
+                        <tbody data-rowgroup-body style={computedTbodyStyle}>
                             <template for:each={renderedRows} for:item="row" for:index="rowIndex">
                                 <!-- Data Rows -->
                                 <tr class={row.classnames}

package/src/lightning/datatable/wrapText.js

@@ -143,6 +143,7 @@ export function handleTriggeredAction(state, action, colKeyValue) {
     if (actionName === 'wrapText' || actionName === 'clipText') {
         // If state should be changed
         if (state.wrapText[colKeyValue] !== (actionName === 'wrapText')) {
+            state.shouldResetHeights = true;
             state.wrapText[colKeyValue] = actionName === 'wrapText';
 
             updateSelectedOptionInHeaderActions(state, colKeyValue);

package/src/lightning/datepicker/datepicker.html

@@ -17,6 +17,7 @@
                     name={name}
                     value={displayValue}
                     placeholder={placeholder}
+                    aria-invalid={computedAriaInvalid}
                     aria-label={ariaLabel}
                     required={required}
                     readonly={readOnly}

package/src/lightning/datepicker/datepicker.js

@@ -29,6 +29,7 @@ import {
     synchronizeAttrs,
     getRealDOMId,
     isIE11,
+    computeAriaInvalid,
 } from 'lightning/utilsPrivate';
 import {
     generateUniqueId,
@@ -55,6 +56,7 @@ const ARIA_CONTROLS = 'aria-controls';
 const ARIA_LABEL = 'aria-label';
 const ARIA_LABELLEDBY = 'aria-labelledby';
 const ARIA_DESCRIBEDBY = 'aria-describedby';
+const ARIA_INVALID = 'aria-invalid';
 const DATE_STYLE = {
     SHORT: 'short',
     MEDIUM: 'medium',
@@ -228,6 +230,7 @@ export default class LightningDatePicker extends LightningElement {
             [ARIA_DESCRIBEDBY]: this.computedAriaDescribedby,
             [ARIA_CONTROLS]: this.ariaControlsId,
             [ARIA_LABEL]: this._ariaLabel,
+            [ARIA_INVALID]: this.computedAriaInvalid,
         });
 
         // Set aria-describedby on the calendar button that opens the calendar dialog
@@ -744,4 +747,11 @@ export default class LightningDatePicker extends LightningElement {
             this.ariaLabelledByElement.length
         );
     }
+
+    get computedAriaInvalid() {
+        const isAriaInvalid =
+            this.template.host.getAttribute('data-aria-invalid') ||
+            this._errorMessage;
+        return computeAriaInvalid(isAriaInvalid, this.value);
+    }
 }

package/src/lightning/datetimepicker/datetimepicker.html

@@ -11,6 +11,7 @@
                 <div class="slds-form-element__group">
                     <div class="slds-form-element__row">
                         <lightning-datepicker
+                            data-aria-invalid={computedDateAriaInvalid}
                             class="slds-form-element"
                             autocomplete={autocomplete}
                             min={dateMin}
@@ -29,6 +30,7 @@
                         </lightning-datepicker>
 
                         <lightning-timepicker
+                            data-aria-invalid={computedTimeAriaInvalid}
                             class="slds-form-element"
                             autocomplete={autocomplete}
                             label={i18n.time}

package/src/lightning/datetimepicker/datetimepicker.js

@@ -9,6 +9,7 @@ import {
     normalizeAriaAttribute,
     synchronizeAttrs,
     getRealDOMId,
+    computeAriaInvalid,
 } from 'lightning/utilsPrivate';
 import {
     getCurrentTime,
@@ -579,4 +580,11 @@ export default class LightningDateTimePicker extends LightningElement {
             ? isoString.split(TIME_SEPARATOR)
             : null;
     }
+
+    get computedDateAriaInvalid() {
+        return computeAriaInvalid(this._customErrorMessage, this._dateValue);
+    }
+    get computedTimeAriaInvalid() {
+        return computeAriaInvalid(this._customErrorMessage, this._timeValue);
+    }
 }

package/src/lightning/dualListbox/dualListbox.js

@@ -498,7 +498,8 @@ export default class LightningDualListbox extends LightningElement {
 
         return {
             ...option,
-            tabIndex: option.value === focusableValue ? '0' : '-1',
+            tabIndex:
+                !this.disabled && option.value === focusableValue ? '0' : '-1',
             selected: isSelected ? 'true' : 'false',
             classList,
         };