',
+ target: ['.css-12jpz5t'],
+ failureSummary:
+ 'Fix any of the following:\n Element does not have text that is visible to screen readers\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute',
+ },
+ ],
+ },
+];
+
+const Template = (args: Pick
) => (
);
},
@@ -61,6 +129,20 @@ export const Manual: Story = {
results={{ passes: [], incomplete: [], violations: [] }}
status="manual"
error={null}
+ discrepancy={null}
+ />
+ );
+ },
+};
+
+export const ManualWithDiscrepancy: Story = {
+ render: () => {
+ return (
+
);
},
@@ -73,6 +155,7 @@ export const Running: Story = {
results={{ passes: [], incomplete: [], violations: [] }}
status="running"
error={null}
+ discrepancy={null}
/>
);
},
@@ -85,73 +168,28 @@ export const ReadyWithResults: Story = {
results={{
passes: [],
incomplete: [],
- violations: [
- {
- id: 'aria-command-name',
- impact: 'serious',
- tags: [
- 'cat.aria',
- 'wcag2a',
- 'wcag412',
- 'TTv5',
- 'TT6.a',
- 'EN-301-549',
- 'EN-9.4.1.2',
- 'ACT',
- ],
- description: 'Ensures every ARIA button, link and menuitem has an accessible name',
- help: 'ARIA commands must have an accessible name',
- helpUrl:
- 'https://dequeuniversity.com/rules/axe/4.8/aria-command-name?application=axeAPI',
- nodes: [
- {
- any: [
- {
- id: 'has-visible-text',
- data: null,
- relatedNodes: [],
- impact: 'serious',
- message: 'Element does not have text that is visible to screen readers',
- },
- {
- id: 'aria-label',
- data: null,
- relatedNodes: [],
- impact: 'serious',
- message: 'aria-label attribute does not exist or is empty',
- },
- {
- id: 'aria-labelledby',
- data: null,
- relatedNodes: [],
- impact: 'serious',
- message:
- 'aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty',
- },
- {
- id: 'non-empty-title',
- data: {
- messageKey: 'noAttr',
- },
- relatedNodes: [],
- impact: 'serious',
- message: 'Element has no title attribute',
- },
- ],
- all: [],
- none: [],
- impact: 'serious',
- html: '',
- target: ['.css-12jpz5t'],
- failureSummary:
- 'Fix any of the following:\n Element does not have text that is visible to screen readers\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute',
- },
- ],
- },
- ],
+ violations,
+ }}
+ status="ready"
+ error={null}
+ discrepancy={null}
+ />
+ );
+ },
+};
+
+export const ReadyWithResultsDiscrepancyCLIPassedBrowserFailed: Story = {
+ render: () => {
+ return (
+
);
},
@@ -164,6 +202,7 @@ export const Error: Story = {
results={{ passes: [], incomplete: [], violations: [] }}
status="error"
error="Test error message"
+ discrepancy={null}
/>
);
},
@@ -176,6 +215,7 @@ export const ErrorStateWithObject: Story = {
results={{ passes: [], incomplete: [], violations: [] }}
status="error"
error={{ message: 'Test error object message' }}
+ discrepancy={null}
/>
);
},
diff --git a/code/addons/a11y/template/stories/TestDiscrepancyMessage.stories.tsx b/code/addons/a11y/template/stories/TestDiscrepancyMessage.stories.tsx
new file mode 100644
index 000000000000..6f4d07d9fa3d
--- /dev/null
+++ b/code/addons/a11y/template/stories/TestDiscrepancyMessage.stories.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+
+import { ManagerContext } from 'storybook/internal/manager-api';
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+
+import { TestDiscrepancyMessage } from '../../src/components/TestDiscrepancyMessage';
+
+type Story = StoryObj;
+
+const managerContext: any = {
+ state: {},
+ api: {
+ getDocsUrl: fn().mockName('api::getDocsUrl'),
+ },
+};
+
+export default {
+ title: 'TestDiscrepancyMessage',
+ component: TestDiscrepancyMessage,
+ parameters: {
+ layout: 'fullscreen',
+ },
+ args: {
+ storyId: 'story-id',
+ },
+ decorators: [
+ (storyFn) => (
+ {storyFn()}
+ ),
+ ],
+} as Meta;
+
+export const BrowserPassedCliFailed: Story = {
+ args: {
+ discrepancy: 'browserPassedCliFailed',
+ },
+};
+
+export const CliPassedBrowserFailed: Story = {
+ args: {
+ discrepancy: 'cliPassedBrowserFailed',
+ },
+};
+
+export const CliFailedButModeManual: Story = {
+ args: {
+ discrepancy: 'cliFailedButModeManual',
+ },
+};
diff --git a/code/core/src/manager-api/modules/stories.ts b/code/core/src/manager-api/modules/stories.ts
index e92e7a90ce55..3c5aac769c6a 100644
--- a/code/core/src/manager-api/modules/stories.ts
+++ b/code/core/src/manager-api/modules/stories.ts
@@ -7,6 +7,7 @@ import type {
API_LeafEntry,
API_LoadedRefData,
API_PreparedStoryIndex,
+ API_StatusObject,
API_StatusState,
API_StatusUpdate,
API_StoryEntry,
@@ -268,6 +269,12 @@ export interface SubAPI {
* @returns {Promise} A promise that resolves when the preview has been set as initialized.
*/
setPreviewInitialized: (ref?: ComposedRef) => Promise;
+ /**
+ * Returns the current status of the stories.
+ *
+ * @returns {API_StatusState} The current status of the stories.
+ */
+ getCurrentStoryStatus: () => Record;
/**
* Updates the status of a collection of stories.
*
@@ -630,6 +637,11 @@ export const init: ModuleFn = ({
}
},
+ getCurrentStoryStatus: () => {
+ const { status, storyId } = store.getState();
+ return status[storyId as StoryId];
+ },
+
/* EXPERIMENTAL APIs */
experimental_updateStatus: async (id, input) => {
const { status, internal_index: index } = store.getState();