feat: update divider to use element internals (#31627)

change/@fluentui-web-components-205be5a1-cc0b-4195-879b-5e7c82b5ddea.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "feat: update divider to leverage ElementInternals",
+  "packageName": "@fluentui/web-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/web-components/docs/api-report.md

@@ -1888,14 +1888,23 @@ export function display(displayValue: CSSDisplayPropertyValue): string;
 //
 // @public
 export class Divider extends FASTElement {
+    constructor();
     // (undocumented)
     alignContent?: DividerAlignContent;
     // (undocumented)
     appearance?: DividerAppearance;
     // (undocumented)
+    connectedCallback(): void;
+    // @internal
+    elementInternals: ElementInternals;
+    // (undocumented)
     inset?: boolean;
-    orientation: DividerOrientation;
+    orientation?: DividerOrientation;
+    // @internal
+    orientationChanged(previous: string | null, next: string | null): void;
     role: DividerRole;
+    // @internal
+    roleChanged(previous: string | null, next: string | null): void;
 }
 
 // @public

packages/web-components/src/divider/divider.spec.ts

@@ -29,7 +29,7 @@ test.describe('Divider', () => {
             `;
     });
 
-    await expect(element).toHaveAttribute('role', 'separator');
+    await expect(element).toHaveJSProperty('elementInternals.role', 'separator');
   });
 
   test('should set the `role` attribute equal to the role provided', async () => {
@@ -39,13 +39,13 @@ test.describe('Divider', () => {
             `;
     });
 
-    await expect(element).toHaveAttribute('role', 'presentation');
+    await expect(element).toHaveJSProperty('elementInternals.role', 'presentation');
 
     await element.evaluate((node: Divider) => {
       node.role = 'separator';
     });
 
-    await expect(element).toHaveAttribute('role', 'separator');
+    await expect(element).toHaveJSProperty('elementInternals.role', 'separator');
   });
 
   test('should set the `aria-orientation` attribute equal to the `orientation` value', async () => {
@@ -55,13 +55,13 @@ test.describe('Divider', () => {
             `;
     });
 
-    await expect(element).toHaveAttribute('aria-orientation', 'vertical');
+    await expect(element).toHaveJSProperty('elementInternals.ariaOrientation', 'vertical');
 
     await element.evaluate((node: Divider) => {
       node.orientation = 'horizontal';
     });
 
-    await expect(element).toHaveAttribute('aria-orientation', 'horizontal');
+    await expect(element).toHaveJSProperty('elementInternals.ariaOrientation', 'horizontal');
   });
 
   test('should NOT set the `aria-orientation` property equal to `orientation` value if the `role` is presentational', async () => {
@@ -71,14 +71,14 @@ test.describe('Divider', () => {
             `;
     });
 
-    await expect(element).toHaveAttribute('aria-orientation', 'vertical');
+    await expect(element).toHaveJSProperty('elementInternals.ariaOrientation', 'vertical');
 
     await element.evaluate((node: Divider) => {
       node.role = 'presentation';
     });
 
-    await expect(element).not.toHaveJSProperty('aria-orientation', 'vertical');
-    await expect(element).not.toHaveJSProperty('aria-orientation', 'horizontal');
+    await expect(element).not.toHaveJSProperty('elementInternals.ariaOrientation', 'vertical');
+    await expect(element).not.toHaveJSProperty('elementInternals.ariaOrientation', 'horizontal');
   });
 
   test('should initialize to the provided value attribute if set post-connection', async () => {

packages/web-components/src/divider/divider.stories.ts

@@ -52,7 +52,6 @@ export default {
     content: 'Section One',
     alignContent: undefined,
     appearance: undefined,
-    role: DividerRole.separator,
     inset: false,
     orientation: undefined,
   },

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

@@ -1,16 +1,8 @@
 import { ElementViewTemplate, html } from '@microsoft/fast-element';
 import type { Divider } from './divider.js';
-import { DividerRole } from './divider.options.js';
 
 export function dividerTemplate<T extends Divider>(): ElementViewTemplate<T> {
-  return html<T>`
-    <template
-      role="${x => x.role}"
-      aria-orientation="${x => (x.role !== DividerRole.presentation ? x.orientation : void 0)}"
-    >
-      <slot></slot>
-    </template>
-  `;
+  return html<T>`<slot></slot>`;
 }
 
 /**

packages/web-components/src/divider/divider.ts

@@ -8,6 +8,13 @@ import { DividerAlignContent, DividerAppearance, DividerOrientation, DividerRole
  * A divider groups sections of content to create visual rhythm and hierarchy. Use dividers along with spacing and headers to organize content in your layout.
  */
 export class Divider extends FASTElement {
+  /**
+   * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+   *
+   * @internal
+   */
+  public elementInternals: ElementInternals = this.attachInternals();
+
   /**
    * The role of the element.
    *
@@ -16,7 +23,7 @@ export class Divider extends FASTElement {
    * HTML Attribute: role
    */
   @attr
-  public role: DividerRole = DividerRole.separator;
+  public role!: DividerRole;
 
   /**
    * The orientation of the divider.
@@ -26,7 +33,7 @@ export class Divider extends FASTElement {
    * HTML Attribute: orientation
    */
   @attr
-  public orientation: DividerOrientation = DividerOrientation.horizontal;
+  public orientation?: DividerOrientation;
 
   /**
    * @public
@@ -51,4 +58,44 @@ export class Divider extends FASTElement {
    */
   @attr({ mode: 'boolean' })
   public inset?: boolean;
+
+  public connectedCallback(): void {
+    super.connectedCallback();
+
+    this.elementInternals.role = this.role ?? DividerRole.separator;
+
+    if (this.role !== DividerRole.presentation) {
+      this.elementInternals.ariaOrientation = this.orientation ?? DividerOrientation.horizontal;
+    }
+  }
+
+  /**
+   * Sets the element's internal role when the role attribute changes.
+   *
+   * @param previous - the previous role value
+   * @param next - the current role value
+   * @internal
+   */
+  public roleChanged(previous: string | null, next: string | null): void {
+    if (this.$fastController.isConnected) {
+      this.elementInternals.role = `${next ?? DividerRole.separator}`;
+    }
+
+    if (next === DividerRole.presentation) {
+      this.elementInternals.ariaOrientation = null;
+    }
+  }
+
+  /**
+   * Sets the element's internal orientation when the orientation attribute changes.
+   *
+   * @param previous - the previous orientation value
+   * @param next - the current orientation value
+   * @internal
+   */
+  public orientationChanged(previous: string | null, next: string | null): void {
+    if (this.$fastController.isConnected) {
+      this.elementInternals.ariaOrientation = this.role !== DividerRole.presentation ? next : null;
+    }
+  }
 }