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

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;
-	}
 }

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

@@ -1,4 +1,4 @@
-import { h, Component, Prop, Watch, State, Listen, Element, Fragment } from '@stencil/core';
+import { h, Component, Prop, Watch, State, Listen, Element } from '@stencil/core';
 import { ConsoleMessageClass } from '../../utils/console-message/console-message';
 import { TaskStatuses, TaskBadgeColour, TaskToBadgeColour } from '../../utils/common/task-statuses.enum';
 import { validateLanguage, validateValueAgainstArray } from '../../utils/validation/validation-functions';
@@ -7,6 +7,7 @@ import { Language } from '../../utils/common/language-types';
 import { constructHintTextObject } from '../../utils/components/hints/hints';
 import translations from '../../translations/global.i18n.json';
 import { HeadingLevel } from '../../utils/common/common.interface';
+import { HeaderLanguageToggleEventDetails } from '../../utils/events/common-events.interface';
 export type TaskHeadingLevel = Extract<HeadingLevel, 'h2' | 'h3' | 'h4'>;
 
 @Component({
@@ -165,12 +166,12 @@ export class OntarioTask {
 	}
 
 	/**
-	 * This listens for the `headerLanguageToggled` event sent from the language toggle when it is connected to the DOM.
-	 * It is used for changing the component language after the language toggle has been activated.
+	 * 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);
 	}
 
 	/**
@@ -254,7 +255,10 @@ export class OntarioTask {
 
 		return (
 			<div class="ontario-task__content">
-				{h(this.headingLevel, headingProps, this.label)}
+				<div class="ontario-task__text">
+					{h(this.headingLevel, headingProps, this.label)}
+					{this.renderHintText()}
+				</div>
 				{this.taskStatusState && (
 					<ontario-badge
 						class="ontario-task__badge"
@@ -270,7 +274,6 @@ export class OntarioTask {
 			</div>
 		);
 	}
-
 	/**
 	 * After the component loads, retrieve the hint text ID (if available) from the hintText component,
 	 * and set it for the `aria-describedby` attribute.
@@ -304,13 +307,6 @@ export class OntarioTask {
 		const taskStatusClass = `ontario-task-status--${this.taskStatusState.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()}`;
 		const describedBy = this.internalHintText ? `hint-text--${this.taskId}` : undefined;
 
-		const taskContent = (
-			<Fragment>
-				{this.renderTaskContent()}
-				{this.renderHintText()}
-			</Fragment>
-		);
-
 		return (
 			<li
 				class={`ontario-task ${taskStatusClass}`}
@@ -321,10 +317,10 @@ export class OntarioTask {
 			>
 				{isLinkActive ? (
 					<a href={this.link} class="ontario-task__link" aria-label={this.label}>
-						{taskContent}
+						{this.renderTaskContent()}
 					</a>
 				) : (
-					<div>{taskContent}</div>
+					<div>{this.renderTaskContent()}</div>
 				)}
 			</li>
 		);

package/src/components/ontario-task/test/ontario-task.spec.tsx

@@ -18,8 +18,10 @@ describe('ontario-task', () => {
 								<li aria-labelledby="task-label--task-1" class="ontario-task ontario-task-status--not-started" data-task-status="notStarted" role="group">
 											<div>
 													<div class="ontario-task__content">
+														<div class="ontario-task__text">
 															<h3 class="ontario-task__label" id="task-label--task-1"></h3>
-															<ontario-badge aria-label="Task Status: Not Started (notStarted)" class="ontario-task__badge" colour="lightTeal" role="status">
+														</div>
+														<ontario-badge aria-label="Task Status: Not Started (notStarted)" class="ontario-task__badge" colour="lightTeal" role="status">
 																	Not Started
 															</ontario-badge>
 													</div>

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

@@ -1,11 +1,13 @@
-@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/global.variables' as globalVariables;
-@use '@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/global.variables' as globalVariables;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;
 
 .ontario-task-list {
 	border-top: globalFunctions.px-to-rem(2) solid colours.$ontario-greyscale-20;
 	padding: spacing.$spacing-0;
+	margin: spacing.$spacing-0 spacing.$spacing-2;
 }
 
 .ontario-task-list__item {

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

@@ -1,12 +1,16 @@
-@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/fonts.variables' as fonts;
-@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/fonts.variables' as fonts;
+@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/1-variables/font-sizes.variables' as fontSizes;
-@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/1-variables/font-sizes.variables' as fontSizes;
+@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';
 @forward '../../utils/components/error-message/error-message';
 
 $ontario-textarea-border-width: 0.125rem;
@@ -22,7 +26,7 @@ $ontario-textarea-border-width: 0.125rem;
 	display: block;
 	max-width: globalVariables.$standard-width;
 	min-height: 144px;
-	margin: 0 0 spacing.$spacing-7;
+	margin: spacing.$spacing-0;
 	padding: 0.625rem spacing.$spacing-4;
 	transition: focusPlaceholders.$ontario-focus-transition;
 	white-space: pre-wrap;

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

@@ -17,6 +17,7 @@ import {
 	InputInputEvent,
 } from '../../utils/events/event-handler.interface';
 import { handleInputEvent } from '../../utils/events/event-handler';
+import { HeaderLanguageToggleEventDetails } from '../../utils/events/common-events.interface';
 
 import { default as translations } from '../../translations/global.i18n.json';
 import { ErrorMessage } from '../../utils/components/error-message/error-message';
@@ -186,9 +187,13 @@ export class OntarioTextarea implements Input {
 		}
 	}
 
+	/**
+	 * 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);
 	}
 
 	/**
@@ -330,7 +335,7 @@ export class OntarioTextarea implements Input {
 	render() {
 		const error = !!this.errorMessage;
 		return (
-			<div class={`ontario-form-group ${error ? 'ontario-textarea--error' : ''}`}>
+			<div class={error ? 'ontario-textarea--error' : ''}>
 				{this.captionState.getCaption(this.getId(), !!this.internalHintExpander)}
 				{this.internalHintText && (
 					<ontario-hint-text

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

@@ -3,7 +3,7 @@
 exports[`ontario-textarea snapshot should render the expected html 1`] = `
 <ontario-textarea caption="{&quot;captionText&quot;: &quot;Ontario Textarea&quot;}" element-id="ontario-textarea" name="ontario-textarea">
   <template shadowrootmode="open">
-    <div class="ontario-form-group">
+    <div>
       <label class="ontario-label" htmlfor="ontario-textarea">
         Ontario Textarea
         <span class="ontario-label__flag">

package/src/components/ontario-textarea/test/ontario-textarea.spec.tsx

@@ -21,7 +21,7 @@ describe('ontario-textarea', () => {
 			expect(page.root).toEqualHtml(`
 				<ontario-textarea name="ontario-textarea" element-id="ontario-textarea" caption='{"captionText": "Ontario Textarea"}'>
 					<mock:shadow-root>
-						<div class="ontario-form-group">
+						<div>
 							<label htmlfor="ontario-textarea" class="ontario-label">
 								Ontario Textarea
 								<span class="ontario-label__flag">