@ons/design-system 73.2.0 → 73.4.0

package/components/button/_button.scss

@@ -631,6 +631,7 @@ $button-shadow-size: 3px;
 
     &--menu {
         border-bottom: 4px solid rgb(0 0 0 / 0%);
+        height: 72px;
         .ons-icon {
             transform: rotate(90deg);
         }
@@ -644,12 +645,7 @@ $button-shadow-size: 3px;
             padding: 0;
             .ons-icon {
                 fill: var(--ons-color-text-link);
-                height: 1rem;
                 margin-top: 0;
-                width: 1rem;
-            }
-            .ons-btn__text {
-                height: 24px;
             }
         }
     }
@@ -723,7 +719,8 @@ $button-shadow-size: 3px;
     &--close {
         align-items: center;
         display: flex;
-        padding: 1.25rem 1rem 1rem;
+        height: 72px;
+        padding: 0 1.5rem;
     }
 
     &--search-icon &,

package/components/chart/annotations-options.js

@@ -1,11 +1,20 @@
 import ChartConstants from './chart-constants';
 
 class AnnotationsOptions {
-    constructor(annotations) {
+    constructor(annotations, xAxisCategories = []) {
         this.constants = ChartConstants.constants();
         this.annotations = annotations;
+        this.xAxisCategories = xAxisCategories;
     }
 
+    // Screen reader description that includes the annotated data point.
+    buildPointAccessibilityDescription = (annotation) => {
+        const x = annotation.point.x;
+        const y = annotation.point.y;
+        const xLabel = Number.isInteger(x) && this.xAxisCategories.length > x ? this.xAxisCategories[x] : x;
+        return `${annotation.text}. Related to ${xLabel}, ${y}`;
+    };
+
     getAnnotationsOptionsDesktop = () => {
         let annotations = [
             {
@@ -36,6 +45,9 @@ class AnnotationsOptions {
                 text: annotation.text,
                 x: annotation.labelOffsetX,
                 y: annotation.labelOffsetY,
+                accessibility: {
+                    description: this.buildPointAccessibilityDescription(annotation),
+                },
             });
         });
         return annotations;
@@ -66,9 +78,9 @@ class AnnotationsOptions {
                 text: index + 1,
                 x: 0,
                 y: 0,
-                // Ensures the full label is read out by screen readers
+                // Ensures the full label is read out by screen readers, including data point context
                 accessibility: {
-                    description: annotation.text,
+                    description: this.buildPointAccessibilityDescription(annotation),
                 },
             });
         });

package/components/chart/chart.js

@@ -41,7 +41,7 @@ class HighchartsBaseChart {
         this.config = JSON.parse(this.node.querySelector(`[data-highcharts-config--${this.id}]`).textContent);
         if (this.node.querySelector(`[data-highcharts-annotations--${this.id}]`)) {
             this.annotations = JSON.parse(this.node.querySelector(`[data-highcharts-annotations--${this.id}]`).textContent);
-            this.annotationsOptions = new AnnotationsOptions(this.annotations);
+            this.annotationsOptions = new AnnotationsOptions(this.annotations, this.config.xAxis?.categories ?? []);
         }
         if (this.node.querySelector(`[data-highcharts-range-annotations--${this.id}]`)) {
             this.rangeAnnotations = JSON.parse(this.node.querySelector(`[data-highcharts-range-annotations--${this.id}]`).textContent);
@@ -73,7 +73,6 @@ class HighchartsBaseChart {
         this.customReferenceLineValue = this.node.dataset.highchartsCustomReferenceLineValue
             ? parseFloat(this.node.dataset.highchartsCustomReferenceLineValue)
             : undefined;
-
         this.specificChartOptions = new SpecificChartOptions(
             this.theme,
             this.chartType,
@@ -98,6 +97,7 @@ class HighchartsBaseChart {
         }
         this.hideDataLabels = this.checkHideDataLabels();
         this.setSpecificChartOptions();
+        this.setAnnotationsAccessibilityDescription();
         this.setResponsiveOptions();
         this.setLoadEvent();
         this.setRenderEvent();
@@ -105,6 +105,25 @@ class HighchartsBaseChart {
         this.chart = Highcharts.chart(chartNode, this.config);
     }
 
+    // Making these annotation types accessible to screen readers.  Point annotations are already
+    // handled by the Highcharts annotations module via {annotationsList}.
+    setAnnotationsAccessibilityDescription = () => {
+        const descriptions = [];
+        if (this.rangeAnnotationsOptions) {
+            descriptions.push(...this.rangeAnnotationsOptions.getAccessibilityDescriptions());
+        }
+        if (this.referenceLineAnnotationsOptions) {
+            descriptions.push(...this.referenceLineAnnotationsOptions.getAccessibilityDescriptions());
+        }
+        if (descriptions.length > 0) {
+            if (!this.config.accessibility) {
+                this.config.accessibility = {};
+            }
+            const listItems = descriptions.map((d) => `<li>${d}</li>`).join('');
+            this.config.accessibility.description = `<ul style="list-style-type: none">${listItems}</ul>`;
+        }
+    };
+
     // Check for the number of extra line series in the config
     checkForExtraLines = () => {
         return this.chartType === 'line' ? 0 : this.config.series.filter((series) => series.type === 'line').length;
@@ -319,6 +338,12 @@ class HighchartsBaseChart {
                     }
                 });
             }
+            // Clear the SVG <desc> element that Highcharts unconditionally
+            // injects with "Created with Highcharts x.x.x".
+            const svgDesc = currentChart.renderer.box.querySelector('desc');
+            if (svgDesc) {
+                svgDesc.textContent = '';
+            }
             currentChart.redraw(false);
         };
     };

