@storybook/addon-a11y 6.5.0-beta.2 → 6.5.0-beta.5

package/dist/cjs/a11yRunner.js

@@ -53,17 +53,11 @@ var channel = _addons.addons.getChannel(); // Holds axe core running state
 var active = false; // Holds latest story we requested a run
 
 var activeStoryId;
-
-var getElement = function getElement() {
-  var storyRoot = document.getElementById('story-root');
-  return storyRoot ? storyRoot.childNodes : document.getElementById('root');
-};
 /**
  * Handle A11yContext events.
  * Because the event are sent without manual check, we split calls
  */
 
-
 var handleRequest = /*#__PURE__*/function () {
   var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(storyId) {
     var _yield$getParams, manual;
@@ -102,7 +96,7 @@ var handleRequest = /*#__PURE__*/function () {
 
 var run = /*#__PURE__*/function () {
   var _ref2 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(storyId) {
-    var input, axe, _input$element, element, config, _input$options, options, result;
+    var input, axe, _input$element, element, config, _input$options, options, htmlElement, result;
 
     return regeneratorRuntime.wrap(function _callee2$(_context2) {
       while (1) {
@@ -117,7 +111,7 @@ var run = /*#__PURE__*/function () {
             input = _context2.sent;
 
             if (active) {
-              _context2.next = 18;
+              _context2.next = 19;
               break;
             }
 
@@ -130,17 +124,18 @@ var run = /*#__PURE__*/function () {
 
           case 10:
             axe = _context2.sent.default;
-            _input$element = input.element, element = _input$element === void 0 ? getElement() : _input$element, config = input.config, _input$options = input.options, options = _input$options === void 0 ? {} : _input$options;
+            _input$element = input.element, element = _input$element === void 0 ? '#root' : _input$element, config = input.config, _input$options = input.options, options = _input$options === void 0 ? {} : _input$options;
+            htmlElement = document.querySelector(element);
             axe.reset();
 
             if (config) {
               axe.configure(config);
             }
 
-            _context2.next = 16;
-            return axe.run(element, options);
+            _context2.next = 17;
+            return axe.run(htmlElement, options);
 
-          case 16:
+          case 17:
             result = _context2.sent;
 
             // It's possible that we requested a new run on a different story.
@@ -154,26 +149,26 @@ var run = /*#__PURE__*/function () {
               run(activeStoryId);
             }
 
-          case 18:
-            _context2.next = 23;
+          case 19:
+            _context2.next = 24;
             break;
 
-          case 20:
-            _context2.prev = 20;
+          case 21:
+            _context2.prev = 21;
             _context2.t0 = _context2["catch"](1);
             channel.emit(_constants.EVENTS.ERROR, _context2.t0);
 
-          case 23:
-            _context2.prev = 23;
+          case 24:
+            _context2.prev = 24;
             active = false;
-            return _context2.finish(23);
+            return _context2.finish(24);
 
-          case 26:
+          case 27:
           case "end":
             return _context2.stop();
         }
       }
-    }, _callee2, null, [[1, 20, 23, 26]]);
+    }, _callee2, null, [[1, 21, 24, 27]]);
   }));
 
   return function run(_x2) {

package/dist/cjs/components/A11yContext.js

@@ -119,20 +119,20 @@ var A11yContextProvider = function A11yContextProvider(_ref) {
   var active = _ref.active,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  var _React$useState = React.useState(defaultResult),
+  var _useAddonState = (0, _api.useAddonState)(_constants.ADDON_ID, defaultResult),
+      _useAddonState2 = _slicedToArray(_useAddonState, 2),
+      results = _useAddonState2[0],
+      setResults = _useAddonState2[1];
+
+  var _React$useState = React.useState(0),
       _React$useState2 = _slicedToArray(_React$useState, 2),
-      results = _React$useState2[0],
-      setResults = _React$useState2[1];
+      tab = _React$useState2[0],
+      setTab = _React$useState2[1];
 
-  var _React$useState3 = React.useState(0),
+  var _React$useState3 = React.useState([]),
       _React$useState4 = _slicedToArray(_React$useState3, 2),
-      tab = _React$useState4[0],
-      setTab = _React$useState4[1];
-
-  var _React$useState5 = React.useState([]),
-      _React$useState6 = _slicedToArray(_React$useState5, 2),
-      highlighted = _React$useState6[0],
-      setHighlighted = _React$useState6[1];
+      highlighted = _React$useState4[0],
+      setHighlighted = _React$useState4[1];
 
   var _useStorybookState = (0, _api.useStorybookState)(),
       storyId = _useStorybookState.storyId;

package/dist/cjs/manager.js

@@ -14,7 +14,7 @@ var _A11yContext = require("./components/A11yContext");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-_addons.addons.register(_constants.ADDON_ID, function () {
+_addons.addons.register(_constants.ADDON_ID, function (api) {
   _addons.addons.add(_constants.PANEL_ID, {
     title: '',
     type: _addons.types.TOOL,
@@ -28,7 +28,15 @@ _addons.addons.register(_constants.ADDON_ID, function () {
   });
 
   _addons.addons.add(_constants.PANEL_ID, {
-    title: 'Accessibility',
+    title: function title() {
+      var _addonState$violation, _addonState$incomplet;
+
+      var addonState = api === null || api === void 0 ? void 0 : api.getAddonState(_constants.ADDON_ID);
+      var violationsNb = (addonState === null || addonState === void 0 ? void 0 : (_addonState$violation = addonState.violations) === null || _addonState$violation === void 0 ? void 0 : _addonState$violation.length) || 0;
+      var incompleteNb = (addonState === null || addonState === void 0 ? void 0 : (_addonState$incomplet = addonState.incomplete) === null || _addonState$incomplet === void 0 ? void 0 : _addonState$incomplet.length) || 0;
+      var totalNb = violationsNb + incompleteNb;
+      return totalNb !== 0 ? "Accessibility (".concat(totalNb, ")") : 'Accessibility';
+    },
     type: _addons.types.PANEL,
     render: function render(_ref2) {
       var _ref2$active = _ref2.active,

package/dist/esm/a11yRunner.js

@@ -21,17 +21,11 @@ var channel = addons.getChannel(); // Holds axe core running state
 var active = false; // Holds latest story we requested a run
 
 var activeStoryId;
-
-var getElement = function getElement() {
-  var storyRoot = document.getElementById('story-root');
-  return storyRoot ? storyRoot.childNodes : document.getElementById('root');
-};
 /**
  * Handle A11yContext events.
  * Because the event are sent without manual check, we split calls
  */
 
-
 var handleRequest = /*#__PURE__*/function () {
   var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(storyId) {
     var _yield$getParams, manual;
@@ -70,7 +64,7 @@ var handleRequest = /*#__PURE__*/function () {
 
 var run = /*#__PURE__*/function () {
   var _ref2 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(storyId) {
-    var input, axe, _input$element, element, config, _input$options, options, result;
+    var input, axe, _input$element, element, config, _input$options, options, htmlElement, result;
 
     return regeneratorRuntime.wrap(function _callee2$(_context2) {
       while (1) {
@@ -85,7 +79,7 @@ var run = /*#__PURE__*/function () {
             input = _context2.sent;
 
             if (active) {
-              _context2.next = 18;
+              _context2.next = 19;
               break;
             }
 
@@ -96,17 +90,18 @@ var run = /*#__PURE__*/function () {
 
           case 10:
             axe = _context2.sent.default;
-            _input$element = input.element, element = _input$element === void 0 ? getElement() : _input$element, config = input.config, _input$options = input.options, options = _input$options === void 0 ? {} : _input$options;
+            _input$element = input.element, element = _input$element === void 0 ? '#root' : _input$element, config = input.config, _input$options = input.options, options = _input$options === void 0 ? {} : _input$options;
+            htmlElement = document.querySelector(element);
             axe.reset();
 
             if (config) {
               axe.configure(config);
             }
 
-            _context2.next = 16;
-            return axe.run(element, options);
+            _context2.next = 17;
+            return axe.run(htmlElement, options);
 
-          case 16:
+          case 17:
             result = _context2.sent;
 
             // It's possible that we requested a new run on a different story.
@@ -120,26 +115,26 @@ var run = /*#__PURE__*/function () {
               run(activeStoryId);
             }
 
-          case 18:
-            _context2.next = 23;
+          case 19:
+            _context2.next = 24;
             break;
 
-          case 20:
-            _context2.prev = 20;
+          case 21:
+            _context2.prev = 21;
             _context2.t0 = _context2["catch"](1);
             channel.emit(EVENTS.ERROR, _context2.t0);
 
-          case 23:
-            _context2.prev = 23;
+          case 24:
+            _context2.prev = 24;
             active = false;
-            return _context2.finish(23);
+            return _context2.finish(24);
 
-          case 26:
+          case 27:
           case "end":
             return _context2.stop();
         }
       }
-    }, _callee2, null, [[1, 20, 23, 26]]);
+    }, _callee2, null, [[1, 21, 24, 27]]);
   }));
 
   return function run(_x2) {

package/dist/esm/components/A11yContext.js

@@ -48,9 +48,9 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 import * as React from 'react';
 import { themes, convert } from '@storybook/theming';
-import { useChannel, useStorybookState } from '@storybook/api';
+import { useChannel, useStorybookState, useAddonState } from '@storybook/api';
 import { STORY_CHANGED, STORY_RENDERED } from '@storybook/core-events';
-import { EVENTS } from '../constants';
+import { ADDON_ID, EVENTS } from '../constants';
 var colorsByType = [convert(themes.normal).color.negative, // VIOLATION,
 convert(themes.normal).color.positive, // PASS,
 convert(themes.normal).color.warning // INCOMPLETION,
@@ -79,20 +79,20 @@ export var A11yContextProvider = function A11yContextProvider(_ref) {
   var active = _ref.active,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  var _React$useState = React.useState(defaultResult),
+  var _useAddonState = useAddonState(ADDON_ID, defaultResult),
+      _useAddonState2 = _slicedToArray(_useAddonState, 2),
+      results = _useAddonState2[0],
+      setResults = _useAddonState2[1];
+
+  var _React$useState = React.useState(0),
       _React$useState2 = _slicedToArray(_React$useState, 2),
-      results = _React$useState2[0],
-      setResults = _React$useState2[1];
+      tab = _React$useState2[0],
+      setTab = _React$useState2[1];
 
-  var _React$useState3 = React.useState(0),
+  var _React$useState3 = React.useState([]),
       _React$useState4 = _slicedToArray(_React$useState3, 2),
-      tab = _React$useState4[0],
-      setTab = _React$useState4[1];
-
-  var _React$useState5 = React.useState([]),
-      _React$useState6 = _slicedToArray(_React$useState5, 2),
-      highlighted = _React$useState6[0],
-      setHighlighted = _React$useState6[1];
+      highlighted = _React$useState4[0],
+      setHighlighted = _React$useState4[1];
 
   var _useStorybookState = useStorybookState(),
       storyId = _useStorybookState.storyId;

package/dist/esm/manager.js

@@ -4,7 +4,7 @@ import { ADDON_ID, PANEL_ID, PARAM_KEY } from './constants';
 import { VisionSimulator } from './components/VisionSimulator';
 import { A11YPanel } from './components/A11YPanel';
 import { A11yContextProvider } from './components/A11yContext';
-addons.register(ADDON_ID, function () {
+addons.register(ADDON_ID, function (api) {
   addons.add(PANEL_ID, {
     title: '',
     type: types.TOOL,
@@ -17,7 +17,15 @@ addons.register(ADDON_ID, function () {
     }
   });
   addons.add(PANEL_ID, {
-    title: 'Accessibility',
+    title: function title() {
+      var _addonState$violation, _addonState$incomplet;
+
+      var addonState = api === null || api === void 0 ? void 0 : api.getAddonState(ADDON_ID);
+      var violationsNb = (addonState === null || addonState === void 0 ? void 0 : (_addonState$violation = addonState.violations) === null || _addonState$violation === void 0 ? void 0 : _addonState$violation.length) || 0;
+      var incompleteNb = (addonState === null || addonState === void 0 ? void 0 : (_addonState$incomplet = addonState.incomplete) === null || _addonState$incomplet === void 0 ? void 0 : _addonState$incomplet.length) || 0;
+      var totalNb = violationsNb + incompleteNb;
+      return totalNb !== 0 ? "Accessibility (".concat(totalNb, ")") : 'Accessibility';
+    },
     type: types.PANEL,
     render: function render(_ref2) {
       var _ref2$active = _ref2.active,

package/dist/modern/a11yRunner.js

@@ -15,17 +15,11 @@ const channel = addons.getChannel(); // Holds axe core running state
 let active = false; // Holds latest story we requested a run
 
 let activeStoryId;
-
-const getElement = () => {
-  const storyRoot = document.getElementById('story-root');
-  return storyRoot ? storyRoot.childNodes : document.getElementById('root');
-};
 /**
  * Handle A11yContext events.
  * Because the event are sent without manual check, we split calls
  */
 
-
 const handleRequest = async storyId => {
   const {
     manual
@@ -47,17 +41,18 @@ const run = async storyId => {
       channel.emit(EVENTS.RUNNING);
       const axe = (await import('axe-core')).default;
       const {
-        element = getElement(),
+        element = '#root',
         config,
         options = {}
       } = input;
+      const htmlElement = document.querySelector(element);
       axe.reset();
 
       if (config) {
         axe.configure(config);
       }
 
-      const result = await axe.run(element, options); // It's possible that we requested a new run on a different story.
+      const result = await axe.run(htmlElement, options); // It's possible that we requested a new run on a different story.
       // Unfortunately, axe doesn't support a cancel method to abort current run.
       // We check if the story we run against is still the current one,
       // if not, trigger a new run using the current story

package/dist/modern/components/A11yContext.js

@@ -6,9 +6,9 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 import * as React from 'react';
 import { themes, convert } from '@storybook/theming';
-import { useChannel, useStorybookState } from '@storybook/api';
+import { useChannel, useStorybookState, useAddonState } from '@storybook/api';
 import { STORY_CHANGED, STORY_RENDERED } from '@storybook/core-events';
-import { EVENTS } from '../constants';
+import { ADDON_ID, EVENTS } from '../constants';
 const colorsByType = [convert(themes.normal).color.negative, // VIOLATION,
 convert(themes.normal).color.positive, // PASS,
 convert(themes.normal).color.warning // INCOMPLETION,
@@ -37,7 +37,7 @@ export const A11yContextProvider = _ref => {
   } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
-  const [results, setResults] = React.useState(defaultResult);
+  const [results, setResults] = useAddonState(ADDON_ID, defaultResult);
   const [tab, setTab] = React.useState(0);
   const [highlighted, setHighlighted] = React.useState([]);
   const {

package/dist/modern/manager.js

@@ -4,7 +4,7 @@ import { ADDON_ID, PANEL_ID, PARAM_KEY } from './constants';
 import { VisionSimulator } from './components/VisionSimulator';
 import { A11YPanel } from './components/A11YPanel';
 import { A11yContextProvider } from './components/A11yContext';
-addons.register(ADDON_ID, () => {
+addons.register(ADDON_ID, api => {
   addons.add(PANEL_ID, {
     title: '',
     type: types.TOOL,
@@ -14,7 +14,16 @@ addons.register(ADDON_ID, () => {
     render: () => /*#__PURE__*/React.createElement(VisionSimulator, null)
   });
   addons.add(PANEL_ID, {
-    title: 'Accessibility',
+    title() {
+      var _addonState$violation, _addonState$incomplet;
+
+      const addonState = api === null || api === void 0 ? void 0 : api.getAddonState(ADDON_ID);
+      const violationsNb = (addonState === null || addonState === void 0 ? void 0 : (_addonState$violation = addonState.violations) === null || _addonState$violation === void 0 ? void 0 : _addonState$violation.length) || 0;
+      const incompleteNb = (addonState === null || addonState === void 0 ? void 0 : (_addonState$incomplet = addonState.incomplete) === null || _addonState$incomplet === void 0 ? void 0 : _addonState$incomplet.length) || 0;
+      const totalNb = violationsNb + incompleteNb;
+      return totalNb !== 0 ? `Accessibility (${totalNb})` : 'Accessibility';
+    },
+
     type: types.PANEL,
     render: ({
       active = true,

package/dist/ts3.4/components/A11yContext.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Result } from 'axe-core';
-interface Results {
+export interface Results {
     passes: Result[];
     violations: Result[];
     incomplete: Result[];

package/dist/ts3.9/components/A11yContext.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Result } from 'axe-core';
-interface Results {
+export interface Results {
     passes: Result[];
     violations: Result[];
     incomplete: Result[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-a11y",
-  "version": "6.5.0-beta.2",
+  "version": "6.5.0-beta.5",
   "description": "Test component compliance with web accessibility standards",
   "keywords": [
     "a11y",
@@ -45,14 +45,14 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.5.0-beta.2",
-    "@storybook/api": "6.5.0-beta.2",
-    "@storybook/channels": "6.5.0-beta.2",
-    "@storybook/client-logger": "6.5.0-beta.2",
-    "@storybook/components": "6.5.0-beta.2",
-    "@storybook/core-events": "6.5.0-beta.2",
+    "@storybook/addons": "6.5.0-beta.5",
+    "@storybook/api": "6.5.0-beta.5",
+    "@storybook/channels": "6.5.0-beta.5",
+    "@storybook/client-logger": "6.5.0-beta.5",
+    "@storybook/components": "6.5.0-beta.5",
+    "@storybook/core-events": "6.5.0-beta.5",
     "@storybook/csf": "0.0.2--canary.4566f4d.1",
-    "@storybook/theming": "6.5.0-beta.2",
+    "@storybook/theming": "6.5.0-beta.5",
     "axe-core": "^4.2.0",
     "core-js": "^3.8.2",
     "global": "^4.4.0",
@@ -81,7 +81,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b42ccab2b3f9d4f1f8f862242a5e4af0d3306061",
+  "gitHead": "77cd38edc2aa4728c360467c5418bb2ef2d8817a",
   "sbmodern": "dist/modern/index.js",
   "storybook": {
     "displayName": "Accessibility",