From adaaeb653a37c0eec6ce5fbc57b73c24ca09f347 Mon Sep 17 00:00:00 2001
From: Chris Holt <chhol@microsoft.com>
Date: Thu, 6 Jul 2023 12:50:43 -0700
Subject: [PATCH 1/6] fix: toolbar should not throw if start/end slots do not
 exist (#6770)

* fix: toolbar should not throw if start or end is undefined

* Change files
---
 ...-foundation-240d2dac-2fd1-4e5f-a760-03c9e5505330.json | 7 +++++++
 .../fast-foundation/src/toolbar/toolbar.ts               | 9 ++++-----
 2 files changed, 11 insertions(+), 5 deletions(-)
 create mode 100644 change/@microsoft-fast-foundation-240d2dac-2fd1-4e5f-a760-03c9e5505330.json

diff --git a/change/@microsoft-fast-foundation-240d2dac-2fd1-4e5f-a760-03c9e5505330.json b/change/@microsoft-fast-foundation-240d2dac-2fd1-4e5f-a760-03c9e5505330.json
new file mode 100644
index 00000000000..481bbe6e631
--- /dev/null
+++ b/change/@microsoft-fast-foundation-240d2dac-2fd1-4e5f-a760-03c9e5505330.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix: toolbar should not throw if start or end is undefined",
+  "packageName": "@microsoft/fast-foundation",
+  "email": "chhol@microsoft.com",
+  "dependentChangeType": "prerelease"
+}
diff --git a/packages/web-components/fast-foundation/src/toolbar/toolbar.ts b/packages/web-components/fast-foundation/src/toolbar/toolbar.ts
index ce6466ff2de..6701e26cd89 100644
--- a/packages/web-components/fast-foundation/src/toolbar/toolbar.ts
+++ b/packages/web-components/fast-foundation/src/toolbar/toolbar.ts
@@ -207,11 +207,10 @@ export class FASTToolbar extends FASTElement {
      * @internal
      */
     protected get allSlottedItems(): (HTMLElement | Node)[] {
-        return [
-            ...this.start.assignedElements(),
-            ...this.slottedItems,
-            ...this.end.assignedElements(),
-        ];
+        const start = this.start?.assignedElements() ?? [];
+        const end = this.end?.assignedElements() ?? [];
+
+        return [...start, ...this.slottedItems, ...end];
     }
 
     /**

From b5f23eb6c537a2659da4666f3c993c360d523153 Mon Sep 17 00:00:00 2001
From: Chris Holt <chhol@microsoft.com>
Date: Mon, 17 Jul 2023 15:00:26 -0700
Subject: [PATCH 2/6] fix: only add aria orientation for proper role divider
 (#6771)

* fix: add aria-orientation to divider only when role equals separator

* Change files

* pass role in test

* pri exclusion in template logic
---
 ...-c935a253-e2ce-42db-a6fd-50b3adbd8839.json |  7 +++++
 .../src/divider/divider.pw.spec.ts            | 26 +++++++++++++++++++
 .../src/divider/divider.template.ts           |  7 ++++-
 3 files changed, 39 insertions(+), 1 deletion(-)
 create mode 100644 change/@microsoft-fast-foundation-c935a253-e2ce-42db-a6fd-50b3adbd8839.json

diff --git a/change/@microsoft-fast-foundation-c935a253-e2ce-42db-a6fd-50b3adbd8839.json b/change/@microsoft-fast-foundation-c935a253-e2ce-42db-a6fd-50b3adbd8839.json
new file mode 100644
index 00000000000..fe8d1eeef35
--- /dev/null
+++ b/change/@microsoft-fast-foundation-c935a253-e2ce-42db-a6fd-50b3adbd8839.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix: add aria-orientation to divider only when role equals separator",
+  "packageName": "@microsoft/fast-foundation",
+  "email": "chhol@microsoft.com",
+  "dependentChangeType": "prerelease"
+}
diff --git a/packages/web-components/fast-foundation/src/divider/divider.pw.spec.ts b/packages/web-components/fast-foundation/src/divider/divider.pw.spec.ts
index 8e6369a92df..a90f998758c 100644
--- a/packages/web-components/fast-foundation/src/divider/divider.pw.spec.ts
+++ b/packages/web-components/fast-foundation/src/divider/divider.pw.spec.ts
@@ -70,4 +70,30 @@ test.describe("Divider", () => {
             DividerOrientation.horizontal
         );
     });
+
+    test("should NOT set the `aria-orientation` attribute equal to the `orientation` value if the `role` is presentational", async () => {
+        await root.evaluate(node => {
+            node.innerHTML = /* html */ `
+                <fast-divider orientation="vertical"></fast-divider>
+            `;
+        });
+
+        await expect(element).toHaveAttribute(
+            "aria-orientation",
+            DividerOrientation.vertical
+        );
+
+        await element.evaluate((node: FASTDivider, DividerRole) => {
+            node.role = DividerRole.presentation;
+        }, DividerRole);
+
+        await expect(element).not.toHaveAttribute(
+            "aria-orientation",
+            DividerOrientation.horizontal
+        );
+        await expect(element).not.toHaveAttribute(
+            "aria-orientation",
+            DividerOrientation.vertical
+        );
+    });
 });
