using pfe-id and .pfeId instead of id for analytics reasons

Author: kylebuch8

elements/pfe-accordion/src/pfe-accordion.js

@@ -185,8 +185,8 @@ class PfeAccordion extends PFElement {
     headers.forEach(header => {
       const panel = this._panelForHeader(header);
 
-      header.setAttribute("aria-controls", panel.id);
-      panel.setAttribute("aria-labelledby", header.id);
+      header.setAttribute("aria-controls", panel.pfeId);
+      panel.setAttribute("aria-labelledby", header.pfeId);
     });
   }
 
@@ -356,6 +356,18 @@ class PfeAccordionHeader extends PFElement {
     return "pfe-accordion-header.html";
   }
 
+  get pfeId() {
+    return this.getAttribute("pfe-id");
+  }
+
+  set pfeId(id) {
+    if (!id) {
+      return;
+    }
+
+    this.setAttribute("pfe-id", id);
+  }
+
   static get observedAttributes() {
     return ["aria-expanded"];
   }
@@ -372,8 +384,8 @@ class PfeAccordionHeader extends PFElement {
       this.setAttribute("role", "header");
     }
 
-    if (!this.id) {
-      this.id = `${PfeAccordionHeader.tag}-${generateId()}`;
+    if (!this.pfeId) {
+      this.pfeId = `${PfeAccordionHeader.tag}-${generateId()}`;
     }
 
     this.button = this.shadowRoot.querySelector("button");
@@ -456,6 +468,18 @@ class PfeAccordionPanel extends PFElement {
     return "pfe-accordion-panel.html";
   }
 
+  get pfeId() {
+    return this.getAttribute("pfe-id");
+  }
+
+  set pfeId(id) {
+    if (!id) {
+      return;
+    }
+
+    this.setAttribute("pfe-id", id);
+  }
+
   constructor() {
     super(PfeAccordionPanel);
   }
@@ -467,8 +491,8 @@ class PfeAccordionPanel extends PFElement {
       this.setAttribute("role", "region");
     }
 
-    if (!this.id) {
-      this.id = `${PfeAccordionPanel.tag}-${generateId()}`;
+    if (!this.pfeId) {
+      this.pfeId = `${PfeAccordionPanel.tag}-${generateId()}`;
     }
   }
 

elements/pfe-accordion/test/pfe-accordion_test.html

@@ -68,8 +68,8 @@ <h2>Where do the main characters work as adults?</h2>
           assert.equal(header.getAttribute('role'), 'header');
           assert.isTrue(panel.hasAttribute('aria-labelledby'));
           assert.equal(panel.getAttribute('role'), 'region');
-          assert.equal(header.id, panel.getAttribute('aria-labelledby'));
-          assert.equal(panel.id, header.getAttribute('aria-controls'));
+          assert.equal(header.pfeId, panel.getAttribute('aria-labelledby'));
+          assert.equal(panel.pfeId, header.getAttribute('aria-controls'));
         });
 
         test('it should expand a panel when a header is selected', () => {

elements/pfe-tabs/src/pfe-tabs.js

@@ -259,13 +259,13 @@ class PfeTabs extends PFElement {
       const panel = tab.nextElementSibling;
       if (panel.tagName.toLowerCase() !== "pfe-tab-panel") {
         console.warn(
-          `${PfeTabs.tag}: tab #${tab.id} is not a sibling of a <pfe-tab-panel>`
+          `${PfeTabs.tag}: tab #${tab.pfeId} is not a sibling of a <pfe-tab-panel>`
         );
         return;
       }
 
-      tab.setAttribute("aria-controls", panel.id);
-      panel.setAttribute("aria-labelledby", tab.id);
+      tab.setAttribute("aria-controls", panel.pfeId);
+      panel.setAttribute("aria-labelledby", tab.pfeId);
 
       tab.addEventListener("click", this._onClick);
     });
@@ -283,7 +283,7 @@ class PfeTabs extends PFElement {
 
   _panelForTab(tab) {
     const panelId = tab.getAttribute("aria-controls");
-    return this.querySelector(`#${panelId}`);
+    return this.querySelector(`[pfe-id="${panelId}"]`);
   }
 
   _prevTab() {
@@ -310,7 +310,7 @@ class PfeTabs extends PFElement {
 
   _getTabIndex(_tab) {
     const tabs = this._allTabs();
-    const index = tabs.findIndex(tab => tab.id === _tab.id);
+    const index = tabs.findIndex(tab => tab.pfeId === _tab.pfeId);
     return index;
   }
 
@@ -329,7 +329,7 @@ class PfeTabs extends PFElement {
     let newTabSelected = false;
 
     if (!newPanel) {
-      throw new Error(`No panel with id ${newPanel.id}`);
+      throw new Error(`No panel with pfeId ${newPanel.pfeId}`);
     }
 
     if (this.selected && this.selected !== newTab) {
@@ -440,11 +440,23 @@ class PfeTab extends PFElement {
     super(PfeTab);
   }
 
+  get pfeId() {
+    return this.getAttribute("pfe-id");
+  }
+
+  set pfeId(id) {
+    if (!id) {
+      return;
+    }
+
+    this.setAttribute("pfe-id", id);
+  }
+
   connectedCallback() {
     super.connectedCallback();
 
-    if (!this.id) {
-      this.id = `${PfeTab.tag}-${generateId()}`;
+    if (!this.pfeId) {
+      this.pfeId = `${PfeTab.tag}-${generateId()}`;
     }
 
     this.setAttribute("role", "tab");
@@ -484,15 +496,27 @@ class PfeTabPanel extends PFElement {
     return "pfe-tab-panel.html";
   }
 
+  get pfeId() {
+    return this.getAttribute("pfe-id");
+  }
+
+  set pfeId(id) {
+    if (!id) {
+      return;
+    }
+
+    this.setAttribute("pfe-id", id);
+  }
+
   constructor() {
     super(PfeTabPanel);
   }
 
   connectedCallback() {
     super.connectedCallback();
 
-    if (!this.id) {
-      this.id = `${PfeTabPanel.tag}-${generateId()}`;
+    if (!this.pfeId) {
+      this.pfeId = `${PfeTabPanel.tag}-${generateId()}`;
     }
 
     this.setAttribute("role", "tabpanel");

elements/pfe-tabs/test/pfe-tabs_test.html

@@ -109,16 +109,16 @@ <h2>Content 3</h2>
           const tab = rhTabs.querySelector('pfe-tab');
           const panel = rhTabs.querySelector('pfe-tab-panel');
 
-          assert.isTrue(tab.hasAttribute("id"));
-          assert.isTrue(panel.hasAttribute("id"));
+          assert.isTrue(tab.hasAttribute("pfe-id"));
+          assert.isTrue(panel.hasAttribute("pfe-id"));
           assert.equal(rhTabs.getAttribute("role"), "tablist");
           assert.equal(tab.getAttribute("role"), "tab");
           assert.isTrue(tab.hasAttribute("aria-selected"));
           assert.isTrue(tab.hasAttribute("aria-controls"));
           assert.equal(panel.getAttribute("role"), "tabpanel");
           assert.isTrue(panel.hasAttribute("aria-labelledby"));
-          assert.equal(tab.id, panel.getAttribute("aria-labelledby"));
-          assert.equal(tab.getAttribute("aria-controls"), panel.id);
+          assert.equal(tab.pfeId, panel.getAttribute("aria-labelledby"));
+          assert.equal(tab.getAttribute("aria-controls"), panel.pfeId);
         });
 
         test('it should use the ids that are provided instead of generating new ones', () => {
@@ -202,7 +202,7 @@ <h2>Content 3</h2>
             const eventDetail = handlerSpy.getCall(0).args[0].detail;
 
             sinon.assert.calledOnce(handlerSpy);
-            assert.equal(firstTab.id, eventDetail.tab.id);
+            assert.equal(firstTab.pfeId, eventDetail.tab.pfeId);
 
             document.removeEventListener('pfe-tabs:hidden-tab', handlerSpy);
             done();
@@ -221,7 +221,7 @@ <h2>Content 3</h2>
             const eventDetail = handlerSpy.getCall(0).args[0].detail;
 
             sinon.assert.calledOnce(handlerSpy);
-            assert.equal(secondTab.id, eventDetail.tab.id);
+            assert.equal(secondTab.pfeId, eventDetail.tab.pfeId);
 
             document.removeEventListener('pfe-tabs:shown-tab', handlerSpy);
             done();