bugfix/15921-fillcolor-hcm

samples/highcharts/accessibility/high-contrast-mode/demo.details

@@ -0,0 +1,6 @@
+---
+name: Highcharts - high contrast mode
+authors:
+  - Gøran Slettemark
+js_wrap: b
+...

samples/highcharts/accessibility/high-contrast-mode/demo.html

@@ -0,0 +1,11 @@
+<script src="https://code.highcharts.com/highcharts.js"></script>
+<script src="https://code.highcharts.com/modules/accessibility.js"></script>
+
+<figure class="highcharts-figure">
+    <div id="container"></div>
+
+    <p class="highcharts-description">
+        Area chart with high contrast mode enabled and custom colors defined.
+    </p>
+</figure>
+

samples/highcharts/accessibility/high-contrast-mode/demo.js

@@ -0,0 +1,29 @@
+Highcharts.chart('container', {
+    chart: {
+        type: 'area'
+    },
+    title: {
+        text: 'High contrast mode with custom colors'
+    },
+    accessibility: {
+        highContrastMode: true, // force high contrast mode,
+        highContrastTheme: {
+            colors: [
+                '#FFFFFF',
+                '#f9455a',
+                '#041867'
+            ]
+        }
+    },
+    series: [
+        {
+            data: [5, 5, 5, 5, 5, 5]
+        },
+        {
+            data: [0, 1, 2, 3, 4, 5]
+        },
+        {
+            data: [5, 4, 3, 2, 1, 0]
+        }
+    ]
+});

samples/unit-tests/accessibility/accessibility-options/demo.js

@@ -155,6 +155,22 @@ QUnit.test('Keyboard navigation', function (assert) {
         !chart.container.parentNode.querySelector('.highcharts-exit-anchor'),
         'The exit anchor element shouldn\'t be rendered (#19374).'
     );
+
+    chart.update({
+        accessibility: {
+            highContrastMode: true,
+            highContrastTheme: {
+                colors: ['#ff0000', '#00ff00', '#0000ff']
+            }
+        }
+    });
+
+    assert.strictEqual(
+        chart.options.colors.length,
+        3,
+        'The colors array should be updated with high contrast colors.'
+    );
+
 });
 
 QUnit.test('No data', function (assert) {

ts/Accessibility/Accessibility.ts

@@ -254,9 +254,13 @@ class Accessibility {
         this.keyboardNavigation.update(kbdNavOrder);
 
         // Handle high contrast mode
+        // Should only be applied once, and not if explicitly disabled
         if (
-            !chart.highContrastModeActive && // Only do this once
-            whcm.isHighContrastModeActive()
+            !chart.highContrastModeActive &&
+            !a11yOptions.highContrastMode === false && (
+                whcm.isHighContrastModeActive() ||
+                a11yOptions.highContrastMode === true
+            )
         ) {
             whcm.setHighContrastTheme(chart);
         }

ts/Accessibility/HighContrastMode.ts

@@ -20,6 +20,7 @@
 
 import type Accessibility from './Accessibility';
 import type ColorType from '../Core/Color/ColorType';
+import type SeriesOptions from '../Core/Series/SeriesOptions';
 
 import H from '../Core/Globals.js';
 const {
@@ -110,26 +111,40 @@ function setHighContrastTheme(
     const theme: AnyRecord = (
         chart.options.accessibility.highContrastTheme
     );
+
     chart.update(theme, false);
 
+    const hasCustomColors = theme.colors?.length > 1;
+
     // Force series colors (plotOptions is not enough)
     chart.series.forEach(function (s): void {
         const plotOpts = theme.plotOptions[s.type] || {};
-        s.update({
+
+        const fillColor = hasCustomColors && s.colorIndex !== void 0 ?
+            theme.colors[s.colorIndex] :
+            plotOpts.color || 'window';
+
+        const seriesOptions: Partial<SeriesOptions> = {
             color: plotOpts.color || 'windowText',
-            colors: [plotOpts.color || 'windowText'],
-            borderColor: plotOpts.borderColor || 'window'
-        });
-
-        // Force point colors if existing
-        s.points.forEach(function (p): void {
-            if (p.options && p.options.color) {
-                p.update({
-                    color: plotOpts.color || 'windowText',
-                    borderColor: plotOpts.borderColor || 'window'
-                }, false);
-            }
-        });
+            colors: hasCustomColors ?
+                theme.colors : [plotOpts.color || 'windowText'],
+            borderColor: plotOpts.borderColor || 'window',
+            fillColor
+        };
+
+        s.update(seriesOptions, false);
+
+        if (s.points) {
+            // Force point colors if existing
+            s.points.forEach(function (p): void {
+                if (p.options && p.options.color) {
+                    p.update({
+                        color: plotOpts.color || 'windowText',
+                        borderColor: plotOpts.borderColor || 'window'
+                    }, false);
+                }
+            });
+        }
     });
 
     // The redraw for each series and after is required for 3D pie

ts/Accessibility/HighContrastTheme.ts

@@ -39,7 +39,9 @@ declare module '../Core/Series/DataLabelOptions' {
  *
  * */
 
-const theme: DeepPartial<Options> = {
+export type HighContrastThemeOptions = DeepPartial<Options>;
+
+const theme: HighContrastThemeOptions = {
     chart: {
         backgroundColor: 'window'
     },
@@ -56,7 +58,8 @@ const theme: DeepPartial<Options> = {
     colorAxis: {
         minColor: 'windowText',
         maxColor: 'windowText',
-        stops: []
+        stops: [],
+        dataClasses: []
     },
     colors: ['windowText'],
     xAxis: {
@@ -117,7 +120,7 @@ const theme: DeepPartial<Options> = {
                 lineColor: 'windowText',
                 fillColor: 'windowText'
             }
-        } as any,
+        },
         pie: {
             color: 'window',
             colors: ['window'],

ts/Accessibility/Options/A11yDefaults.ts

@@ -524,6 +524,17 @@ const Options: DeepPartial<A11yOptions> = {
          * @apioption accessibility.highContrastTheme
          */
 
+        /**
+         * Controls how [highContrastTheme](#accessibility.highContrastTheme)
+         * is applied.
+         *
+         * The default option is `auto`, which applies the high contrast theme
+         * the user's system has a high contrast theme active.
+         *
+         * @since next
+         */
+        highContrastMode: 'auto',
+
         /**
          * A text description of the chart.
          *

ts/Accessibility/Options/A11yOptions.d.ts

@@ -74,6 +74,7 @@ export interface AccessibilityOptions {
     customComponents?: AnyRecord;
     description?: string;
     enabled: boolean;
+    highContrastMode: boolean | 'auto';
     highContrastTheme: AnyRecord;
     keyboardNavigation: AccessibilityKeyboardNavigationOptions;
     landmarkVerbosity: string;