@ongov/ontario-design-system-component-library 6.0.0-alpha.3 → 6.0.0-alpha.4

package/src/components/ontario-language-toggle/ontario-language-toggle.scss

@@ -1,14 +1,15 @@
 @use 'sass:math';
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/fonts.variables' as fonts;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as globalFunctions;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/fonts.variables' as fonts;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as
+	globalFunctions;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as
 	focusPlaceholders;
 
-@forward '@ongov/ontario-design-system-global-styles/dist/styles/scss/7-overrides/_visibility.overrides.scss';
+@forward 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/7-overrides/_visibility.overrides.scss';
 
 .ontario-language-toggler {
 	background-color: colours.$ontario-colour-black;
@@ -29,7 +30,9 @@
 	text-decoration: none;
 
 	&:hover {
+		color: colours.$ontario-colour-white;
 		background-color: colours.$ontario-greyscale-70;
+		color: colours.$ontario-colour-white;
 	}
 
 	&:active {

package/src/components/ontario-loading-indicator/ontario-loading-indicator.scss

@@ -1,9 +1,10 @@
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/fonts.variables' as fonts;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/line-heights.variables' as lineHeights;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as globalFunctions;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/fonts.variables' as fonts;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/line-heights.variables' as lineHeights;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as
+	globalFunctions;
 
 $offset: 1, 200;
 $duration: 1.5s;

package/src/components/ontario-loading-indicator/ontario-loading-indicator.tsx

@@ -3,7 +3,7 @@ import { Language } from '../../utils/common/language-types';
 import { validateLanguage } from '../../utils/validation/validation-functions';
 import { validateValueAgainstArray } from '../../utils/validation/validation-functions';
 import { ConsoleMessageClass } from '../../utils/console-message/console-message';
-
+import { HeaderLanguageToggleEventDetails } from '../../utils/events/common-events.interface';
 import translations from '../../translations/global.i18n.json';
 
 @Component({
@@ -61,9 +61,13 @@ export class OntarioLoadingIndicator {
 		}
 	}
 
+	/**
+	 * Handles an update to the language should the user request a language update from the language toggle.
+	 * @param {CustomEvent} - The language that has been selected.
+	 */
 	@Listen('headerLanguageToggled', { target: 'window' })
-	handleHeaderLanguageToggled(event: CustomEvent<Language>) {
-		this.language = validateLanguage(event);
+	handleHeaderLanguageToggled(event: CustomEvent<HeaderLanguageToggleEventDetails>) {
+		this.language = validateLanguage(event.detail.newLanguage);
 	}
 
 	/**
@@ -129,7 +133,12 @@ export class OntarioLoadingIndicator {
 				aria-live="assertive"
 			>
 				<div class="ontario-loading-indicator">
-					<svg class="ontario-loading-indicator__spinner" viewBox="25 25 50 50" xmlns="http://www.w3.org/2000/svg">
+					<svg
+						class="ontario-loading-indicator__spinner"
+						viewBox="25 25 50 50"
+						xmlns="http://www.w3.org/2000/svg"
+						aria-hidden="true"
+					>
 						<circle cx="50" cy="50" r="20" fill="none" stroke-width="4" />
 					</svg>
 					<p>{this.message ?? this.translations.loading[`${this.language}`]}</p>

package/src/components/ontario-loading-indicator/test/__snapshots__/ontario-loading-indicator.spec.tsx.snap

@@ -5,7 +5,7 @@ exports[`ontario-loading-indicator should render the expected html 1`] = `
   <template shadowrootmode="open">
     <div aria-hidden="true" aria-live="assertive" class="ontario-loading-indicator__overlay" role="alert">
       <div class="ontario-loading-indicator">
-        <svg class="ontario-loading-indicator__spinner" viewBox="25 25 50 50" xmlns="http://www.w3.org/2000/svg">
+        <svg aria-hidden="true" class="ontario-loading-indicator__spinner" viewBox="25 25 50 50" xmlns="http://www.w3.org/2000/svg">
           <circle cx="50" cy="50" fill="none" r="20" stroke-width="4"></circle>
         </svg>
         <p>

package/src/components/ontario-loading-indicator/test/ontario-loading-indicator.spec.tsx

@@ -21,7 +21,7 @@ describe('ontario-loading-indicator', () => {
 				<mock:shadow-root>
 					<div aria-hidden="true" aria-live="assertive" class="ontario-loading-indicator__overlay" role="alert">
 						<div class="ontario-loading-indicator">
-							<svg class="ontario-loading-indicator__spinner" viewBox="25 25 50 50" xmlns="http://www.w3.org/2000/svg">
+							<svg aria-hidden="true" class="ontario-loading-indicator__spinner" viewBox="25 25 50 50" xmlns="http://www.w3.org/2000/svg">
 								<circle cx="50" cy="50" fill="none" r="20" stroke-width="4"></circle>
 							</svg>
 							<p>Loading</p>

package/src/components/ontario-page-alert/ontario-page-alert.scss

@@ -1,9 +1,10 @@
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as globalFunctions;
-@forward '@ongov/ontario-design-system-global-styles/dist/styles/scss/4-elements/_global.elements.scss';
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as
+	globalFunctions;
+@forward 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/4-elements/_global.elements.scss';
 
 $ontario-alert-link-focus: #6b0000;
 $ontario-alert-link-active: #280000;

package/src/components/ontario-page-alert/ontario-page-alert.tsx

@@ -101,7 +101,9 @@ export class OntarioPageAlert implements PageAlert {
 		return (
 			<div class={this.getClass()}>
 				<div class="ontario-alert__header">
-					<div class="ontario-alert__header-icon">{this.renderIcon()}</div>
+					<div class="ontario-alert__header-icon" aria-hidden="true">
+						{this.renderIcon()}
+					</div>
 					<h2 class="ontario-alert__header-title ontario-h4">{this.heading}</h2>
 				</div>
 				<div class="ontario-alert__body">{this.renderContent()}</div>

package/src/components/ontario-page-alert/test/ontario-page-alert.spec.tsx

@@ -15,7 +15,7 @@ describe('ontario-page-alert', () => {
 				<mock:shadow-root>
 			     <div class="ontario-alert ontario-alert--informational">
 			       <div class="ontario-alert__header">
-			         <div class="ontario-alert__header-icon">
+			         <div aria-hidden="true" class="ontario-alert__header-icon">
 			           <ontario-icon-alert-information icon-width="36"></ontario-icon-alert-information>
 			         </div>
 			         <h2 class="ontario-alert__header-title ontario-h4">
@@ -44,7 +44,7 @@ describe('ontario-page-alert', () => {
 				<mock:shadow-root>
 			     <div class="ontario-alert ontario-alert--warning">
 			       <div class="ontario-alert__header">
-			         <div class="ontario-alert__header-icon">
+			         <div aria-hidden="true" class="ontario-alert__header-icon">
 			           <ontario-icon-alert-warning icon-width="36"></ontario-icon-alert-warning>
 			         </div>
 			         <h2 class="ontario-alert__header-title ontario-h4">
@@ -73,7 +73,7 @@ describe('ontario-page-alert', () => {
 				<mock:shadow-root>
 			     <div class="ontario-alert ontario-alert--success">
 			       <div class="ontario-alert__header">
-			         <div class="ontario-alert__header-icon">
+			         <div aria-hidden="true" class="ontario-alert__header-icon">
 			           <ontario-icon-alert-success icon-width="36"></ontario-icon-alert-success>
 			         </div>
 			         <h2 class="ontario-alert__header-title ontario-h4">
@@ -102,7 +102,7 @@ describe('ontario-page-alert', () => {
 				<mock:shadow-root>
 			     <div class="ontario-alert ontario-alert--error">
 			       <div class="ontario-alert__header">
-			         <div class="ontario-alert__header-icon">
+			         <div aria-hidden="true" class="ontario-alert__header-icon">
 			           <ontario-icon-alert-error icon-width="36"></ontario-icon-alert-error>
 			         </div>
 			         <h2 class="ontario-alert__header-title ontario-h4">
@@ -132,7 +132,7 @@ describe('ontario-page-alert', () => {
 				<mock:shadow-root>
 			     <div class="ontario-alert ontario-alert--informational">
 			       <div class="ontario-alert__header">
-			         <div class="ontario-alert__header-icon">
+			         <div aria-hidden="true" class="ontario-alert__header-icon">
 			           <ontario-icon-alert-information icon-width="36"></ontario-icon-alert-information>
 			         </div>
 			         <h2 class="ontario-alert__header-title ontario-h4"></h2>

package/src/components/ontario-radio-buttons/ontario-radio-buttons.scss

@@ -1,25 +1,32 @@
 @use 'sass:math';
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/fonts.variables' as fonts;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/z-index.variables' as zIndex;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-sizes.variables' as fontSizes;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/line-heights.variables' as lineheight;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/fonts.variables' as fonts;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/z-index.variables' as zIndex;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-sizes.variables' as fontSizes;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/line-heights.variables' as lineheight;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as
 	placeholders;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/4-elements/_global.elements.scss';
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/6-components/_form.component.scss';
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/7-overrides/_visibility.overrides.scss';
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/6-components/_text-inputs.component.scss';
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/4-elements/global.elements';
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/7-overrides/visibility.overrides';
+
+@use '../../styles/fieldsets.scss';
+@use '../../styles/labels.scss';
+@use '../../styles/text-inputs.scss';
 @forward '../../utils/components/error-message/error-message';
 
 $ontario-radios-size: 32px;
 $ontario-radios-size-mobile: 36px;
 $ontario-input-offset: math.div((globalVariables.$touch-target-size - $ontario-radios-size), 2);
 
+.ontario-radios {
+	padding: spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-0 math.div(spacing.$spacing-1, 2);
+	max-width: globalVariables.$standard-width;
+}
+
 .ontario-radios__item {
 	position: relative;
 	display: block;
@@ -29,6 +36,14 @@ $ontario-input-offset: math.div((globalVariables.$touch-target-size - $ontario-r
 	&:last-of-type {
 		margin-bottom: spacing.$spacing-0;
 	}
+
+	.ontario-radios__hint-expander {
+		margin: spacing.$spacing-3 spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-2;
+
+		@media screen and (max-width: breakpoints.$small-breakpoint) {
+			margin-top: spacing.$spacing-4;
+		}
+	}
 }
 
 .ontario-radios__input {
@@ -119,7 +134,7 @@ $ontario-input-offset: math.div((globalVariables.$touch-target-size - $ontario-r
 }
 
 .ontario-radios__hint-expander {
-	margin: spacing.$spacing-3 spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-2;
+	margin: spacing.$spacing-3 spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-0;
 
 	@media screen and (max-width: breakpoints.$small-breakpoint) {
 		margin-top: spacing.$spacing-4;

package/src/components/ontario-radio-buttons/ontario-radio-buttons.tsx

@@ -23,6 +23,7 @@ import {
 import { handleInputEvent } from '../../utils/events/event-handler';
 import { ErrorMessage } from '../../utils/components/error-message/error-message';
 import { ConsoleType } from '../../utils/console-message/console-message.enum';
+import { HeaderLanguageToggleEventDetails } from '../../utils/events/common-events.interface';
 
 import { default as translations } from '../../translations/global.i18n.json';
 
@@ -224,9 +225,13 @@ export class OntarioRadioButtons implements RadioButtons {
 		}
 	}
 
+	/**
+	 * Handles an update to the language should the user request a language update from the language toggle.
+	 * @param {CustomEvent} - The language that has been selected.
+	 */
 	@Listen('headerLanguageToggled', { target: 'window' })
-	handleHeaderLanguageToggled(event: CustomEvent<Language>) {
-		this.language = validateLanguage(event);
+	handleHeaderLanguageToggled(event: CustomEvent<HeaderLanguageToggleEventDetails>) {
+		this.language = validateLanguage(event.detail.newLanguage);
 	}
 
 	/**
@@ -431,7 +436,7 @@ export class OntarioRadioButtons implements RadioButtons {
 	render() {
 		const error = !!this.errorMessage;
 		return (
-			<div class={`ontario-form-group ${error ? 'ontario-input--error' : ''}`}>
+			<div class={error ? 'ontario-input--error' : ''}>
 				<fieldset class="ontario-fieldset" aria-describedby={this.hintTextId}>
 					{this.captionState.getCaption(undefined, !!this.internalHintExpander)}
 					{this.internalHintText && (

package/src/components/ontario-radio-buttons/test/ontario-radio-button.spec.tsx

@@ -10,7 +10,7 @@ describe('ontario-radio-buttons', () => {
 		expect(page.root).toEqualHtml(`
       <ontario-radio-buttons>
         <mock:shadow-root>
-          <div class="ontario-form-group">
+          <div>
             <fieldset class="ontario-fieldset">
                 <legend class="ontario-fieldset__legend">
                   <span class="ontario-label__flag">

package/src/components/ontario-search-box/ontario-search-box.scss

@@ -1,16 +1,21 @@
 @use 'sass:math';
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/fonts.variables' as fonts;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/line-heights.variables' as lineheight;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as globalFunctions;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/fonts.variables' as fonts;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/line-heights.variables' as lineheight;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as
+	globalFunctions;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as
 	focusPlaceholders;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/4-elements/_global.elements.scss';
-@use '../../styles/form.scss';
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/4-elements/_global.elements.scss';
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/7-overrides/_visibility.overrides.scss';
+
+@use '../../styles/fieldsets.scss';
+@use '../../styles/labels.scss';
+@use '../../styles/text-inputs.scss';
 
 $ontario-input-height: globalFunctions.px-to-rem(48);
 $ontario-search-icon-size: 2rem;

package/src/components/ontario-search-box/ontario-search-box.tsx

@@ -16,7 +16,7 @@ import {
 	InputInputEvent,
 } from '../../utils/events/event-handler.interface';
 
-import { default as translations } from '../../translations/global.i18n.json';
+import translations from '../../translations/global.i18n.json';
 
 @Component({
 	tag: 'ontario-search-box',
@@ -174,6 +174,8 @@ export class OntarioSearchBox {
 	 */
 	@State() hintTextId: string | null | undefined;
 
+	@State() translations: any = translations;
+
 	/**
 	 * Watch for changes to the `hintText` prop.
 	 *
@@ -198,7 +200,7 @@ export class OntarioSearchBox {
 		this.captionState = new InputCaption(
 			this.element.tagName,
 			newValue,
-			translations,
+			this.translations,
 			this.language,
 			false,
 			this.required,
@@ -339,7 +341,8 @@ export class OntarioSearchBox {
 						id="ontario-search-box__submit"
 						onClick={(e) => this.handleSearch(e)}
 					>
-						<span innerHTML={OntarioIconSearch} />
+						<span class="ontario-show-for-sr">{this.translations.header.submit[`${this.language}`]}</span>
+						<span innerHTML={OntarioIconSearch} aria-hidden="true" />
 					</button>
 				</div>
 			</form>

package/src/components/ontario-search-box/test/__snapshots__/ontario-search-box.spec.tsx.snap

@@ -9,7 +9,10 @@ exports[`ontario-search-box should render a default search box element 1`] = `
         <input aria-autocomplete="none" autocomplete="off" class="ontario-input ontario-search__input" id="ontario-search-input-field" name="search" required="" type="search" value="">
         <input class="ontario-search__reset" id="ontario-search-reset" type="reset" value="">
         <button class="ontario-search__submit" id="ontario-search-box__submit" type="submit">
-          <span></span>
+          <span class="ontario-show-for-sr">
+            Submit
+          </span>
+          <span aria-hidden="true"></span>
         </button>
       </div>
     </form>
@@ -26,7 +29,10 @@ exports[`ontario-search-box should render the expected html 1`] = `
         <input aria-autocomplete="none" autocomplete="off" class="ontario-input ontario-search__input" id="ontario-search-input-field" name="search" required="" type="search" value="">
         <input class="ontario-search__reset" id="ontario-search-reset" type="reset" value="">
         <button class="ontario-search__submit" id="ontario-search-box__submit" type="submit">
-          <span></span>
+          <span class="ontario-show-for-sr">
+            Submit
+          </span>
+          <span aria-hidden="true"></span>
         </button>
       </div>
     </form>

package/src/components/ontario-step-indicator/ontario-step-indicator.scss

@@ -1,8 +1,8 @@
 @use 'sass:math';
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/4-elements/_global.elements.scss';
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/4-elements/_global.elements.scss';
 @use '../ontario-button/ontario-button.scss';
 
 $ontario-icon-size: 24px;

package/src/components/ontario-step-indicator/ontario-step-indicator.tsx

@@ -2,6 +2,7 @@ import { Component, Prop, Element, h, State, Listen } from '@stencil/core';
 import { Language } from '../../utils/common/language-types';
 import { validateLanguage } from '../../utils/validation/validation-functions';
 import translations from '../../translations/global.i18n.json';
+import { HeaderLanguageToggleEventDetails } from '../../utils/events/common-events.interface';
 
 @Component({
 	tag: 'ontario-step-indicator',
@@ -66,9 +67,13 @@ export class OntarioStepIndicator {
 		}
 	}
 
+	/**
+	 * Handles an update to the language should the user request a language update from the language toggle.
+	 * @param {CustomEvent} - The language that has been selected.
+	 */
 	@Listen('headerLanguageToggled', { target: 'window' })
-	handleHeaderLanguageToggled(event: CustomEvent<Language>) {
-		this.language = validateLanguage(event);
+	handleHeaderLanguageToggled(event: CustomEvent<HeaderLanguageToggleEventDetails>) {
+		this.language = validateLanguage(event.detail.newLanguage);
 	}
 
 	@State() translations: any = translations;
@@ -89,13 +94,13 @@ export class OntarioStepIndicator {
 						<div class={`ontario-step-indicator--with-back-button--${this.showBackButton}`}>
 							{this.showBackButton === true && !this.backButtonUrl && (
 								<button class="ontario-button ontario-button--tertiary" onClick={(e) => this.handleCustomOnClick(e)}>
-									<ontario-icon-chevron-left colour="blue"></ontario-icon-chevron-left>
+									<ontario-icon-chevron-left colour="blue" aria-hidden="true"></ontario-icon-chevron-left>
 									{this.translations.stepIndicator.back[`${this.language}`]}
 								</button>
 							)}
 							{this.showBackButton === true && this.backButtonUrl && (
 								<a class="ontario-button ontario-button--tertiary" href={this.backButtonUrl}>
-									<ontario-icon-chevron-left colour="blue"></ontario-icon-chevron-left>
+									<ontario-icon-chevron-left colour="blue" aria-hidden="true"></ontario-icon-chevron-left>
 									{this.translations.stepIndicator.back[`${this.language}`]}
 								</a>
 							)}

package/src/components/ontario-table/ontario-table.scss

@@ -1,12 +1,13 @@
 @use 'sass:math';
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-sizes.variables' as fontSizes;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/line-heights.variables' as lineHeights;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/fonts.variables' as fonts;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as globalFunctions;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-sizes.variables' as fontSizes;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/line-heights.variables' as lineHeights;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/fonts.variables' as fonts;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as
+	globalFunctions;
 
 $ontario-table-caption-background: #0000001a;
 $ontario-table-total: #0077a056;

package/src/components/ontario-table/ontario-table.tsx

@@ -236,6 +236,7 @@ export class OntarioTable implements Table {
 								<img
 									class="ontario-table--highlight-indicator"
 									src={getAssetPath('./assets/highlight-indicator.svg')}
+									aria-hidden="true"
 								></img>
 							)}
 						</th>

package/src/components/ontario-table/test/__snapshots__/ontario-table.spec.tsx.snap

@@ -225,7 +225,7 @@ exports[`ontario-table snapshot - 5 columns (numeric) should render the expected
             <tr class="ontario-table-row--highlight">
               <th scope="row">
                 Forestry
-                <img class="ontario-table--highlight-indicator" src="/assets/highlight-indicator.svg">
+                <img aria-hidden="true" class="ontario-table--highlight-indicator" src="/assets/highlight-indicator.svg">
               </th>
               <td class="ontario-table-cell--numeric">
                 182

package/src/components/ontario-task/ontario-task.scss

@@ -1,29 +1,38 @@
 @use 'sass:math';
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as globalFunctions;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as
+	globalFunctions;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as
 	placeholders;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;
 
 .ontario-task {
 	border-bottom: globalFunctions.px-to-rem(2) solid colours.$ontario-greyscale-20;
-	padding: globalFunctions.px-to-rem(19) spacing.$spacing-0;
+	padding: globalFunctions.px-to-rem(20) spacing.$spacing-0;
 	list-style: none;
 
 	&__content {
 		display: flex;
+		flex-direction: row;
+		align-items: flex-start;
 		justify-content: space-between;
-		align-items: center;
+		gap: spacing.$spacing-4;
 
 		@media screen and (max-width: breakpoints.$small-breakpoint) {
-			display: flex;
 			flex-direction: column;
 			align-items: flex-start;
+			justify-content: flex-start;
+			gap: spacing.$spacing-2;
 		}
 	}
 
+	.ontario-task__text {
+		display: flex;
+		flex-direction: column;
+	}
+
 	&__label {
 		text-align: left;
 		margin: spacing.$spacing-0;
@@ -47,7 +56,7 @@
 
 	&__link {
 		display: block;
-		text-decoration: underline;
+		text-decoration: none;
 		color: colours.$ontario-colour-link;
 		font-weight: normal;
 	}
@@ -55,18 +64,33 @@
 	&__hint-text--true {
 		margin-bottom: spacing.$spacing-2;
 	}
+
+	&--error {
+		padding-left: spacing.$spacing-4;
+		border-left: globalFunctions.px-to-rem(4) solid colours.$ontario-colour-alert;
+		margin-left: globalFunctions.px-to-rem(-2);
+	}
+
+	.ontario-hint {
+		margin-bottom: spacing.$spacing-0;
+	}
 }
 
-.ontario-task__link:focus {
-	outline: none;
-	box-shadow: none;
+.ontario-task:focus-within {
+	outline: 4px solid colours.$ontario-colour-focus;
+}
 
+.ontario-task__link {
 	.ontario-task__label {
-		@extend %ontario-focus;
-		box-shadow: 0 0 0 4px colours.$ontario-colour-focus inset;
+		text-decoration: underline;
 	}
 }
 
+.ontario-task__link:focus {
+	outline: none;
+	box-shadow: none;
+}
+
 .ontario-task:has(.ontario-task__link) {
 	&:hover {
 		background-color: colours.$ontario-greyscale-5;
@@ -103,8 +127,4 @@
 
 ontario-hint-text::part(hint-text) {
 	margin: spacing.$spacing-0;
-
-	@media screen and (max-width: breakpoints.$small-breakpoint) {
-		margin-top: spacing.$spacing-2;
-	}
 }