docs(charts): outline a11y limitations (#6457)

This PR also adds a `tsconfig.json` to the `.storybook` folder and fixes
a misconfiguration in the root tsconfig.

Author: Lukas742

.storybook/components/DocsHeader.tsx

@@ -1,7 +1,17 @@
 import { Description, DocsContext, Subtitle, Title } from '@storybook/addon-docs';
-import copyIcon from '@ui5/webcomponents-icons/dist/copy';
 import ButtonDesign from '@ui5/webcomponents/dist/types/ButtonDesign.js';
-import { Button, FlexBox, FlexBoxAlignItems, Label, Link, Text, ThemeProvider } from '@ui5/webcomponents-react';
+import MessageStripDesign from '@ui5/webcomponents/dist/types/MessageStripDesign.js';
+import copyIcon from '@ui5/webcomponents-icons/dist/copy.js';
+import {
+  Button,
+  FlexBox,
+  FlexBoxAlignItems,
+  Label,
+  Link,
+  MessageStrip,
+  Text,
+  ThemeProvider
+} from '@ui5/webcomponents-react';
 import { clsx } from 'clsx';
 import { useContext } from 'react';
 import { useGetSubComponentsOfModule } from '../utils';
@@ -38,6 +48,7 @@ interface InfoTableProps {
   since?: string;
   subComponents?: string[];
   mergeSubComponents?: boolean;
+  isChart?: boolean;
 }
 
 export const InfoTable = ({ since, subComponents, mergeSubComponents }: InfoTableProps) => {
@@ -74,7 +85,7 @@ export const InfoTable = ({ since, subComponents, mergeSubComponents }: InfoTabl
               <Button
                 design={ButtonDesign.Transparent}
                 className={clsx('ui5-content-density-compact', classes.copyBtn)}
-                onClick={handleCopy}
+                onClick={void handleCopy}
                 icon={copyIcon}
                 tooltip="copy"
               />
@@ -102,7 +113,7 @@ export const InfoTable = ({ since, subComponents, mergeSubComponents }: InfoTabl
                 <Button
                   design={ButtonDesign.Transparent}
                   className={clsx('ui5-content-density-compact', classes.copyBtn)}
-                  onClick={handleCopy}
+                  onClick={void handleCopy}
                   icon={copyIcon}
                   tooltip="copy"
                 />
@@ -115,7 +126,7 @@ export const InfoTable = ({ since, subComponents, mergeSubComponents }: InfoTabl
   );
 };
 
-export const DocsHeader = ({ since, subComponents, mergeSubComponents }: InfoTableProps) => {
+export const DocsHeader = ({ since, subComponents, mergeSubComponents, isChart }: InfoTableProps) => {
   return (
     <ThemeProvider>
       <FlexBox alignItems={FlexBoxAlignItems.Center}>
@@ -127,6 +138,16 @@ export const DocsHeader = ({ since, subComponents, mergeSubComponents }: InfoTab
       <InfoTable since={since} subComponents={subComponents} mergeSubComponents={mergeSubComponents} />
       <TableOfContent />
       <Description />
+      {isChart && (
+        <>
+          <MessageStrip hideCloseButton design={MessageStripDesign.Critical}>
+            Charts only offer limited accessibility support with only basic built-in features, so it’s essential to
+            ensure your implementation meets the accessibility standards of your application.
+          </MessageStrip>
+          <br />
+          <br />
+        </>
+      )}
     </ThemeProvider>
   );
 };

.storybook/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "./../tsconfig.base.json",
+  "compilerOptions": {
+    "allowJs": true
+  },
+  "include": ["./**/*.js", "./**/*.tsx"]
+}

packages/charts/src/components/BarChart/BarChart.mdx

@@ -5,7 +5,7 @@ import * as ComponentStories from './BarChart.stories';
 
 <Meta of={ComponentStories} />
 
-<DocsHeader />
+<DocsHeader isChart />
 
 ## Example
 

packages/charts/src/components/BulletChart/BulletChart.mdx

@@ -5,7 +5,7 @@ import * as ComponentStories from './BulletChart.stories';
 
 <Meta of={ComponentStories} />
 
-<DocsHeader />
+<DocsHeader isChart />
 
 ## Example
 

packages/charts/src/components/ColumnChart/ColumnChart.mdx

@@ -5,7 +5,7 @@ import * as ComponentStories from './ColumnChart.stories';
 
 <Meta of={ComponentStories} />
 
-<DocsHeader />
+<DocsHeader isChart />
 
 ## Example
 

packages/charts/src/components/ColumnChartWithTrend/ColumnChartWithTrend.mdx

@@ -4,7 +4,7 @@ import * as ComponentStories from './ColumnChartWithTrend.stories';
 
 <Meta of={ComponentStories} />
 
-<DocsHeader />
+<DocsHeader isChart />
 
 ## Example
 

packages/charts/src/components/ComposedChart/ComposedChart.mdx

@@ -5,7 +5,7 @@ import * as ComponentStories from './ComposedChart.stories';
 
 <Meta of={ComponentStories} />
 
-<DocsHeader />
+<DocsHeader isChart />
 
 ## Example
 

packages/charts/src/components/DonutChart/DonutChart.mdx

@@ -5,7 +5,7 @@ import * as ComponentStories from './DonutChart.stories';
 
 <Meta of={ComponentStories} />
 
-<DocsHeader />
+<DocsHeader isChart />
 
 ## Example
 

packages/charts/src/components/LineChart/LineChart.mdx

@@ -5,7 +5,7 @@ import * as ComponentStories from './LineChart.stories';
 
 <Meta of={ComponentStories} />
 
-<DocsHeader />
+<DocsHeader isChart />
 
 ## Example
 

packages/charts/src/components/PieChart/PieChart.mdx

@@ -5,7 +5,7 @@ import * as ComponentStories from './PieChart.stories';
 
 <Meta of={ComponentStories} />
 
-<DocsHeader />
+<DocsHeader isChart />
 
 ## Example
 

packages/charts/src/components/RadarChart/RadarChart.mdx

@@ -5,7 +5,7 @@ import * as ComponentStories from './RadarChart.stories';
 
 <Meta of={ComponentStories} />
 
-<DocsHeader />
+<DocsHeader isChart />
 
 ## Example
 

packages/charts/src/components/RadialChart/RadialChart.mdx

@@ -4,7 +4,7 @@ import * as ComponentStories from './RadialChart.stories';
 
 <Meta of={ComponentStories} />
 
-<DocsHeader />
+<DocsHeader isChart />
 
 ## Example
 

packages/charts/src/components/ScatterChart/ScatterChart.mdx

@@ -5,7 +5,7 @@ import * as ComponentStories from './ScatterChart.stories';
 
 <Meta of={ComponentStories} />
 
-<DocsHeader />
+<DocsHeader isChart />
 
 ## Example
 

packages/charts/src/components/TimelineChart/TimeLineChart.mdx

@@ -6,7 +6,7 @@ import { TimelineChartAnnotation } from './TimelineChartAnnotation';
 
 <Meta of={ComponentStories} />
 
-<DocsHeader since="1.10.0" />
+<DocsHeader isChart since="1.10.0" />
 
 <Canvas of={ComponentStories.Default} />
 

tsconfig.json

@@ -21,7 +21,11 @@
     },
     {
       "path": "./tsconfig.spec.json"
+    },
+    {
+      "path": "./.storybook/tsconfig.json"
     }
   ],
-  "files": ["vite.config.ts", ".storybook", "docs", "types.d.ts"]
+  "files": ["vite.config.ts", "types.d.ts"],
+  "include": [".storybook", "docs"]
 }