Premium Analytics: Name each widget chart for screen readers

[adamwoodnz]

Fixes https://linear.app/a8c/issue/STATS-521

Why

On the Premium Analytics dashboard, a screen reader announces every line and bar chart as just "Line chart" or "Bar chart", so a user moving through a dashboard of a dozen widgets cannot tell which chart they are on. After this PR, each chart is announced by its widget's title, such as "Traffic summary chart" or "Sales by device chart".

The word "chart" is part of the name because the chart's role is application, so nothing else tells a screen reader user it is a chart. It also keeps the chart's name from repeating the name of the widget section around it.

Proposed changes

• The toolkit chart wrappers (ComparativeLineChart, ComparativeBarChart, the toolkit BarChart and MetricTabsChart) take an optional chartTitle. The leaf wrappers name the chart through one translatable %s chart string, so each locale can put the word where its grammar needs it. Without a title, the chart keeps its default name. ComparativeLineChart no longer accepts the charts package's ariaLabel, which it took in its type but dropped.
• Each line and bar widget passes its own title from widget.json: Author performance, Email performance, Post views, Store performance, Subscriber summary, Traffic summary, Video performance, Revenue by customer type, Bookings revenue by customer type, Sales by coupon, Sales by coupon usage, Sales by device, Bookings by device and Total returns. Widgets that share one component each get their own title.
• One test per wrapper. The leaf wrappers assert the formatted name; the toolkit BarChart also asserts that no title keeps the default. MetricTabsChart is covered in all three layouts (single metric, tabs and the narrow dropdown) for both chart types. The shared @wordpress/compose test mock can now report a width, which is how the dropdown test is reached.
• The wrapper READMEs list the new prop.
• Changelog entries for the package and for the premium-analytics, jetpack and wpcomsh plugins.

Stacked on #53202, which adds ariaLabel to the charts package's line, area and bar charts; retarget to trunk once it merges. The pie, semi-circle and donut widgets follow in this PR after #53274 (CHARTS-251) merges.

Related product discussion/links

• STATS-521
• Charts: Give Line, Area and Bar charts a valid container role #53202 (CHARTS-233)
• Charts: Give pie and semi-circle charts keyboard access and an accessible name #53274 (CHARTS-251)
• Widget Primitives: Let a host give widgets their translated title WordPress/gutenberg#84204: asks for the translated widget title in @wordpress/widget-primitives, so widgets can stop repeating their title in __().

Does this pull request change what data or activity we track or use?

No.

Testing instructions

1. On a site with Premium Analytics enabled, open the dashboard.
2. In Chrome DevTools, select any line or bar chart's focusable container (role="application") and open the Accessibility pane. Confirm its name is the widget's title followed by "chart", such as "Traffic summary chart", not "Line chart" or "Bar chart".
3. With VoiceOver on, Tab through the dashboard. Confirm each chart is announced as " chart".
4. Resize a metric-tab widget (Traffic summary, Store performance or Subscriber summary) narrow enough to show the metric dropdown, and repeat step 2.

Verified locally: the Premium Analytics test suite and typecheck pass.

🤖 Generated with Claude Code

https://claude.ai/code/session_01EtJ3LkpDhDoFRY6BpADpoU

[github-actions]

Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.

• To test on WoA, go to the Plugins menu on a WoA dev site. Click on the "Upload" button and follow the upgrade flow to be able to upload, install, and activate the Jetpack Beta plugin. Once the plugin is active, go to Jetpack > Jetpack Beta, select your plugin (Jetpack or WordPress.com Site Helper), and enable the stats-521-premium-analytics-name-each-widget-chart-for-screen-readers branch.
• To test on Simple, run the following command on your sandbox:

bin/jetpack-downloader test jetpack stats-521-premium-analytics-name-each-widget-chart-for-screen-readers

Interested in more tips and information?

• In your local development environment, use the jetpack rsync command to sync your changes to a WoA dev blog.
• Read more about our development workflow here: PCYsg-eg0-p2
• Figure out when your changes will be shipped to customers here: PCYsg-eg5-p2

[github-actions]

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

• ✅ Include a description of your PR changes.
  
• ✅ Add a "[Status]" label (In Progress, Needs Review, ...).
  
• ✅ Add testing instructions.
  
• ✅ Specify whether this PR includes any changes to data or privacy.
  
• ✅ Add changelog entries to affected projects
  

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

---

Follow this PR Review Process:

1. Ensure all required checks appearing at the bottom of this PR are passing.
2. Make sure to test your changes on all platforms that it applies to. You're responsible for the quality of the code you ship.
3. You can use GitHub's Reviewers functionality to request a review.
4. When it's reviewed and merged, you will be pinged in Slack to deploy the changes to WordPress.com simple once the build is done.

If you have questions about anything, reach out in #jetpack-developers for guidance!

---

Jetpack plugin:

No scheduled milestone found for this plugin.

If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack.

---

Boost plugin:

No scheduled milestone found for this plugin.

If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack.

---

Social plugin:

No scheduled milestone found for this plugin.

If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack.

---

Videopress plugin:

No scheduled milestone found for this plugin.

If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack.

---

Wpcomsh plugin:

• Next scheduled release: Atomic deploys happen twice daily on weekdays (p9o2xV-2EN-p2)

If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack.

---

Premium Analytics plugin:

No scheduled milestone found for this plugin.

If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack.

---

Stats Data plugin:

No scheduled milestone found for this plugin.

If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack.

[jp-launch-control]

Code Coverage Summary

No summary data is available for parent commit 20ee1c2, so cannot calculate coverage changes. 😴

If that commit is a feature branch rather than a trunk commit, this is expected. Otherwise, this should be updated once coverage for 20ee1c2 is available.

Full summary · PHP report · JS report