fix(accordion-item): remove unnecessary id property mappings

Co-authored-by: Copilot <copilot@github.com>

Author: radium-v

packages/web-components/src/accordion-item/accordion-item.base.ts

@@ -1,6 +1,4 @@
-import { attr, FASTElement, nullableNumberConverter } from '@microsoft/fast-element';
-import { uniqueId } from '@microsoft/fast-web-utilities';
-import { toggleState } from '../utils/element-internals.js';
+import { attr, FASTElement, nullableNumberConverter, observable } from '@microsoft/fast-element';
 
 /**
  *
@@ -58,18 +56,9 @@ export class BaseAccordionItem extends FASTElement {
   @attr({ mode: 'boolean' })
   public disabled: boolean = false;
 
-  /**
-   * The item ID
-   *
-   * @public
-   * @remarks
-   * HTML Attribute: id
-   */
-  @attr
-  public id: string = uniqueId('accordion-');
-
   /**
    * @internal
    */
+  @observable
   public expandbutton!: HTMLElement;
 }

packages/web-components/src/accordion-item/accordion-item.spec.ts

@@ -116,20 +116,6 @@ test.describe('Accordion item', () => {
     await expect(firstItem).toHaveJSProperty('expanded', true);
   });
 
-  test('should set internal properties to match the id when provided', async ({ fastPage }) => {
-    const { element } = fastPage;
-    const button = element.locator('button');
-
-    await fastPage.setTemplate(/* html */ `
-      <fluent-accordion>
-        <fluent-accordion-item id="foo">Item 1</fluent-accordion-item>
-      </fluent-accordion>
-    `);
-
-    await expect(element.locator(`[role="region"]`)).toHaveAttribute('aria-labelledby', 'foo');
-    await expect(button).toHaveId('foo');
-  });
-
   for (const size of Object.values(AccordionItemSize)) {
     test(`should set the \`size\` property to "${size}" when the attribute is set to "${size}"`, async ({
       fastPage,

packages/web-components/src/accordion-item/accordion-item.template.ts

@@ -41,19 +41,19 @@ export function accordionItemTemplate<T extends AccordionItem>(
       <button
         class="button"
         part="button"
-        ${ref('expandbutton')}
-        ?disabled="${x => (x.disabled ? 'true' : void 0)}"
+        id="control"
+        aria-controls="panel"
         aria-expanded="${x => x.expanded}"
-        aria-controls="${x => x.id}-panel"
-        id="${x => x.id}"
+        ?disabled="${x => x.disabled}"
+        ${ref('expandbutton')}
       >
         <slot name="heading"></slot>
       </button>
       ${startSlotTemplate(options)}
       <slot name="marker-expanded"> ${staticallyCompose(options.expandedIcon)} </slot>
       <slot name="marker-collapsed"> ${staticallyCompose(options.collapsedIcon)} </slot>
     </div>
-    <div class="content" part="content" id="${x => x.id}-panel" role="region" aria-labelledby="${x => x.id}">
+    <div class="content" part="content" id="panel" role="region" aria-labelledby="control">
       <slot></slot>
     </div>
   `;