Merge branch 'master' into users/scomea/picker-zero

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"
+}

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
+        );
+    });
 });

packages/web-components/fast-foundation/src/divider/divider.template.ts

@@ -1,13 +1,18 @@
 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.
  * @public
  */
 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>
     `;