fix: add default aria-label to popover button and fix double-hyphen bug

[tom-ridsdale]

Description

This PR addresses two accessibility issues reported in KI-419 and TU-48845 for the classic web embed popover.

1. Default aria-label: The popover button now includes a default aria-label="Open form" for better accessibility. Customers can still override it if needed. Note that it is a hard-coded English string because translation keys don't fit this package. The embed SDK has no i18n layer at all: no locale option, no translation files, no dependency. Other hardcoded English strings do already exist, e.g.

• create-popup.ts, create-slider.ts, create-widget.ts: closeButton.ariaLabel = 'Close'`
• create-popover.ts and create-sidetab.ts: img alt='popover trigger icon button'

2. Double-hyphen bug fix: Fixed a bug in the camelCaseToKebabCase utility function where non-alphabetic characters (like hyphens, numbers) were incorrectly treated as uppercase letters.

Also took the chance to update addAttributesToElement which now skips props whose value is null or undefined, so { ariaLabel: undefined } no longer sets aria-label="undefined". The helper is shared, so this also applies to iframe and the sidetab.

Related

• Slack thread: https://typeform.slack.com/archives/C07RQK4B0JK/p1791382335700809
• Jira: KI-419, TU-48845

Testing

Using the hash from this PR

// Embedded a form
<!doctype html>
<html>
  <body>
    <div data-tf-popover="brJoErE7"></div>
    <script src="https://embed.typeform.com/1bd1e019e3f05981143e864e94be4e6067f23584/embed.js"></script>
  </body>
</html>

• aria-label set to default value "Open Form" and aria-expanded="false" ✅

• aria-expanded="true" after opening the form ✅

-aria-expanded="false" after closing again ✅

---

// Embedded a form w/ override set
<!doctype html>
<html>
  <body>
    <div data-tf-popover="brJoErE7" data-tf-button-props="ariaLabel=Overriden Label"></div>
    <script src="https://embed.typeform.com/1bd1e019e3f05981143e864e94be4e6067f23584/embed.js"></script>
  </body>
</html>

• aria-label set to configured value and aria-expanded="false" ✅

[jenkins-tf]

[BOT] Preview available with hash 1bd1e019e3f05981143e864e94be4e6067f23584 here.

[pr-auditor]

✅ Security Analysis Results

No security issues found. 8 files reviewed.

---

@pr-auditor rescan to re-run · Powered by Claude Sonnet 5.5 · Docs · #security-engineering-team