RC #336

docs/partials/api.md

@@ -276,7 +276,7 @@ The `shape` attribute accepts three values: `rounded`, `pill`, or `circle`.
 
 ### Using role="button"
 
-Aside from the standard hyperlink use-case, the `auro-hyperlink` element is intended to be used for button situations as illustrated below. Assuming the role of button, `auro-hyperlink` also will track the `aria-pressed` state.
+Aside from the standard hyperlink use-case, the `auro-hyperlink` element is intended to be used for button situations as illustrated below.
 
 **Note:** Any `href` will be ignored when using `role="button"`. A click-event must be passed to the element as illustrated in the example below.
 

src/auro-hyperlink.js

@@ -131,7 +131,6 @@ export class AuroHyperlink extends ComponentBase {
     <a
       ${ref(this.hyperlinkRef)}
       part="link"
-      aria-pressed="${ifDefined(this.role === "button" ? this.ariaPressedState(this.ariapressed) : undefined)}"
       class="${classMap(classes)}"
       href="${ifDefined(this.role ? undefined : this.safeUri)}"
       .rel="${ifDefined(this.target || this.rel ? this.getRelType(this.target, this.rel) : undefined)}"

src/component-base.mjs

@@ -56,11 +56,6 @@ export default class ComponentBase extends AuroElement {
      */
     this.defaultReferrerPolicy = "strict-origin-when-cross-origin";
 
-    /**
-     * @private
-     */
-    this.ariapressed = "false";
-
     /**
      * @private
      */
@@ -393,65 +388,6 @@ export default class ComponentBase extends AuroElement {
     return undefined;
   }
 
-  /**
-   * Sets the ARIA pressed state based on user interactions.
-   *
-   * @example
-   * // Assuming ariaPressed = false and user performs a mousedown event
-   * this.ariaPressedState(ariaPressed); // Returns true
-   *
-   * @example
-   * // Assuming ariaPressed = true and user performs a mouseup event
-   * this.ariaPressedState(ariaPressed); // Returns false
-   *
-   * @example
-   * // Assuming ariaPressed = false and user performs a keydown event with 'Enter' or 'Space'
-   * this.ariaPressedState(ariaPressed); // Returns true
-   *
-   * @example
-   * // Assuming ariaPressed = true and user performs a keyup event
-   * this.ariaPressedState(ariaPressed); // Returns false
-   *
-   * @private
-   * @param {boolean} ariaPressed - The initial value of the ARIA pressed state.
-   * @returns {boolean} The updated ARIA pressed state.
-   */
-  ariaPressedState(ariaPressed) {
-    const ariaToggle = function (event) {
-      const ariaPressedNode = this.shadowRoot.querySelector("[aria-pressed]");
-      ariaPressedNode.setAttribute("aria-pressed", "false");
-
-      if (event.type === "mousedown") {
-        ariaPressedNode.ariaPressed = true;
-      } else {
-        ariaPressedNode.ariaPressed = false;
-      }
-
-      if (event.type === "keydown") {
-        if (event.code === "Enter") {
-          ariaPressedNode.ariaPressed = true;
-
-          if (
-            this.hyperlinkRef?.value &&
-            this.hyperlinkRef.value.role === "button"
-          ) {
-            this.click();
-          }
-        } else {
-          ariaPressedNode.ariaPressed = false;
-        }
-      }
-    };
-
-    // Add event listeners
-    this.addEventListener("mousedown", ariaToggle);
-    this.addEventListener("mouseup", ariaToggle);
-    this.addEventListener("keydown", ariaToggle);
-    this.addEventListener("keyup", ariaToggle);
-
-    return ariaPressed;
-  }
-
   // function renders HTML and CSS into the scope of the component
   render() {
     return this.getMarkup();

src/styles/style.scss

@@ -39,7 +39,7 @@
 // apply focus outline to inline hyperlinks that aren't CTA, nav, or button
 :host(:not([type='cta']):not([type='nav'])) {
   .hyperlink{
-    display: inline-block;
+    display: flex;
     border-radius: 3px;
     outline-offset: unset;
     outline-style: solid;
@@ -49,6 +49,11 @@
       outline-offset: var(--ds-size-25, vac.$ds-size-25);
     }
   }
+
+  [auro-icon] {
+    position: relative;
+    top: 1px;
+  }
 }
 
 // component shape styles

test/auro-hyperlink.test.js

@@ -15,7 +15,6 @@ describe("auro-hyperlink", () => {
 
     expect(anchor).to.have.attribute("role", "button");
     expect(anchor).to.have.attribute("tabindex", "0");
-    expect(anchor).to.have.attribute("aria-pressed", "false");
     expect(anchor).to.have.class("hyperlink--button");
     expect(anchor).not.to.have.attribute("href");
   });
@@ -26,11 +25,10 @@ describe("auro-hyperlink", () => {
     `);
 
     const anchor = el.shadowRoot.querySelector("a");
+    const regex = /^http:\/\/localhost:\d+\/auro$/;
+    const match = regex.test(anchor.href);
 
-    console.log(anchor.href);
-
-    expect(anchor).to.have.attribute("href", "http://localhost:8000/auro");
-    expect(anchor).not.to.have.attribute("href", "/auro");
+    expect(match).to.be.true;
   });
 
   it("auro-hyperlink href is absolute URL", async () => {