add optional aria-label to hero links and comments to hero-section js

Author: hmillersarah

web-components/hero-section/hero-section.js

@@ -3,10 +3,20 @@ fetch("web-components/hero-section/hero-section.html")
     .then(stream => stream.text())
     .then(text => createComponent(text))
 
-// Create web component
+/**
+ * Creates a web component using a given HTML template.
+ * @param {string} html - The HTML template.
+ * @returns {void}
+ */
 function createComponent(html) {
 
-    // Set text content
+    /**
+     * Sets the content of an element based on a CSS selector.
+     * @param {string} cssSelector - The CSS selector of the element to set the content for.
+     * @param {string} content - The content to set for the element.
+     * @param {boolean} shadow - A boolean indicating whether to use the shadow DOM for the element.
+     * @returns {void}
+     */
     function setContent(cssSelector, content, shadow) {
         const selector = shadow.querySelector(cssSelector);
         // Check if span tag is used in desc
@@ -19,17 +29,35 @@ function createComponent(html) {
         }
     }
 
-    // Set link
-    function setLink(cssSelector, url, shadow) {
+     /**
+     * Sets the link of an element based on a CSS selector
+     * @param {string} cssSelector - The CSS selector of the element to set the link for
+     * @param {string} url - The link url
+     * @param {boolean} shadow - A boolean indicating whether to use the shadow DOM for the element
+     * @param {string} name - The name of the element containing the link
+     * @returns {void}
+     */
+    function setLink(cssSelector, url, shadow, name) {
+        name = name || "";
         const link = shadow.querySelector(cssSelector);
         link.href = url;
         // Open new tab for external links
         if (url.includes('https://')) {
             link.setAttribute('target', '_blank');
         }
+        // Set aria-label if needed
+        if (name != "") {
+            link.setAttribute('aria-label', `See details on ${name}`);
+        }
     }
 
-    // Set image
+    /**
+     * Sets the image of an element based on a CSS selector.
+     * @param {string} cssSelector - The CSS selector of the element to set the content for.
+     * @param {string} src - The image to set for the element.
+     * @param {boolean} shadow - A boolean indicating whether to use the shadow DOM for the element.
+     * @returns {void}
+     */
     function setImage(cssSelector, src, shadow) {
         const image = shadow.querySelector(cssSelector);
         image.src = src;
@@ -44,12 +72,20 @@ function createComponent(html) {
             super();
         }
 
-        // Return array of properties to observe
+        /**
+         * Returns an array of properties to observe.
+         * @returns {Array} An array of property names.
+        */
         static get observedAttributes() {
             return ['name', 'image', 'section', 'desc', 'linktext', 'link', 'linktext2', 'link2', 'highlight', 'highlightlink'];
         }
 
-        // Called when an attribute is defined or changed
+        /**
+         * Called when an attribute is defined or changed.
+         * @param {string} property - The name of the attribute.
+         * @param {string} oldValue - The old value of the attribute.
+         * @param {string} newValue - The new value of the attribute.
+        */
         attributeChangedCallback(property, oldValue, newValue) {
             if (oldValue === newValue) return;
             this[property] = newValue;
@@ -79,7 +115,7 @@ function createComponent(html) {
             // Display highlight card if content is provided
             if (this.highlight != undefined) {
                 setContent('.highlight', this.highlight, shadow);
-                setLink('.highlight-link', this.highlightlink, shadow);
+                setLink('.highlight-link', this.highlightlink, shadow, this.highlight);
                 hero.classList.add('hero-highlight');
             } else {
                 const highlightCard = shadow.querySelector('.highlight-card');