Chart accessibility mode toggle

src/core/conversion/translations/defaultTranslations.ts

@@ -320,6 +320,16 @@ export const DefaultTranslations: TTranslations = {
         'fi': 'Tieto puuttuu',
         'sv': 'Data saknas',
         'en': 'Missing data'
+    },
+    toggleAccessibilityModeOn: {
+        'fi': 'Näytä kuviossa symbolit',
+        'sv': 'Visa symboler i diagrammet',
+        'en': 'Show symbols in the figure'
+    },
+    toggleAccessibilityModeOff: {
+        'fi': 'Poista kuviosta symbolit',
+        'sv': 'Ta bort symbolerna från diagrammet',
+        'en': 'Remove symbols from the figure'
     }
 }
 

src/core/conversion/translations/translationManager.test.ts

@@ -193,6 +193,12 @@ const mockTranslationPackage: TTranslationPackage = {
         },
         dataMissing: {
             'foo': 'Tieto puuttuu',
+        },
+        toggleAccessibilityModeOn: {
+            'foo': 'Näytä kuviossa symbolit',
+        },
+        toggleAccessibilityModeOff: {
+            'foo': 'Piilota kuviosta symbolit',
         }
     },
     ArrayTranslations: {

src/core/conversion/translations/translationTypes.ts

@@ -65,6 +65,8 @@ export type TTranslations = {
     externalLink: TMultiLanguageString;
     quarter: TMultiLanguageString;
     dataMissing: TMultiLanguageString;
+    toggleAccessibilityModeOn: TMultiLanguageString;
+    toggleAccessibilityModeOff: TMultiLanguageString;
 }
 
 export type TArrayTranslations = {

src/react/components/burgerMenu/burgerMenu.test.tsx

@@ -23,28 +23,35 @@ beforeEach(() => {
     mockExportChartLocal.mockClear();
 });
 
+const mockTableToggle = {
+    toggleHandler: jest.fn(),
+    tableMode: false
+}
+
 describe('burgerMenu, functional tests', () => {
     it('Should open the menu with correct menu elements', async () => {
         const view = convertPxGrafResponseToView(HORIZONTAL_BAR_CHART_ASCENDING, {});
-        render(<BurgerMenu locale="fi" viewData={view} />);
+        render(<BurgerMenu locale="fi" viewData={view} tableToggle={mockTableToggle} accessibilityMode={false} toggleAccessibilityMode={jest.fn()} />);
         act(() => {
             screen.getByRole('button').click();
         });
         await waitFor(() => {
-            expect(screen.getAllByRole('button').length).toEqual(3);
+            expect(screen.getAllByRole('button').length).toEqual(5);
             expect(screen.getByText('Lataa taulukko (csv)')).toBeTruthy();
             expect(screen.getByText('Lataa taulukko (xlsx)')).toBeTruthy();
+            expect(screen.getByText("N\u00E4yt\u00E4 taulukko")).toBeTruthy();
+            expect(screen.getByText("N\u00E4yt\u00E4 kuviossa symbolit")).toBeTruthy();
         });
     });
 
     it('Should open the menu with correct custom elements', async () => {
         const view = convertPxGrafResponseToView(HORIZONTAL_BAR_CHART_ASCENDING, {});
-        render(<BurgerMenu locale="fi" viewData={view} menuItemDefinitions={[{ text: 'Foo', onClick: jest.fn() }, { text: 'Bar', onClick: jest.fn() }, { text: 'Baz', url: 'foobar.com', isExternal: true }, { text: 'Baz2', url: 'foobar2.com', isExternal: false }]} />);
+        render(<BurgerMenu locale="fi" viewData={view} menuItemDefinitions={[{ text: 'Foo', onClick: jest.fn() }, { text: 'Bar', onClick: jest.fn() }, { text: 'Baz', url: 'foobar.com', isExternal: true }, { text: 'Baz2', url: 'foobar2.com', isExternal: false }]} accessibilityMode={false} toggleAccessibilityMode={jest.fn()} tableToggle={mockTableToggle} />);
         act(() => {
             screen.getByRole('button').click();
         });
         await waitFor(() => {
-            expect(screen.getAllByRole('button').length).toEqual(5);
+            expect(screen.getAllByRole('button').length).toEqual(7);
             expect(screen.getAllByRole('link').length).toEqual(2);
             expect(screen.getByText('Lataa taulukko (csv)')).toBeTruthy();
             expect(screen.getByText('Lataa taulukko (xlsx)')).toBeTruthy();
@@ -54,6 +61,34 @@ describe('burgerMenu, functional tests', () => {
             expect(screen.getByText('Ulkoinen linkki')).toBeTruthy();
             expect(screen.getByText('Baz2')).toBeTruthy();
             expect(screen.getAllByRole('link').length).toBe(2);
+            expect(screen.getByText("N\u00E4yt\u00E4 taulukko")).toBeTruthy();
+            expect(screen.getByText("N\u00E4yt\u00E4 kuviossa symbolit")).toBeTruthy();
+        });
+    });
+
+    it('Should trigger the accessibilityMode function when the menu item is clicked', async () => {
+        const view = convertPxGrafResponseToView(HORIZONTAL_BAR_CHART_ASCENDING, {});
+        const mockToggleAccessibilityModeFunction = jest.fn();
+        const mockTableToggle = {
+            toggleHandler: jest.fn(),
+            tableMode: false
+        };
+        render(
+            <BurgerMenu
+                locale="fi"
+                viewData={view}
+                tableToggle={mockTableToggle}
+                accessibilityMode={false}
+                toggleAccessibilityMode={mockToggleAccessibilityModeFunction}
+            />
+        );
+        act(() => {
+            screen.getByRole('button').click();
+        });
+        await waitFor(() => {
+            const menuItem = screen.getByText(Translations.toggleAccessibilityModeOn["fi"]);
+            fireEvent.click(menuItem);
+            expect(mockToggleAccessibilityModeFunction).toHaveBeenCalledTimes(1);
         });
     });
 

src/react/components/burgerMenu/burgerMenu.tsx

@@ -9,6 +9,7 @@ import { viewToDownloadCSVOption } from "../../../core/tables/csvTable";
 import { generateFilename } from "../../../core/tables/exportingUtils";
 import { TIcon } from "../../../core/types/icon";
 import { viewToDownloadXLSOption } from "../../../core/tables/xlsx/xlsxBuilder";
+import { EVisualizationType } from "../../../core";
 
 const BurgerWrapper = styled.div`
     width: 2.5rem;
@@ -59,6 +60,8 @@ export interface IBurgerMenuProps {
     };
     menuItemDefinitions?: (IFunctionalMenuItem | ILinkMenuItem)[];
     menuIconInheritColor?: boolean;
+    toggleAccessibilityMode?: () => void;
+    accessibilityMode?: boolean;
 }
 
 interface IBaseMenuItem {
@@ -118,7 +121,8 @@ export function calculateExportDimensions(chartRef: HighchartsReactRefObject): {
     return { finalWidth, finalHeight };
 }
 
-export const BurgerMenu: React.FC<IBurgerMenuProps> = ({viewData, currentChartRef, tableToggle, menuItemDefinitions, locale, menuIconInheritColor = false}) => {
+
+export const BurgerMenu: React.FC<IBurgerMenuProps> = ({ viewData, currentChartRef, tableToggle, menuItemDefinitions, locale, menuIconInheritColor = false, toggleAccessibilityMode, accessibilityMode }) => {
     const [isOpen, setIsOpen] = React.useState(false);
 
     const menuRef = React.useRef<any>(null);
@@ -165,6 +169,11 @@ export const BurgerMenu: React.FC<IBurgerMenuProps> = ({viewData, currentChartRe
         if (onClick) onClick();
     }
 
+    const showAccessibilityModeToggle: boolean =
+        !!tableToggle &&
+        !tableToggle.tableMode &&
+        viewData.visualizationSettings.visualizationType != EVisualizationType.ScatterPlot;
+
     return (
         <BurgerWrapper ref={menuRef}>
             <Hamburger ref={buttonRef} aria-label={`${Translations.chartMenuLabel[locale]}`} aria-expanded={isOpen} onClick={() => {setIsOpen(!isOpen)}}>
@@ -210,6 +219,10 @@ export const BurgerMenu: React.FC<IBurgerMenuProps> = ({viewData, currentChartRe
                                             } />
                                     </>
                                 }
+                                {
+                                    showAccessibilityModeToggle &&
+                                    <MenuItem isFirst={false} locale={locale} text={accessibilityMode ? Translations.toggleAccessibilityModeOff[locale] : Translations.toggleAccessibilityModeOn[locale]} onClick={() => handleMenuItemClick(toggleAccessibilityMode)} />
+                                }
                                 {
                                     tableToggle &&
                                     <MenuItem isLast={true} locale={locale} text={tableToggle.tableMode ? Translations.toggleTableModeOffText[locale] : Translations.toggleTableModeOnText[locale]} onClick={() => handleMenuItemClick(tableToggle.toggleHandler)} />

src/react/components/chart/chart.tsx

@@ -92,6 +92,7 @@ const ReactChart: React.FC<IChartProps> = ({
 
     const [currentChartRef, setCurrentChartRef] = React.useState(chartRef.current);
     const [tableMode, setTableMode] = React.useState(false);
+    const [accessibilityMode, setAccessibilityMode] = React.useState(false);
     const [width, setWidth] = React.useState(0);
 
     const variableSelections = useMemo(() => {
@@ -135,6 +136,10 @@ const ReactChart: React.FC<IChartProps> = ({
         setTableMode(!tableMode);
     }
 
+    const toggleAccessibilityMode = () => {
+        setAccessibilityMode(!accessibilityMode);
+    }
+
     React.useEffect(() => {
         if (chartRef.current) {
             setCurrentChartRef(chartRef.current);
@@ -144,13 +149,13 @@ const ReactChart: React.FC<IChartProps> = ({
     try {
         // Chart
         if (view && pxGraphData.visualizationSettings.visualizationType !== EVisualizationType.Table) {
-            const highChartOptions = convertPxGraphDataToChartOptions(validLocale, view);
+            const highChartOptions = convertPxGraphDataToChartOptions(validLocale, view, { accessibilityMode });
             return (
                 <ChartWrapper>
                     {
                         showContextMenu &&
                         <MenuContainer>
-                            <BurgerMenu menuItemDefinitions={menuItemDefinitions} viewData={view} currentChartRef={currentChartRef} locale={validLocale} tableToggle={{ tableMode: tableMode, toggleHandler: toggleTableMode }} menuIconInheritColor={menuIconInheritColor} />
+                                <BurgerMenu menuItemDefinitions={menuItemDefinitions} viewData={view} currentChartRef={currentChartRef} locale={validLocale} tableToggle={{ tableMode: tableMode, toggleHandler: toggleTableMode }} menuIconInheritColor={menuIconInheritColor} accessibilityMode={accessibilityMode} toggleAccessibilityMode={toggleAccessibilityMode} />
                         </MenuContainer>
                     }
                     <ChartContainer $tableMode={tableMode}>