diff --git a/code/addons/a11y/src/manager.tsx b/code/addons/a11y/src/manager.tsx
index ae83c35871e1..096969c7f57c 100644
--- a/code/addons/a11y/src/manager.tsx
+++ b/code/addons/a11y/src/manager.tsx
@@ -1,5 +1,5 @@
import React from 'react';
-import { addons, types } from '@storybook/manager-api';
+import { addons, types, useStorybookApi } from '@storybook/manager-api';
import { Badge, Spaced } from '@storybook/components';
import { ADDON_ID, PANEL_ID, PARAM_KEY } from './constants';
import { VisionSimulator } from './components/VisionSimulator';
@@ -7,6 +7,25 @@ import { A11YPanel } from './components/A11YPanel';
import type { Results } from './components/A11yContext';
import { A11yContextProvider } from './components/A11yContext';
+const Title = () => {
+ const api = useStorybookApi();
+ const addonState: Results = api?.getAddonState(ADDON_ID);
+ const violationsNb = addonState?.violations?.length || 0;
+ const incompleteNb = addonState?.incomplete?.length || 0;
+ const count = violationsNb + incompleteNb;
+
+ const suffix = count === 0 ? '' : {count};
+
+ return (
+
+
+ Accessibility
+ {suffix}
+
+
+ );
+};
+
addons.register(ADDON_ID, (api) => {
addons.add(PANEL_ID, {
title: '',
@@ -16,23 +35,7 @@ addons.register(ADDON_ID, (api) => {
});
addons.add(PANEL_ID, {
- title() {
- const addonState: Results = api?.getAddonState(ADDON_ID);
- const violationsNb = addonState?.violations?.length || 0;
- const incompleteNb = addonState?.incomplete?.length || 0;
- const count = violationsNb + incompleteNb;
-
- const suffix = count === 0 ? '' : {count};
-
- return (
-
-
- Accessibility
- {suffix}
-
-
- );
- },
+ title: Title,
type: types.PANEL,
render: ({ active = true, key }) => (
diff --git a/code/addons/controls/src/manager.tsx b/code/addons/controls/src/manager.tsx
index 28932be6fd02..de00635f7196 100644
--- a/code/addons/controls/src/manager.tsx
+++ b/code/addons/controls/src/manager.tsx
@@ -23,7 +23,7 @@ function Title() {
addons.register(ADDON_ID, (api) => {
addons.add(ADDON_ID, {
- title: ,
+ title: Title,
type: types.PANEL,
paramKey: PARAM_KEY,
render: ({ key, active }) => {
diff --git a/code/addons/links/src/manager.ts b/code/addons/links/src/manager.ts
index 9107c8c61904..e0c7487f2be9 100644
--- a/code/addons/links/src/manager.ts
+++ b/code/addons/links/src/manager.ts
@@ -3,9 +3,7 @@ import { addons } from '@storybook/manager-api';
import EVENTS, { ADDON_ID } from './constants';
addons.register(ADDON_ID, (api) => {
- const channel = addons.getChannel();
-
- channel.on(EVENTS.REQUEST, ({ kind, name }) => {
+ api.on(EVENTS.REQUEST, ({ kind, name }) => {
const id = api.storyId(kind, name);
api.emit(EVENTS.RECEIVE, id);
});