Docs: copy button in Layer ARN not working

[dreamorosi]

What were you searching in the docs?

As per title, the button to copy the Lambda layer ARN doesn't work in some browsers (i.e. Safari & Firefox).

Is this related to an existing documentation section?

No response

How can we improve?

We should investigate and possibly fix it.

Got a suggestion in mind?

No response

Acknowledgment

• I understand the final update might be different from my proposed suggestion, or refused.

[ConnorKirk]

I had a quick look at this using Firefox.
I could copy the item by clicking on it directly. Clicking on the clipboard icon did not copy the item.

This seems to be because the event handler is added to the copyMe class. The clipboard icon is a sibling to this class, rather than a child of the class.

<!-- This has the event handler -->
<a
  class="copyMe"
  href="https://docs.powertools.aws.dev/lambda/typescript/latest/#"
  >arn:aws:lambda:us-east-1:094274105915:layer:AWSLambdaPowertoolsTypeScriptV2:24</a
>
<!-- This does not have an event handler -->
<img
  alt="📋"
  class="twemoji"
  src="https://docs.powertools.aws.dev/lambda/typescript/latest/assets/external/cdn.jsdelivr.net/gh/jdecked/twemoji@15.0.3/assets/svg/1f4cb.svg"
  title=":clipboard:"
/>

[ConnorKirk]

Assuming this is the cause of the issue, one way to address it might be to move the addition of the clipboard to CSS. Clicking on the clipboard would then activate the handler

Something like:

.copyMe::after {
    content: '📋';
}

[dreamorosi]

Thank you @ConnorKirk - this is very useful.

I don't know how to modify the icon rendering without messing with the theme, but I made a quick PoC and this works:

function enableClipboardElements() {
  const copyElements = document.querySelectorAll('.copyMe');
  for (const element of copyElements) {
    const parent = element.parentElement;
    const textContent = element.textContent;
    const icon = parent.querySelector('[title=":clipboard:"]');
    if (icon) {
      icon.setAttribute('aria-label', 'Copy to clipboard');
      icon.setAttribute('role', 'button');
    }
    icon.dataset.clipboardText = textContent;
    icon.addEventListener('click', (e) => {
      e.preventDefault();
      navigator.clipboard.writeText(textContent);
      alert$.next('Copied to clipboard');
    });
    element.addEventListener('click', (e) => {
      e.preventDefault();
      navigator.clipboard.writeText(textContent);
      alert$.next('Copied to clipboard');
    });
  }
}

This solution:

• keeps the current docs structure and is additive
• sets sets the text on the icon as attribute and makes it clickable

This way, even if not super elegant, it won't matter where we click - both of them will copy the same text.

[dreamorosi]

Your solution is better though, apparently we just need to add a line in the docs/stylesheet/extra.css file - let's go with that so we can avoid some event listeners.