diff --git a/packages/web-components/fast-foundation/src/divider/divider.template.ts b/packages/web-components/fast-foundation/src/divider/divider.template.ts
index 3ef55e26f51..e7d54def8cb 100644
--- a/packages/web-components/fast-foundation/src/divider/divider.template.ts
+++ b/packages/web-components/fast-foundation/src/divider/divider.template.ts
@@ -1,5 +1,6 @@
 import { ElementViewTemplate, html } from "@microsoft/fast-element";
 import type { FASTDivider } from "./divider.js";
+import { DividerRole } from "./divider.options.js";
 
 /**
  * The template for the {@link @microsoft/fast-foundation#FASTDivider} component.
@@ -7,7 +8,11 @@ import type { FASTDivider } from "./divider.js";
  */
 export function dividerTemplate<T extends FASTDivider>(): ElementViewTemplate<T> {
     return html<T>`
-        <template role="${x => x.role}" aria-orientation="${x => x.orientation}">
+        <template
+            role="${x => x.role}"
+            aria-orientation="${x =>
+                x.role !== DividerRole.presentation ? x.orientation : void 0}"
+        >
             <slot></slot>
         </template>
     `;

From 57f3c22c6341d8a21d48b1ffb7fcbfab1ffd02d8 Mon Sep 17 00:00:00 2001
From: Nicholas Rice <3213292+nicholasrice@users.noreply.github.com>
Date: Tue, 18 Jul 2023 15:19:21 -0700
Subject: [PATCH 3/6] chore: remove 'applyMixins' function (#6774)

* remove apply mixins from exported features

* Change files

* Update change/@microsoft-fast-foundation-b1cdc933-e7be-42e8-8d85-95a5af001f1a.json

---------

Co-authored-by: nicholasrice <nicholasrice@noreply.github.com>
Co-authored-by: Chris Holt <chhol@microsoft.com>
---
 ...st-foundation-b1cdc933-e7be-42e8-8d85-95a5af001f1a.json | 7 +++++++
 packages/web-components/fast-foundation/docs/api-report.md | 3 ---
 .../fast-foundation/src/utilities/apply-mixins.ts          | 2 +-
 .../web-components/fast-foundation/src/utilities/index.ts  | 1 -
 4 files changed, 8 insertions(+), 5 deletions(-)
 create mode 100644 change/@microsoft-fast-foundation-b1cdc933-e7be-42e8-8d85-95a5af001f1a.json

diff --git a/change/@microsoft-fast-foundation-b1cdc933-e7be-42e8-8d85-95a5af001f1a.json b/change/@microsoft-fast-foundation-b1cdc933-e7be-42e8-8d85-95a5af001f1a.json
new file mode 100644
index 00000000000..a2eacca5dc4
--- /dev/null
+++ b/change/@microsoft-fast-foundation-b1cdc933-e7be-42e8-8d85-95a5af001f1a.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Removed the 'applyMixins' function from exported features.",
+  "packageName": "@microsoft/fast-foundation",
+  "email": "nicholasrice@noreply.github.com",
+  "dependentChangeType": "prerelease"
+}
diff --git a/packages/web-components/fast-foundation/docs/api-report.md b/packages/web-components/fast-foundation/docs/api-report.md
index f6a024ad33d..dd87f8f6af6 100644
--- a/packages/web-components/fast-foundation/docs/api-report.md
+++ b/packages/web-components/fast-foundation/docs/api-report.md
@@ -91,9 +91,6 @@ export type AnchorTarget = ValuesOf<typeof AnchorTarget>;
 // @public
 export function anchorTemplate<T extends FASTAnchor>(options?: AnchorOptions): ViewTemplate<T>;
 
-// @public
-export function applyMixins(derivedCtor: any, ...baseCtors: any[]): void;
-
 // @public
 export class ARIAGlobalStatesAndProperties {
     ariaAtomic: "true" | "false" | string | null;
diff --git a/packages/web-components/fast-foundation/src/utilities/apply-mixins.ts b/packages/web-components/fast-foundation/src/utilities/apply-mixins.ts
index ee174360944..1bfe7fa8f35 100644
--- a/packages/web-components/fast-foundation/src/utilities/apply-mixins.ts
+++ b/packages/web-components/fast-foundation/src/utilities/apply-mixins.ts
@@ -3,7 +3,7 @@ import { AttributeConfiguration } from "@microsoft/fast-element";
 /**
  * Apply mixins to a constructor.
  * Sourced from {@link https://www.typescriptlang.org/docs/handbook/mixins.html | TypeScript Documentation }.
- * @public
+ * @internal
  */
 export function applyMixins(derivedCtor: any, ...baseCtors: any[]) {
     const derivedAttributes = AttributeConfiguration.locate(derivedCtor);
diff --git a/packages/web-components/fast-foundation/src/utilities/index.ts b/packages/web-components/fast-foundation/src/utilities/index.ts
index 1e1ea5e606f..6f1b1ffb3d3 100644
--- a/packages/web-components/fast-foundation/src/utilities/index.ts
+++ b/packages/web-components/fast-foundation/src/utilities/index.ts
@@ -1,4 +1,3 @@
-export * from "./apply-mixins.js";
 export * from "./direction.js";
 export * from "./match-media-stylesheet-behavior.js";
 export * from "./property-stylesheet-behavior.js";

From ff0b93a7fb4ca416629f51cc233078494aaf5f60 Mon Sep 17 00:00:00 2001
From: Nicholas Rice <3213292+nicholasrice@users.noreply.github.com>
Date: Wed, 19 Jul 2023 16:12:00 -0700
Subject: [PATCH 4/6] fix: prevent array splice notification on non-mutating
 splice() calls (#6786)

* always project splices

* Change files

* Update packages/web-components/fast-element/src/observation/arrays.spec.ts

---------

Co-authored-by: nicholasrice <nicholasrice@users.noreply.github.com>
---
 ...-44cfe95a-1f60-4e2e-a3f1-1d02aba63bab.json |  7 +++++++
 .../src/observation/arrays.spec.ts            | 19 +++++++++++++++++++
 .../fast-element/src/observation/arrays.ts    |  2 +-
 3 files changed, 27 insertions(+), 1 deletion(-)
 create mode 100644 change/@microsoft-fast-element-44cfe95a-1f60-4e2e-a3f1-1d02aba63bab.json

diff --git a/change/@microsoft-fast-element-44cfe95a-1f60-4e2e-a3f1-1d02aba63bab.json b/change/@microsoft-fast-element-44cfe95a-1f60-4e2e-a3f1-1d02aba63bab.json
new file mode 100644
index 00000000000..86d2fd7d98a
--- /dev/null
+++ b/change/@microsoft-fast-element-44cfe95a-1f60-4e2e-a3f1-1d02aba63bab.json
@@ -0,0 +1,7 @@
+{
+    "type": "prerelease",
+    "comment": "Prevent notification of array splices when operation does not mutate array values",
+    "packageName": "@microsoft/fast-element",
+    "email": "nicholasrice@users.noreply.github.com",
+    "dependentChangeType": "prerelease"
+}
diff --git a/packages/web-components/fast-element/src/observation/arrays.spec.ts b/packages/web-components/fast-element/src/observation/arrays.spec.ts
index b43b84b3d12..27da19775f0 100644
--- a/packages/web-components/fast-element/src/observation/arrays.spec.ts
+++ b/packages/web-components/fast-element/src/observation/arrays.spec.ts
@@ -433,6 +433,25 @@ describe("The ArrayObserver", () => {
 
         expect(wasCalled).to.be.false;
     })
+
+    it("should not deliver splices for .splice() when .splice() does not change the items in the array", async () => {
+        ArrayObserver.enable();
+        const array = [1,2,3,4,5];
+        const observer = Observable.getNotifier(array);
+        let splices;
+
+        observer.subscribe({
+            handleChange(source, args) {
+                splices = args
+            }
+        });
+
+        array.splice(0, array.length, ...array);
+
+        await Updates.next();
+
+        expect(splices.length).to.equal(0);
+    })
 });
 
 describe("The array length observer", () => {
diff --git a/packages/web-components/fast-element/src/observation/arrays.ts b/packages/web-components/fast-element/src/observation/arrays.ts
index 7388aa1724d..f6c2226f948 100644
--- a/packages/web-components/fast-element/src/observation/arrays.ts
+++ b/packages/web-components/fast-element/src/observation/arrays.ts
@@ -611,7 +611,7 @@ let defaultSpliceStrategy: SpliceStrategy = Object.freeze({
             if (changes === void 0) {
                 return emptyArray;
             }
-            return changes.length > 1 ? project(current, changes) : changes;
+            return project(current, changes);
         }
 
         return resetSplices;

From 9f6451f7e7c121d76e2ead6f50f77c312a0157f7 Mon Sep 17 00:00:00 2001
From: Nicholas Rice <3213292+nicholasrice@users.noreply.github.com>
Date: Thu, 20 Jul 2023 17:21:07 -0700
Subject: [PATCH 5/6] fix: Adds support for JavaScript optional chaining syntax
 in bindings (#6788)

* Adds support for JavaScript optional chaining syntax

* adding tests for other volatile binding cases

* Change files

---------

Co-authored-by: nicholasrice <nicholasrice@users.noreply.github.com>
---
 ...-00081d16-c6c4-4ceb-9f3e-83e02b28b92a.json |  7 ++++
 .../src/observation/observable.spec.ts        | 32 ++++++++++++++++++-
 .../src/observation/observable.ts             |  2 +-
 3 files changed, 39 insertions(+), 2 deletions(-)
 create mode 100644 change/@microsoft-fast-element-00081d16-c6c4-4ceb-9f3e-83e02b28b92a.json

diff --git a/change/@microsoft-fast-element-00081d16-c6c4-4ceb-9f3e-83e02b28b92a.json b/change/@microsoft-fast-element-00081d16-c6c4-4ceb-9f3e-83e02b28b92a.json
new file mode 100644
index 00000000000..aa5a589929b
--- /dev/null
+++ b/change/@microsoft-fast-element-00081d16-c6c4-4ceb-9f3e-83e02b28b92a.json
@@ -0,0 +1,7 @@
+{
+    "type": "prerelease",
+    "comment": "Adds volatile binding support for JavaScript optional chaining syntax",
+    "packageName": "@microsoft/fast-element",
+    "email": "nicholasrice@users.noreply.github.com",
+    "dependentChangeType": "prerelease"
+}
diff --git a/packages/web-components/fast-element/src/observation/observable.spec.ts b/packages/web-components/fast-element/src/observation/observable.spec.ts
index fd7dc328794..0c308a2c6e1 100644
--- a/packages/web-components/fast-element/src/observation/observable.spec.ts
+++ b/packages/web-components/fast-element/src/observation/observable.spec.ts
@@ -1,7 +1,7 @@
 import { expect } from "chai";
 import { Updates } from "./update-queue.js";
 import { PropertyChangeNotifier, SubscriberSet } from "./notifier.js";
-import { ExecutionContext, Observable, observable, volatile } from "./observable.js";
+import { ExecutionContext, Expression, Observable, observable, volatile } from "./observable.js";
 import { Fake } from "../testing/fakes.js";
 
 describe("The Observable", () => {
@@ -627,4 +627,34 @@ describe("The Observable", () => {
             expect(model.child2ChangedCalled).to.be.true;
         });
     });
+
+    context("isVolatileBinding", () => {
+        it("should return true when expression uses ternary operator", () => {
+            const expression = (a) => a !== undefined ? a : undefined;
+
+            expect(Observable.isVolatileBinding(expression)).to.equal(true)
+        });
+        it("should return true when expression uses 'if' condition", () => {
+            const expression = (a) => { if (a !== undefined) { return a }};
+
+            expect(Observable.isVolatileBinding(expression)).to.equal(true)
+        });
+        it("should return true when expression uses '&&' operator", () => {
+            const expression = (a) => { a && true};
+
+            expect(Observable.isVolatileBinding(expression)).to.equal(true)
+        });
+        it("should return true when expression uses '||' operator", () => {
+            const expression = (a) => { a || true};
+
+            expect(Observable.isVolatileBinding(expression)).to.equal(true)
+        });
+        it("should return true when when expression uses JavaScript optional chaining", () => {
+            // Avoid TS Compiling Optional property syntax away into ternary
+            // by using Function constructor
+            const expression = Function("(a) => a?.b") as Expression;
+
+            expect(Observable.isVolatileBinding(expression)).to.equal(true)
+        })
+    })
 });
diff --git a/packages/web-components/fast-element/src/observation/observable.ts b/packages/web-components/fast-element/src/observation/observable.ts
index b57ae47fb1e..965980bf83e 100644
--- a/packages/web-components/fast-element/src/observation/observable.ts
+++ b/packages/web-components/fast-element/src/observation/observable.ts
@@ -172,7 +172,7 @@ export interface ExpressionNotifier<TSource = any, TReturn = any, TParent = any>
  */
 export const Observable = FAST.getById(KernelServiceId.observable, () => {
     const queueUpdate = Updates.enqueue;
-    const volatileRegex = /(:|&&|\|\||if)/;
+    const volatileRegex = /(:|&&|\|\||if|\?\.)/;
     const notifierLookup = new WeakMap<any, Notifier>();
     let watcher: ExpressionNotifierImplementation | undefined = void 0;
     let createArrayObserver = (array: any[]): Notifier => {

From 50dba9c58b1bc6ac0c8b948f68dd0cfb6485460b Mon Sep 17 00:00:00 2001
From: m-akinc <7282195+m-akinc@users.noreply.github.com>
Date: Wed, 2 Aug 2023 00:50:16 -0500
Subject: [PATCH 6/6] Prevent keyboard navigation to hidden tab (#6789)

* Prevent keyboard navigation to hidden tab

* Change files

* Fix issue with Home/End

* use hasAttribute

* Update change/@microsoft-fast-foundation-7d8d0430-523b-473a-af77-e2bcf0bc6e38.json

* Update change/@microsoft-fast-foundation-7d8d0430-523b-473a-af77-e2bcf0bc6e38.json

---------

Co-authored-by: Nicholas Rice <3213292+nicholasrice@users.noreply.github.com>
---
 ...-7d8d0430-523b-473a-af77-e2bcf0bc6e38.json |  7 ++
 .../fast-foundation/src/tabs/tabs.pw.spec.ts  | 66 +++++++++++++++++++
 .../fast-foundation/src/tabs/tabs.ts          |  8 ++-
 3 files changed, 79 insertions(+), 2 deletions(-)
 create mode 100644 change/@microsoft-fast-foundation-7d8d0430-523b-473a-af77-e2bcf0bc6e38.json

diff --git a/change/@microsoft-fast-foundation-7d8d0430-523b-473a-af77-e2bcf0bc6e38.json b/change/@microsoft-fast-foundation-7d8d0430-523b-473a-af77-e2bcf0bc6e38.json
new file mode 100644
index 00000000000..e6da993e8d0
--- /dev/null
+++ b/change/@microsoft-fast-foundation-7d8d0430-523b-473a-af77-e2bcf0bc6e38.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Prevent keyboard navigation to hidden tab",
+  "packageName": "@microsoft/fast-foundation",
+  "email": "7282195+m-akinc@users.noreply.github.com",
+  "dependentChangeType": "prerelease"
+}
diff --git a/packages/web-components/fast-foundation/src/tabs/tabs.pw.spec.ts b/packages/web-components/fast-foundation/src/tabs/tabs.pw.spec.ts
index 4ca4e857224..1ba5cc21fa4 100644
--- a/packages/web-components/fast-foundation/src/tabs/tabs.pw.spec.ts
+++ b/packages/web-components/fast-foundation/src/tabs/tabs.pw.spec.ts
@@ -386,4 +386,70 @@ test.describe("Tabs", () => {
 
         await expect(element).toHaveJSProperty("activeid", secondTabId);
     });
+
+    test("should not allow selecting hidden tab using arrow keys", async () => {
+        test.slow();
+
+        await root.evaluate(node => {
+            node.innerHTML = /* html */ `
+                <fast-tabs>
+                    <fast-tab>Tab one</fast-tab>
+                    <fast-tab hidden>Tab two</fast-tab>
+                    <fast-tab>Tab three</fast-tab>
+                    <fast-tab-panel>Tab panel one</fast-tab-panel>
+                    <fast-tab-panel>Tab panel two</fast-tab-panel>
+                    <fast-tab-panel>Tab panel three</fast-tab-panel>
+                </fast-tabs>
+            `;
+        });
+
+        const firstTab = tabs.nth(0);
+
+        const thirdTab = tabs.nth(2);
+
+        const firstTabId = (await firstTab.getAttribute("id")) ?? "";
+
+        const thirdTabId = (await thirdTab.getAttribute("id")) ?? "";
+
+        await element.evaluate((node: FASTTabs, firstTabId) => {
+            node.activeid = firstTabId;
+        }, firstTabId);
+
+        await firstTab.press("ArrowRight");
+
+        await expect(element).toHaveJSProperty("activeid", thirdTabId);
+    });
+
+    test("should not allow selecting hidden tab by pressing End", async () => {
+        test.slow();
+
+        await root.evaluate(node => {
+            node.innerHTML = /* html */ `
+                <fast-tabs>
+                    <fast-tab>Tab one</fast-tab>
+                    <fast-tab>Tab two</fast-tab>
+                    <fast-tab hidden>Tab three</fast-tab>
+                    <fast-tab-panel>Tab panel one</fast-tab-panel>
+                    <fast-tab-panel>Tab panel two</fast-tab-panel>
+                    <fast-tab-panel>Tab panel three</fast-tab-panel>
+                </fast-tabs>
+            `;
+        });
+
+        const firstTab = tabs.nth(0);
+
+        const secondTab = tabs.nth(1);
+
+        const firstTabId = (await firstTab.getAttribute("id")) ?? "";
+
+        const secondTabId = (await secondTab.getAttribute("id")) ?? "";
+
+        await element.evaluate((node: FASTTabs, firstTabId) => {
+            node.activeid = firstTabId;
+        }, firstTabId);
+
+        await firstTab.press("End");
+
+        await expect(element).toHaveJSProperty("activeid", secondTabId);
+    });
 });
diff --git a/packages/web-components/fast-foundation/src/tabs/tabs.ts b/packages/web-components/fast-foundation/src/tabs/tabs.ts
index 3c7c07cb9fb..26a0a48e3d2 100644
--- a/packages/web-components/fast-foundation/src/tabs/tabs.ts
+++ b/packages/web-components/fast-foundation/src/tabs/tabs.ts
@@ -130,8 +130,12 @@ export class FASTTabs extends FASTElement {
         return el.getAttribute("aria-disabled") === "true";
     };
 
+    private isHiddenElement = (el: Element): el is HTMLElement => {
+        return el.hasAttribute("hidden");
+    };
+
     private isFocusableElement = (el: Element): el is HTMLElement => {
-        return !this.isDisabledElement(el);
+        return !this.isDisabledElement(el) && !this.isHiddenElement(el);
     };
 
     private getActiveIndex(): number {
@@ -272,7 +276,7 @@ export class FASTTabs extends FASTElement {
      * This method allows the active index to be adjusted by numerical increments
      */
     public adjust(adjustment: number): void {
-        const focusableTabs = this.tabs.filter(t => !this.isDisabledElement(t));
+        const focusableTabs = this.tabs.filter(t => this.isFocusableElement(t));
         const currentActiveTabIndex = focusableTabs.indexOf(this.activetab);
 
         const nextTabIndex = limit(