@ons/design-system 73.3.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;
@@ -286,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;
@@ -300,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;
@@ -314,6 +334,7 @@
             padding-bottom: 1rem;
             @include mq(m) {
                 padding-bottom: 0;
+                padding-right: 2.5rem;
             }
         }
     }
@@ -327,6 +348,18 @@
     &-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: relative;
@@ -334,6 +367,16 @@
             width: 100vw;
             transform: translateX(-50%);
             border-top: 0;
+            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;
+            }
         }
     }
 

package/components/header/_macro.njk

@@ -110,7 +110,7 @@
                                     {{
                                         onsButton({
                                             "text": params.menuLinks.toggleMenuButton.text | default("Menu"),
-                                            "classes": "ons-u-fs-s--b ons-js-toggle-nav-menu button-nav active disabled",
+                                            "classes": "ons-u-fs-r--b ons-js-toggle-nav-menu ons-u-db-no-js_disabled button-nav disabled",
                                             "type": "button",
                                             "variants": "menu",
                                             "iconType": "chevron",
@@ -118,7 +118,7 @@
                                             "attributes": {
                                                 "aria-label": params.menuLinks.toggleMenuButton.ariaLabel | default("Toggle menu"),
                                                 "aria-controls": params.menuLinks.id,
-                                                "aria-expanded": "true",
+                                                "aria-expanded": "false",
                                                 "aria-disabled": "true"
                                             }
                                         })
@@ -126,27 +126,18 @@
                                 </div>
                             {% endif %}
 
-                            {% if params.language %}
-                                <div class="ons-grid__col ons-col-auto{{ ' ons-u-mr-s ons-u-d-no@2xs@xs' if params.serviceLinks }}">
-                                    <div class="ons-header__language">
-                                        {% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
-                                        {{ onsLanguageSelector(params.language) }}
-                                    </div>
-                                </div>
-                            {% endif %}
-
                             {% if params.search or params.searchLinks %}
-                                <div class="ons-header__links ons-grid__col ons-header__menu-link">
+                                <div class="ons-header__links ons-grid__col ons-header__menu-links">
                                     {{
                                         onsButton({
-                                            "classes": "ons-u-fs-s--b ons-js-toggle-header-search ons-btn--close ons-btn--search-icon active disabled",
+                                            "classes": "ons-u-fs-s--b ons-js-toggle-header-search ons-u-db-no-js_disabled ons-btn--search-icon disabled",
                                             "type": "button",
                                             "variants": "search",
                                             "iconType": "search",
                                             "attributes": {
                                                 "aria-label": (params.search.toggleAriaLabel if params.search.toggleAriaLabel else params.searchLinks.searchButtonAriaLabel) | default("Toggle search"),
                                                 "aria-controls": params.search.id if params.search.id else params.searchLinks.id,
-                                                "aria-expanded": "true",
+                                                "aria-expanded": "false",
                                                 "aria-disabled": "true"
                                             }
                                         })
@@ -154,8 +145,16 @@
                                 </div>
                             {% endif %}
                         </div>
+                        {% if params.language %}
+                            <div class="ons-header__links ons-grid__col ons-col-auto ons-header__links--language-section ons-u-d-no@2xs@m">
+                                <div class="ons-header__language ons-u-fs-r--b">
+                                    {% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
+                                    {{ onsLanguageSelector(params.language) }}
+                                </div>
+                            </div>
+                        {% endif %}
                     {% endif %}
-                    {% if params.language or params.serviceLinks %}
+                    {% if params.variants!== 'basic' and (params.language or params.serviceLinks) %}
                         <div
                             class="ons-header__links ons-grid__col{{ ' ons-u-ml-auto' if not (params.searchLinks or params.search) and not params.menuLinks }}"
                         >
@@ -278,11 +277,18 @@
         </div>
         {% if params.variants == "basic" and params.menuLinks %}
             <nav
-                class="ons-js-nav-menu ons-header-nav-menu ons-u-pt-2xl ons-u-d-no"
+                class="ons-js-nav-menu ons-header-nav-menu ons-u-pt-2xl"
                 id="{{ params.menuLinks.id }}"
                 aria-label="{{ params.menuLinks.ariaLabel | default("Menu navigation") }}"
-                aria-hidden="true"
             >
+                {% if params.language %}
+                    <div class="ons-container ons-u-d-no@m ons-u-d-no@2xl">
+                        <div class="ons-header-nav-menu__language ons-u-fs-s--b">
+                            {% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
+                            {{ onsLanguageSelector(params.language) }}
+                        </div>
+                    </div>
+                {% endif %}
                 {% if params.menuLinks.keyLinks %}
                     <div class="ons-container">
                         <ul class="ons-grid ons-header-nav-menu__key-list">
@@ -352,7 +358,6 @@
                 class="ons-js-header-search ons-header-nav-search {{ params.searchLinks.classes if params.searchLinks and params.searchLinks.classes else '' }}{{ params.search.classes if params.search and params.search.classes else '' }}"
                 id="{{ params.search.id if params.search else params.searchLinks.id }}"
                 aria-label="{{ (params.search.navAriaLabel if params.search else params.searchLinks.searchNavigationAriaLabel) | default('Search navigation') }}"
-                aria-hidden="false"
             >
                 <div class="ons-container">
                     <form class="ons-header-nav-search__input" method="get" action="{{ params.search.form.action | default('') }}">
@@ -378,9 +383,10 @@
                 </div>
                 {% if params.search or params.searchLinks %}
                     <div class="ons-container">
-                        <h2 class="ons-u-fs-r--b ons-u-mb-s ons-header-nav-search__heading">
-                            {{ params.search.links.heading if params.search.links else params.searchLinks.heading }}
-                        </h2>
+                        {% set searchHeading = params.search.links.heading if params.search.links else params.searchLinks.heading %}
+                        {% if searchHeading %}
+                            <h2 class="ons-u-fs-r--b ons-u-mb-s ons-header-nav-search__heading">{{ searchHeading }}</h2>
+                        {% endif %}
                         <ul class="ons-list ons-list--bare ons-list--inline">
                             {% if params.searchLinks %}
                                 {% for item in params.searchLinks.itemsList %}