fix: ul, li problems for a11y

DaleStudy · Jul 18, 2024 · ad4deca · ad4deca
1 parent b17bf26
commit ad4deca
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 73 deletions.
diff --git a/components/footer-link-list.js b/components/footer-link-list.js
@@ -1,25 +1,10 @@
 import { css, html } from "../html-css-utils.js";
 
-class FooterLinks extends HTMLElement {
+class FooterLinkList extends HTMLElement {
   constructor() {
     super();
 
     this.render();
-    this.validateAttributes();
-  }
-
-  validateAttributes() {
-    const slot = this.shadowRoot.querySelector("slot");
-    const nodes = slot.assignedElements();
-
-    nodes.forEach((node) => {
-      if (
-        node.nodeType === Node.ELEMENT_NODE &&
-        node.tagName.toLowerCase() !== "ds-footer-link"
-      ) {
-        throw new Error("All children must be <ds-footer-link> elements.");
-      }
-    });
   }
 
   render() {
@@ -48,37 +33,7 @@ class FooterLinks extends HTMLElement {
           column-gap: 80px;
         }
       }
-    `;
-  }
-
-  createHtml() {
-    return html`<ul>
-      <slot></slot>
-    </ul>`;
-  }
-}
-
-class FooterLink extends HTMLElement {
-  constructor() {
-    super();
 
-    this.validateAttributes();
-    this.render();
-  }
-
-  validateAttributes() {
-    if (!this.hasAttribute("href")) {
-      throw new Error('The "href" attribute is required.');
-    }
-  }
-
-  render() {
-    this.attachShadow({ mode: "open" });
-    this.shadowRoot.innerHTML = this.createCss() + this.createHtml();
-  }
-
-  createCss() {
-    return css`
       li {
         color: var(--bg-100);
         font-size: 16px;
@@ -111,15 +66,35 @@ class FooterLink extends HTMLElement {
   }
 
   createHtml() {
-    const href = this.getAttribute("href");
-
-    return html`<li>
-      <a href=${href} target="_blank">
-        <slot></slot>
-      </a>
-    </li>`;
+    return html`<ul>
+      <li>
+        <a
+          href="https://github.com/DaleStudy/leetcode-study/discussions/54"
+          target="_blank"
+        >
+          FAQ
+        </a>
+      </li>
+
+      <li>
+        <a
+          href="https://github.com/DaleStudy/leetcode-study/discussions/52"
+          target="_blank"
+        >
+          Apply
+        </a>
+      </li>
+
+      <li>
+        <a
+          href="https://github.com/DaleStudy/leetcode-study/blob/main/CONTRIBUTING.md"
+          target="_blank"
+        >
+          Guide
+        </a>
+      </li>
+    </ul>`;
   }
 }
 
-customElements.define("ds-footer-link-list", FooterLinks);
-customElements.define("ds-footer-link", FooterLink);
+customElements.define("ds-footer-link-list", FooterLinkList);
diff --git a/index.html b/index.html
@@ -193,24 +193,7 @@
     </ds-steps-section>
 
     <ds-footer>
-      <ds-footer-link-list slot="footer-link-list">
-        <!-- TODO: add real links -->
-        <ds-footer-link
-          href="https://github.com/DaleStudy/leetcode-study/discussions/54"
-        >
-          FAQ
-        </ds-footer-link>
-        <ds-footer-link
-          href="https://github.com/DaleStudy/leetcode-study/discussions/52"
-        >
-          Apply
-        </ds-footer-link>
-        <ds-footer-link
-          href="https://github.com/DaleStudy/leetcode-study/blob/main/CONTRIBUTING.md"
-        >
-          Guide
-        </ds-footer-link>
-      </ds-footer-link-list>
+      <ds-footer-link-list slot="footer-link-list"></ds-footer-link-list>
 
       <ds-icon-link-list slot="icon-link-list"></ds-icon-link-list>
     </ds-footer>