docs(data-a11y): a11y fixes

Author: krisantrobus

packages/paste-libraries/data-visualization/src/transformers/baseFormatter.ts

@@ -25,7 +25,10 @@ export const handleBaseChartOptionsFormatting = ({
   const context = React.useContext(ThemeContext) as ThemeShape;
 
   return {
-    accessibility,
+    accessibility: {
+      enabled: true,
+      ...accessibility,
+    },
     chart: {
       resetZoomButton: {
         theme: {

packages/paste-website/src/component-examples/data-visualization/ChartExamples.ts

@@ -390,3 +390,37 @@ const SimpleChartAccessibilityExample = () => {
 
 render(<SimpleChartAccessibilityExample />);
 `.trim();
+
+export const SimpleChartAccessibilityDefaultExample = `
+const SimpleChartAccessibilityDefaultExample = () => {
+    const lineSeriesData = [
+        {
+            name: "Installation",
+            data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
+        },
+        {
+            name: "Manufacturing",
+            data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434],
+        },
+    ]
+
+    return (
+        <ChartProvider options={{
+                type: "line",
+                series: lineSeriesData,
+                title: {
+                    text: "Solar Employment Growth by Sector, 2010-2016",
+                    hide: true,
+                },
+                subtitle: {
+                    text: "Source: thesolarfoundation.com",
+                    hide: true,
+                }
+            }}>
+            <BaseChart />
+        </ChartProvider>
+    );
+};
+
+render(<SimpleChartAccessibilityDefaultExample />);
+`.trim();

packages/paste-website/src/pages/foundations/data-visualization/for-engineers/accessibility.mdx

@@ -24,7 +24,7 @@ import { SidebarCategoryRoutes } from "../../../../constants";
 import DefaultLayout from "../../../../layouts/DefaultLayout";
 import { getNavigationData } from "../../../../utils/api";
 import { ExamplesDataVizBaseChart as BaseChart } from "../../../../component-examples/data-visualization/BaseChart";
-import { SimpleChartAccessibilityExample } from "../../../../component-examples/data-visualization/ChartExamples";
+import { SimpleChartAccessibilityExample, SimpleChartAccessibilityDefaultExample } from "../../../../component-examples/data-visualization/ChartExamples";
 
 export default DefaultLayout;
 
@@ -58,7 +58,7 @@ export const getStaticProps = async () => {
   </Callout>
 </Box>
 
-Highcharts offers an accessibility module which we recommend always enabling. If using our [BaseChart](foundations/data-visualization/for-engineers#basechart) implementation, this is taken care of. It provides many useful features that help visually impaired users interact and understand charts. More information on this module can be found on [Highcharts docs](https://www.highcharts.com/docs/accessibility/accessibility-module). Features that are offered are:
+Highcharts offers an accessibility module which we recommend always enabling. If using our [BaseChart](/foundations/data-visualization/for-engineers#basechart) implementation, this is taken care of. It provides many useful features that help visually impaired users interact and understand charts. More information on this module can be found on [Highcharts docs](https://www.highcharts.com/docs/accessibility/accessibility-module). Features that are offered are:
 - Announces chart metadata such as title, subtitle, and description.
 - Allows keyboard navigation of series, points, and legend items.
 - Describes series when focused.
@@ -76,10 +76,21 @@ The accessibility module provides announcements by default for the series and po
 
 ### Customizing announcements
 
-To override the default announcements you can set the `accessibility` attribute in the support options of the [Chart Provider](components/chart-provider/api#charttypeoptions)
+To override the default announcements you can set the `accessibility` attribute in the support options of the [Chart Provider](/components/chart-provider/api#charttypeoptions)
 
 The point and series will be passed to the `descriptionFormatter` to retrieve the correct values, such as axis values and series names.
 
+Below is an example where we have not overriden the default announcements to understand the base features.
+
+<LivePreview
+  scope={{ChartProvider, BaseChart}}
+  language="jsx"
+  noInline
+>
+  {SimpleChartAccessibilityDefaultExample}
+</LivePreview>
+
+
 ## Custom example
 
 Below is an example of a chart with custom `descriptionFormatter` for the series and point. The title and sub title are both specified but hidden. They will still be included in the screen reader announcements to give context to visually impaired users but not be visible on the chart.