fix(utils): replace randomIdString() with deterministic createElementId()

components/button/pure.js

@@ -1,7 +1,7 @@
 import { html, nothing } from "lit";
 import { ifDefined } from "lit/directives/if-defined.js";
 
-import { randomIdString } from "../utils/index.js";
+import { createElementId } from "../utils/index.js";
 
 /**
  * @param {object} options
@@ -28,7 +28,10 @@ export default function Button({
   variant = "primary",
   action,
 }) {
-  const labelId = randomIdString("label-");
+  const labelId = createElementId(
+    "label",
+    `${typeof label === "string" ? label : "btn"}-${href || ""}`,
+  );
   const iconElement = icon
     ? html`<span class="icon" part="icon">${icon}</span>`
     : nothing;

components/color-theme/element.js

@@ -61,7 +61,7 @@ export class MDNColorTheme extends L10nMixin(LitElement) {
 
   render() {
     return html`<div class="color-theme">
-      <mdn-dropdown>
+      <mdn-dropdown name="color-theme">
         <button
           part="button"
           slot="button"

components/dropdown/element.js

@@ -1,6 +1,6 @@
 import { LitElement, html } from "lit";
 
-import { randomIdString } from "../utils/index.js";
+import { createElementId } from "../utils/index.js";
 
 import styles from "./element.css?lit";
 
@@ -13,6 +13,7 @@ import styles from "./element.css?lit";
  *
  * @element mdn-dropdown
  *
+ * @attr {string} name - Unique name used to generate a stable ID for the dropdown slot element (for aria-controls). Required when the dropdown slot element has no explicit id.
  * @attr {boolean} open - Whether the dropdown is open or not.
  *
  * @slot button - The element used to toggle the dropdown.
@@ -22,12 +23,14 @@ export class MDNDropdown extends LitElement {
   static styles = styles;
 
   static properties = {
+    name: { type: String, required: true },
     open: { type: Boolean },
     loaded: { type: Boolean, reflect: true },
   };
 
   constructor() {
     super();
+    this.name = "";
     this.open = false;
     this.loaded = false;
   }
@@ -70,7 +73,7 @@ export class MDNDropdown extends LitElement {
   _setAriaAttributes() {
     let id = this._dropdownSlotElements.find((element) => element.id)?.id;
     if (!id) {
-      id = randomIdString("uid_");
+      id = createElementId("dropdown", this.name);
       this._dropdownSlotElements[0]?.setAttribute("id", id);
     }
     for (const element of this._buttonSlotElements) {

components/interactive-example/with-choices.js

@@ -5,7 +5,7 @@
 
 import { L10nMixin } from "../../l10n/mixin.js";
 import { MDNPlayEditor } from "../play-editor/element.js";
-import { randomIdString } from "../utils/index.js";
+import { createElementId } from "../utils/index.js";
 
 import { isCSSSupported } from "./utils.js";
 
@@ -17,7 +17,7 @@
  */
 
 /**
  * @template {new (...args: any[]) => InteractiveExampleBase} TBase
  * @param {TBase} Base
  */
 export const InteractiveExampleWithChoices = (Base) =>
@@ -28,7 +28,7 @@
       __choiceUpdated: { state: true },
     };
 
     /** @param {any[]} _args  */
     constructor(..._args) {
       super();
       /** @type {number} */
@@ -111,7 +111,7 @@
     }
 
     #render() {
-      const id = randomIdString();
+      const id = createElementId("ix-choices", this.name);
 
       return html`
         <div class="template-choices" aria-labelledby=${id}>

components/interactive-example/with-console.js

@@ -11,20 +11,20 @@
 import "../ix-tab-panel/element.js";
 import "../ix-tab-wrapper/element.js";
 import { L10nMixin } from "../../l10n/mixin.js";
-import { randomIdString } from "../utils/index.js";
+import { createElementId } from "../utils/index.js";
 
 /**
  * @import { InteractiveExampleBase } from "./element.js";
  */
 
 /**
  * @template {new (...args: any[]) => InteractiveExampleBase} TBase
  * @param {TBase} Base
  */
 export const InteractiveExampleWithConsole = (Base) =>
   class extends L10nMixin(Base) {
     #render() {
-      const id = randomIdString();
+      const id = createElementId("ix-console", this.name);
 
       return html`
         <mdn-play-controller ${ref(this._controller)}>