package/components/chart/common-chart-options.js

@@ -55,6 +55,16 @@ class CommonChartOptions {
                 // Remove Highcharts watermark
                 enabled: false,
             },
+            lang: {
+                accessibility: {
+                    // We use only the title so screen readers don't hear Highcharts interactive chart text.
+                    chartContainerLabel: '{title}',
+                    // The default "Interactive chart" creates a redundant landmark on
+                    // the SVG element. The outer chart region already has the title
+                    // label, so we clear this to avoid duplicate announcements.
+                    svgContainerLabel: '',
+                },
+            },
             accessibility: {
                 enabled: true,
                 keyboardNavigation: {

package/components/chart/range-annotations-options.js

@@ -6,6 +6,14 @@ class RangeAnnotationsOptions {
         this.rangeAnnotations = rangeAnnotations;
     }
 
+    buildRangeAccessibilityDescription = (rangeAnnotation) => {
+        const axisLabel = rangeAnnotation.axis === 'x' ? 'x-axis' : 'y-axis';
+        const fromValue = rangeAnnotation.range?.axisValue1;
+        const toValue = rangeAnnotation.range?.axisValue2;
+        const rangeText = fromValue !== undefined && toValue !== undefined ? `from ${fromValue} to ${toValue}` : 'for a range';
+        return `Range annotation on the ${axisLabel} ${rangeText}: ${rangeAnnotation.text}`;
+    };
+
     getRangeAnnotationsOptionsDesktop = (chartType) => {
         let xAxisPlotBands = [];
         let yAxisPlotBands = [];
@@ -25,6 +33,9 @@ class RangeAnnotationsOptions {
                         ? `ons-chart__range-annotation-label ons-chart__range-annotation-label--${rangeAnnotation.axis}`
                         : 'ons-chart__range-annotation-label--outside',
                     allowOverlap: true,
+                    accessibility: {
+                        description: this.buildRangeAccessibilityDescription(rangeAnnotation),
+                    },
                     style: {
                         color: this.constants.labelColor,
                         fontSize: this.constants.defaultFontSize,
@@ -67,6 +78,9 @@ class RangeAnnotationsOptions {
                     useHTML: true,
                     className: 'ons-chart__annotations-footnotes-number',
                     allowOverlap: true,
+                    accessibility: {
+                        description: this.buildRangeAccessibilityDescription(rangeAnnotation),
+                    },
                     style: {
                         color: this.constants.labelColor,
                         fontSize: this.constants.defaultFontSize,
@@ -204,9 +218,11 @@ class RangeAnnotationsOptions {
         });
     };
 
-    // For bar and column charts, we want the range to
-    // start and end flush with the edges of the columns / bars,
-    // not halfway through as is the Highcharts default.
+    // Returns an array of plain-text descriptions for all range annotations.
+    getAccessibilityDescriptions = () => {
+        return this.rangeAnnotations.map((rangeAnnotation) => this.buildRangeAccessibilityDescription(rangeAnnotation));
+    };
+
     adjustRangeForCategoryAxis = (rangeAnnotation, chartType) => {
         let axisValue1 = rangeAnnotation.range.axisValue1;
         let axisValue2 = rangeAnnotation.range.axisValue2;

package/components/chart/reference-line-annotations-options.js

@@ -6,6 +6,19 @@ class ReferenceLineAnnotationsOptions {
         this.referenceLineAnnotations = referenceLineAnnotations;
     }
 
+    buildReferenceLineAccessibilityDescription = (referenceLineAnnotation) => {
+        const axisLabel = referenceLineAnnotation.axis === 'x' ? 'x-axis' : 'y-axis';
+        const valueText = referenceLineAnnotation.value !== undefined ? `at ${referenceLineAnnotation.value}` : 'at a value';
+        return `Reference line annotation on the ${axisLabel} ${valueText}: ${referenceLineAnnotation.text}`;
+    };
+
+    // Returns an array of plain-text descriptions for all reference line annotations
+    getAccessibilityDescriptions = () => {
+        return this.referenceLineAnnotations.map((referenceLineAnnotation) =>
+            this.buildReferenceLineAccessibilityDescription(referenceLineAnnotation),
+        );
+    };
+
     getReferenceLineAnnotationsOptionsDesktop = () => {
         let xAxisPlotLines = [];
         let yAxisPlotLines = [];
@@ -24,6 +37,9 @@ class ReferenceLineAnnotationsOptions {
                     rotation: 0,
                     align: 'left',
                     textAlign: 'left',
+                    accessibility: {
+                        description: this.buildReferenceLineAccessibilityDescription(referenceLineAnnotation),
+                    },
                 },
                 color: this.constants.zeroLineColor,
                 // note this works to give a dashed line with 4px and a 4px gap, but
@@ -61,6 +77,9 @@ class ReferenceLineAnnotationsOptions {
                     useHTML: true,
                     className: 'ons-chart__annotations-footnotes-number',
                     allowOverlap: true,
+                    accessibility: {
+                        description: this.buildReferenceLineAccessibilityDescription(referenceLineAnnotation),
+                    },
                     style: {
                         color: this.constants.labelColor,
                         fontSize: this.constants.defaultFontSize,

package/components/description-list/_description-list.scss

@@ -41,6 +41,32 @@
     }
 
     &--inline {
+        @include mq(600px, l, $to-operator: '<') {
+            .ons-description-list__item {
+                align-items: baseline;
+                column-gap: 0.25rem;
+                display: grid;
+                grid-template-columns: 10rem 1fr;
+            }
+
+            .ons-description-list__term,
+            .ons-description-list__value {
+                clear: none;
+                float: none;
+                max-width: none;
+                width: auto;
+            }
+
+            .ons-description-list__term {
+                grid-column: 1;
+                grid-row: 1;
+            }
+
+            .ons-description-list__value {
+                grid-column: 2;
+            }
+        }
+
         @include mq(l) {
             display: grid;
             grid-template-columns: repeat(3, 1fr);

package/components/header/_header.scss

@@ -246,6 +246,20 @@
         }
     }
 
+    &--basic {
+        .ons-header__links--language-section {
+            padding: 0 1.5rem !important;
+        }
+
+        .ons-header__language {
+            margin-bottom: 4px !important;
+        }
+
+        .ons-language-links__item {
+            margin: 0 !important;
+        }
+    }
+
     &--basic & {
         &__grid-top {
             padding: 0;
@@ -254,6 +268,8 @@
 
             #{$root}__menu-links {
                 width: 100%;
+                display: flex;
+                align-items: center;
 
                 #{$root}__language {
                     display: block;
@@ -284,7 +300,8 @@
         position: relative;
         width: 100%;
 
-        &__key-list {
+        &__key-list,
+        &__language {
             border-bottom: 1px solid var(--ons-color-ocean-blue);
             margin-bottom: 1.25rem;
             padding-bottom: 1rem;
@@ -298,6 +315,11 @@
         &__description {
             line-height: 1.714 !important;
         }
+        &__language {
+            .ons-language-links__item {
+                margin-left: 0 !important;
+            }
+        }
 
         &__groupItem-list:not(:last-of-type) {
             margin-bottom: 2rem !important;
@@ -312,6 +334,7 @@
             padding-bottom: 1rem;
             @include mq(m) {
                 padding-bottom: 0;
+                padding-right: 2.5rem;
             }
         }
     }
@@ -325,15 +348,35 @@
     &-nav-search {
         background-color: var(--ons-color-branded-tint);
 
+        // Prevent flash of the non-JS, always-visible panels when JS is enabled.
+        // Panels are shown only when NavigationToggle sets aria-hidden="false".
+        body.ons-js-enabled .ons-header.ons-header--basic &.ons-js-nav-menu:not([aria-hidden='false']),
+        body.ons-js-enabled .ons-header.ons-header--basic &.ons-js-header-search:not([aria-hidden='false']) {
+            display: none !important;
+        }
+
+        body.ons-js-enabled .ons-header.ons-header--basic &.ons-js-nav-menu[aria-hidden='false'],
+        body.ons-js-enabled .ons-header.ons-header--basic &.ons-js-header-search[aria-hidden='false'] {
+            display: block !important;
+        }
+
         // updates styles when js is enabled
         .ons-js-enabled & {
-            position: absolute;
-            top: 100%;
+            position: relative;
             left: 50%;
             width: 100vw;
             transform: translateX(-50%);
             border-top: 0;
-            z-index: 500;
+            padding-left: env(safe-area-inset-left);
+            padding-right: env(safe-area-inset-right);
+
+            // iOS Edge can render 100vw breakout panels under the Dynamic Island in landscape.
+            // Keep panels in normal flow on touch landscape viewports so body safe-area insets apply.
+            @media (orientation: landscape) and (hover: none) and (pointer: coarse) {
+                left: 0;
+                width: 100%;
+                transform: none;
+            }
         }
     }