feat: support custom data- attributes in HandleLinkPressFeature

Author: Bastiaan Snelder

apps/website/typedoc-sidebars.js

@@ -18,6 +18,7 @@ module.exports = [
       "api/interfaces/domrect",
       "api/interfaces/domrectsize",
       "api/interfaces/domutils",
+      "api/interfaces/dataattributes",
       "api/interfaces/elementcssboxdimensions",
       "api/interfaces/featurebuilderconfig",
       "api/interfaces/featureclass",

packages/webshell/etc/webshell.api.md

@@ -59,6 +59,12 @@ export interface CSSBoxDimensionsComputedStyle {
     paddingTop: number;
 }
 
+// @public
+export interface DataAttributes {
+    // (undocumented)
+    [key: string]: string;
+}
+
 // @public
 export type DOMCollectionRequest = DOMElementQueryRequest | DOMElementClassNameRequest | DOMElementTagNameRequest | string;
 
@@ -293,6 +299,7 @@ export interface LinkPressOptions {
 export interface LinkPressTarget {
     classAttribute: string | null;
     clickedAnchorBoundingRect: DOMRect;
+    dataAttributes: DataAttributes;
     downloadAttribute: string | null;
     hrefAttribute: string;
     hreflangAttribute: string | null;

packages/webshell/src/features/HandleLinkPressFeature.ts

@@ -25,6 +25,15 @@ export interface LinkPressOptions {
   ignoreHashChange?: boolean;
 }
 
+/**
+ * An object containing the custom data attributes of the anchor which has been clicked.
+ *
+ * @public
+ */
+export interface DataAttributes {
+  [key: string]: string;
+}
+
 /**
  * The target of a link press event.
  *
@@ -79,6 +88,13 @@ export interface LinkPressTarget {
    * The `name` attribute, if present.
    */
   nameAttribute: string | null;
+  /**
+   * The `data-` attributes, if present.
+   *
+   * @remarks
+   * Dashes are converted to camelCase. See {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset  | HTMLElement.dataset}.
+   */
+  dataAttributes: DataAttributes;
   /**
    * The bounding rectangle of the anchor which has been clicked.
    * See {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect | Element.getBoundingClientRect()}

packages/webshell/src/features/HandleLinkPressFeature.webjs

@@ -56,6 +56,7 @@ function HandleLinkPressFeature(context) {
         idAttribute: anchor.getAttribute('id'),
         classAttribute: anchor.getAttribute('class'),
         nameAttribute: anchor.getAttribute('name'),
+        dataAttributes: anchor.dataset,
         clickedAnchorBoundingRect: clickedAnchorBoundingRect,
         page: {
           href: window.location.href,

packages/webshell/src/features/__tests__/HandleLinkPressFeature.test.tsx

@@ -18,7 +18,7 @@ describe('Webshell with HandleLinkPressFeature', () => {
           onDOMLinkPress={onDOMLinkPress}
           source={{
             html:
-              '<a id="anchor0" class="link" type="text/html" rel="alternate" download="" target="_blank" hreflang="en" referrerpolicy="no-referrer" href="https://foo.org">bar</a>'
+              '<a id="anchor0" class="link" type="text/html" rel="alternate" download="" target="_blank" hreflang="en" referrerpolicy="no-referrer" href="https://foo.org" data-webshell="custom">bar</a>'
           }}
         />
       )
@@ -37,6 +37,9 @@ describe('Webshell with HandleLinkPressFeature', () => {
       idAttribute: 'anchor0',
       classAttribute: 'link',
       nameAttribute: null,
+      dataAttributes: {
+        webshell: 'custom'
+      },
       clickedAnchorBoundingRect: {
         top: expect.any(Number),
         left: expect.any(Number),