@ons/design-system 72.10.8 → 72.10.10

package/components/chart/_chart.scss

@@ -7,6 +7,28 @@
         overflow: visible !important;
     }
 
+    @media (forced-colors: active) {
+        .highcharts-plot-band {
+            fill: var(--ons-color-grey-75); /* Forces the color used for text in high contrast mode */
+        }
+        .highcharts-annotation-label text,
+        .highcharts-plot-line-label,
+        .highcharts-plot-band-label {
+            fill: CanvasText !important; /* Forces the color used for text in high contrast mode */
+        }
+
+        .highcharts-annotation-label-box {
+            fill: Canvas; /* Sets the background to match system background */
+            stroke: CanvasText; /* Ensures border is visible in contrast mode */
+        }
+    }
+
+    &__container:focus {
+        box-shadow: 0 0 0 3px var(--ons-color-black);
+        outline: 4px solid var(--ons-color-focus);
+        outline-offset: 2px;
+    }
+
     &__download-title {
         @extend .ons-u-pt-l;
         @extend .ons-u-fs-r--b;
@@ -104,6 +126,7 @@
 
     &__iframe {
         width: 100%;
+        aspect-ratio: 16 / 9; // Default aspect ratio
 
         @media (scripting: none) {
             // Approximately matches the aspect ratio of the fallback image inside the iframe
@@ -118,6 +141,8 @@
     }
 }
 
+@include iframe-aspect-ratio('ons-chart__iframe--{x}');
+
 // This is a workaround to position the axis title to the left
 .highcharts-axis-title {
     width: 100%;
@@ -170,6 +195,69 @@
     border-left: 1px solid var(--ons-color-grey-100);
 }
 
+@media (forced-colors: active) {
+    .ons-chart__boxplot-legend-item--uncertainty,
+    .highcharts-boxplot-box {
+        background-color: SelectedItem;
+        fill: SelectedItem;
+    }
+
+    .ons-chart__boxplot-legend-item--estimate,
+    .highcharts-boxplot-median {
+        background-color: WindowText;
+        stroke: WindowText;
+    }
+    .highcharts-color-0,
+    .highcharts-color-0 .highcharts-area,
+    .highcharts-legend-item.highcharts-color-0 rect {
+        fill: #007faa;
+    }
+    .highcharts-color-1,
+    .highcharts-color-1 .highcharts-area,
+    .highcharts-legend-item.highcharts-color-1 rect {
+        fill: #a6f0ff;
+    }
+    .highcharts-color-2,
+    .highcharts-color-2 .highcharts-area,
+    .highcharts-legend-item.highcharts-color-2 rect {
+        fill: #70d49e;
+    }
+    .highcharts-color-3,
+    .highcharts-color-3 .highcharts-area,
+    .highcharts-legend-item.highcharts-color-3 rect {
+        fill: #e898a5;
+    }
+    .highcharts-color-4,
+    .highcharts-color-4 .highcharts-area,
+    .highcharts-legend-item.highcharts-color-4 rect {
+        fill: #dadfe1;
+    }
+    .highcharts-color-5,
+    .highcharts-color-5 .highcharts-area,
+    .highcharts-legend-item.highcharts-color-5 rect {
+        fill: #f9db72;
+    }
+    .highcharts-color-6,
+    .highcharts-color-6 .highcharts-area,
+    .highcharts-legend-item.highcharts-color-6 rect {
+        fill: #f45b5b;
+    }
+    .highcharts-color-7,
+    .highcharts-color-7 .highcharts-area,
+    .highcharts-legend-item.highcharts-color-7 rect {
+        fill: #1e824c;
+    }
+    .highcharts-color-8,
+    .highcharts-color-8 .highcharts-area,
+    .highcharts-legend-item.highcharts-color-8 rect {
+        fill: #e7934c;
+    }
+    .highcharts-color-9,
+    .highcharts-color-9 .highcharts-area,
+    .highcharts-legend-item.highcharts-color-9 rect {
+        fill: #a0618b;
+    }
+}
 // Allow last label to overflow
 .highcharts-container {
     overflow: visible !important;

package/components/chart/_macro.njk

@@ -7,6 +7,7 @@
     {% set supportedChartTypesWithScatter = ['columnrange'] %}
     {% set supportedChartTypesWithXAxisMinAndMax = ['scatter'] %}
     {% set supportedChartTypesWithYAxisMinAndMax = ['line', 'bar', 'column', 'scatter', 'area', 'columnrange', 'boxplot'] %}
+    {% set supportedAspectRatios = ['16-9', '4-3', '21-9', '1-1', '3-2', '9-16'] %}
     {% set headingLevel = params.headingLevel | default(2) %}
     {% set openingTitleTag = "<h" ~ headingLevel %}
     {% set closingTitleTag = "</h" ~ headingLevel ~ ">" %}
@@ -15,6 +16,10 @@
     {% set openingDownloadTitleTag = "<h" ~ (headingLevel + 2) %}
     {% set closingDownloadTitleTag = "</h" ~ (headingLevel + 2) ~ ">" %}
     {% set audioDescriptionId = "chart-audio-description-" ~ params.id %}
+    {% set instructionsId = "chart-instructions-" ~ params.id %}
+    {% set iframeAspectRatio = params.iframeAspectRatio if params.iframeAspectRatio in supportedAspectRatios else '16-9' %}
+    {% set instructions = params.instructions | default('Use the Tab key to move focus into the chart. Once inside, use the arrow keys to navigate between data points. As you move, tooltips will be announced to describe each point. Touch device users, explore by touch or with swipe gestures.') %}
+
     <div
         {% if not params.iframeUrl %}
             data-highcharts-base-chart data-highcharts-type="{{ params.chartType }}" data-highcharts-theme="{{ params.theme }}"
@@ -60,12 +65,16 @@
 
             {% if params.iframeUrl %}
                 <div
-                    class="ons-chart__iframe-wrapper{% if params.fallbackImageUrl %} ons-chart__non-js-hide{% endif %}"
+                    class="ons-chart__iframe-wrapper{{ ' ons-chart__non-js-hide' if params.fallbackImageUrl else '' }}"
                     id="{{ params.id }}"
-                    data-url="{{ params.iframeUrl }}"
-                    data-title="{{ params.title }}"
                 >
-                    <iframe src="{{ params.iframeUrl }}" title="{{ params.title }}" class="ons-chart__iframe"></iframe>
+                    <iframe
+                        src="{{ params.iframeUrl }}"
+                        title="{{ params.title }}"
+                        class="ons-chart__iframe ons-chart__iframe--{{ iframeAspectRatio }}"
+                        frameborder="0"
+                        scrolling="no"
+                    ></iframe>
                 </div>
             {% else %}
                 {% if params.chartType == 'boxplot' and (params.estimateLineLabel or params.uncertaintyRangeLabel) and params.legend == true %}
@@ -85,7 +94,17 @@
                     </div>
                 {% endif %}
                 {% if params.chartType in supportedChartTypes %}
-                    <div data-highcharts-chart class="ons-chart__chart"></div>
+                    <div
+                        data-highcharts-chart-container
+                        class="ons-chart__container"
+                        tabindex="0"
+                        role="region"
+                        aria-label="chart container"
+                        aria-describedby="{{ instructionsId }}"
+                    >
+                        <div id="{{ instructionsId }}" class="ons-u-vh">{{ instructions }}</div>
+                        <div data-highcharts-chart class="ons-chart__chart"></div>
+                    </div>
                 {% else %}
                     <p data-invalid-chart-type data-unsupported-chart-text>
                         <b>{{ '"' + params.chartType + '" - ' + (params.unsupportedChartText or 'chart type is not supported') }}</b>
@@ -237,7 +256,7 @@
                 }
             %}
 
-            <!-- Set scripts to pass the config values as json to the javascript -->
+            <!-- Set scripts to pass the config values as json to the JavaScript -->
             <!-- prettier-ignore-start -->
             <script type="application/json" data-highcharts-config--{{ params.id }}>
                 {{ config | tojson }}