new(Tooltip): Add optional accessibilityLabel for perf

[williaster]

to: @milesj @stefhatcher @hayes @alecklandgraf
cc @avand @stopachka

Description

This PR adds an optional accessibilityLabel prop to the Tooltip, mostly to enable an opt-in (non-breaking) perf improvement.

Motivation and Context

Currently the content prop of Tooltip is rendered in an invisible Portal for a11y, to serve as an aria-labeledby element that is rendered whether or not the Tooltip popup is visible. This can lead to performance issues on pages with 100s of Tooltips as content is rendered at all times.

We discussed that one solution to ensure accessibility but allow for optimization is to override this behavior by specifying an aria-label (accessibilityLabel prop) to be used instead.

Note: there was some discussion about whether omission of aria-labelledby/duplication of content should be conditional on whether props.toggleOnClick === false as you could potentially have functionality in content that would not be captured with a simple label. After thinking about this more I think it could be confusing to the developer but am still open to adding it if you want.

Testing

• CI
• functional – aria-label and aria-labelledby work in new story

Screenshots

New example

Checklist

• My code follows the style guide of this project.
• I have updated or added documentation accordingly.
• I have read the CONTRIBUTING document.

[airbnb-bot]

Size Changes

Package	Diff	ESM	Prev ESM	CJS	Prev CJS
core	+0.0%	549.48 KB	549.33 KB	688.99 KB	688.82 KB

Compared to master. File sizes are unminified and ungzipped.

View raw build stats

Previous (master)

{
  "apollo": {
    "esm": 10832,
    "lib": 14147
  },
  "app-shell": {
    "esm": 12906,
    "lib": 19874
  },
  "composer": {
    "esm": 68247,
    "lib": 101805
  },
  "core": {
    "esm": 562515,
    "lib": 705353
  },
  "forms": {
    "esm": 35672,
    "lib": 47577
  },
  "icons": {
    "esm": 156355,
    "lib": 205626
  },
  "layouts": {
    "esm": 15298,
    "lib": 20770
  },
  "metrics": {
    "esm": 5467,
    "lib": 7729
  },
  "test-utils": {
    "esm": 4279,
    "lib": 5937
  }
}

Current

{
  "apollo": {
    "esm": 10832,
    "lib": 14147
  },
  "app-shell": {
    "esm": 12906,
    "lib": 19874
  },
  "composer": {
    "esm": 68247,
    "lib": 101805
  },
  "core": {
    "esm": 562671,
    "lib": 705524
  },
  "forms": {
    "esm": 35672,
    "lib": 47577
  },
  "icons": {
    "esm": 156355,
    "lib": 205626
  },
  "layouts": {
    "esm": 15298,
    "lib": 20770
  },
  "metrics": {
    "esm": 5467,
    "lib": 7729
  },
  "test-utils": {
    "esm": 4279,
    "lib": 5937
  }
}

[milesj]

Slick 👏

[stopachka]

noob q: is this the other way around?

(i.e here because we added accessibelityLabel, this has an aria-label instead of an aria-labelledby)

[williaster]

yes! good catch 😅 I swapped these around a couple times and tho I got the children text right I failed to swap the content 🙏

[stopachka]

🔥

[stefhatcher]

small nit: to change the last part of the sentence to is duplicated, rendered in an off-screen element with a separate layer.