components/interactive-example/with-tabs.js

@@ -9,20 +9,20 @@
 import "../ix-tab-panel/element.js";
 import "../ix-tab-wrapper/element.js";
 import { L10nMixin } from "../../l10n/mixin.js";
-import { randomIdString } from "../utils/index.js";
+import { createElementId } from "../utils/index.js";
 
 /**
  * @import { InteractiveExampleBase } from "./element.js";
  */
 
 /**
  * @template {new (...args: any[]) => InteractiveExampleBase} TBase
  * @param {TBase} Base
  */
 export const InteractiveExampleWithTabs = (Base) =>
   class extends L10nMixin(Base) {
     #render() {
-      const id = randomIdString();
+      const id = createElementId("ix-tabbed", this.name);
 
       return html`
         <mdn-play-controller

components/language-switcher/element.js

@@ -80,7 +80,7 @@ export class MDNLanguageSwitcher extends L10nMixin(LitElement) {
     }
 
     return html`<div class="language-switcher">
-      <mdn-dropdown>
+      <mdn-dropdown name="language-switcher">
         <button
           part="button"
           slot="button"

components/menu/server.js

@@ -71,7 +71,7 @@ export class Menu extends ServerComponent {
                   data-glean-id=${`menu_click_link: top-level -> ${tab.href}`}
                   >${tab.buttonText}</a
                 >`
-              : html`<mdn-dropdown>
+              : html`<mdn-dropdown name=${`menu-${tab.id}`}>
                   <button class="menu__tab-button" type="button" slot="button">
                     ${typeof tab.buttonText === "string"
                       ? html`<span class="menu__tab-label"

components/observatory-results/rating.js

@@ -10,7 +10,7 @@
 
 /**
  *
  * @param {{result: import("@observatory").Result, host: string, rescan: Function}} props
  * @returns {import("@lit").TemplateResult}
  */
 export function Rating({ result, host, rescan }) {
@@ -22,7 +22,7 @@
     <section class="scan-result">
       <section class="grade-trend">
         <div class="overall">
-          <mdn-dropdown>
+          <mdn-dropdown name="observatory-results">
             <button
               slot="button"
               aria-label="show info tooltip"

components/user-menu/element.js

@@ -93,7 +93,7 @@ export class MDNUserMenu extends L10nMixin(LitElement) {
           return user.isAuthenticated
             ? html`
                 <div class="user-menu">
-                  <mdn-dropdown>
+                  <mdn-dropdown name="user-menu">
                     <button slot="button" class="user-menu__button">
                       ${user.avatarUrl
                         ? html`<img

components/utils/index.js

@@ -1,9 +1,31 @@
 /**
- * Used to generate a random element id by combining a prefix with a random string.
+ * Simple FNV-1a hash implementation for generating deterministic IDs.
+ * @param {string} str - String to hash
+ * @returns {string} - Hexadecimal hash string
+ */
+function hashString(str) {
+  let hash = 2_166_136_261; // FNV offset basis
+  for (let i = 0; i < str.length; i++) {
+    // eslint-disable-next-line unicorn/prefer-code-point -- charCodeAt is sufficient for hash
+    hash ^= str.charCodeAt(i);
+    hash = Math.imul(hash, 16_777_619); // FNV prime
+  }
+  // Convert to unsigned 32-bit and then to hex
+  return (hash >>> 0).toString(36);
+}
+
+/**
+ * Used to generate a deterministic element id by hashing the provided content.
+ * Falls back to random generation if no content is provided (for backwards compatibility).
  *
- * @param {string} prefix
+ * @param {string} prefix - Prefix for the ID
+ * @param {string} content - Content to hash for ID generation
  * @returns {string}
  */
-export function randomIdString(prefix = "id-") {
-  return Math.random().toString(36).replace("0.", prefix);
+export function createElementId(prefix, content) {
+  if (!content) {
+    // Fallback to random for backwards compatibility when no content provided
+    return Math.random().toString(36).replace("0.", prefix);
+  }
+  return `${prefix}-${hashString(String(content))}`;
 }