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

package/src/components/ontario-back-to-top/ontario-back-to-top.tsx

@@ -6,6 +6,7 @@ import { validateLanguage } from '../../utils/validation/validation-functions';
 
 import translations from '../../translations/global.i18n.json';
 import { isClientSideRendering } from '../../utils/common/environment';
+import { HeaderLanguageToggleEventDetails } from '../../utils/events/common-events.interface';
 
 @Component({
 	tag: 'ontario-back-to-top',
@@ -47,11 +48,14 @@ export class OntarioBackToTop {
 		}
 	}
 
+	/**
+	 * 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);
 	}
-
 	/**
 	 * Scroll to top functionality when the Back to Top button is clicked
 	 */

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

@@ -1,9 +1,10 @@
-@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/spacing.variables' as spacing;
-@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/font-sizes.variables' as fontSizes;
-@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/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/spacing.variables' as spacing;
+@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/font-sizes.variables' as fontSizes;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as
+	globalFunctions;
 
 .ontario-badge__container {
 	display: flex;

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

@@ -1,11 +1,12 @@
-@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 lineHeights;
-@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 '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 lineHeights;
+@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;
 
 .ontario-blockquote {
 	border-left: 4px solid colours.$ontario-greyscale-70;

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

@@ -1,13 +1,13 @@
 @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/font-weights.variables' as fontWeights;
-@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/breakpoints.variables' as breakpoints;
+@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/fonts.variables' as fonts;
+@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/2-tools/placeholder/focus.placeholders' as
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as
 	focusPlaceholders;
 
 $ontario-button-bg-primary: colours.$ontario-colour-link;
@@ -15,6 +15,12 @@ $ontario-button-bg-primary--hover: colours.$ontario-colour-link--hover;
 $ontario-button-bg-primary--active: colours.$ontario-colour-link--active;
 $ontario-button-bg-secondary: colours.$ontario-colour-white;
 
+// Make the host box-level so its width/height/margins apply (was inline by default).
+// This also stabilizes VRT by giving the component predictable intrinsic sizing.
+:host {
+	display: inline-block;
+}
+
 .ontario-button {
 	border: none;
 	border-radius: globalVariables.$global-radius;
@@ -25,7 +31,7 @@ $ontario-button-bg-secondary: colours.$ontario-colour-white;
 	font-family: fonts.$ontario-font-open-sans;
 	font-weight: fontWeights.$ontario-font-weights-semi-bold;
 	line-height: math.div(14, 9);
-	margin: spacing.$spacing-0 (spacing.$spacing-4 + spacing.$spacing-3) spacing.$spacing-5 spacing.$spacing-0;
+	margin: spacing.$spacing-0;
 	min-width: 10rem;
 	padding: math.div((spacing.$spacing-4 + spacing.$spacing-1), 2) spacing.$spacing-5;
 	text-align: center;

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

@@ -1,7 +1,7 @@
-@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/global.variables' as globalVariables;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/4-elements/global.elements';
+@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/global.variables' as globalVariables;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/4-elements/global.elements';
 
 .ontario-callout {
 	border-left: spacing.$spacing-1 solid colours.$ontario-colour-dark-teal;
@@ -12,7 +12,8 @@
 	* {
 		max-width: globalVariables.$standard-width;
 
-		&:last-child {
+		&:last-child,
+		&:last-of-type {
 			margin-bottom: spacing.$spacing-2;
 		}
 	}

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

@@ -1,14 +1,15 @@
 @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/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/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 '@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/2-tools/functions/global.functions' as globalFunctions;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/typography.variables' as typography;
+@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/font-sizes.variables' as fontSizes;
+@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/typography.variables' as typography;
 
 .ontario-card {
 	box-shadow: 0rem 0.1875rem 0.5rem 0.0625rem rgba(0, 0, 0, 0.4);

package/src/components/ontario-card-collection/ontario-card-collection.scss

@@ -1,6 +1,6 @@
 @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/breakpoints.variables' as breakpoints;
+@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;
 
 .ontario-card-collection__container {
 	display: flex;

package/src/components/ontario-checkbox/ontario-checkboxes.scss

@@ -1,15 +1,17 @@
 @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/2-tools/functions/global.functions' as globalFunctions;
-@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/z-index.variables' as zIndex;
-
-@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/1-variables/global.variables' as globalVariables;
+@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/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/z-index.variables' as zIndex;
+@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-checkboxes-size: globalFunctions.px-to-rem(28);
@@ -22,7 +24,6 @@ $ontario-checkbox-box-shadow-outline: globalFunctions.px-to-rem(4);
 }
 
 .ontario-checkboxes {
-	margin-bottom: spacing.$spacing-7;
 	max-width: globalVariables.$standard-width;
 }
 
@@ -37,6 +38,14 @@ $ontario-checkbox-box-shadow-outline: globalFunctions.px-to-rem(4);
 		margin: 0;
 	}
 
+	.ontario-checkboxes__hint-expander {
+		margin: spacing.$spacing-3 0 0 spacing.$spacing-3;
+
+		@media screen and (max-width: breakpoints.$small-breakpoint) {
+			margin-top: spacing.$spacing-4;
+		}
+	}
+
 	@media screen and (max-width: breakpoints.$small-breakpoint) {
 		padding: 0 0 0 spacing.$spacing-7;
 		min-height: $ontario-checkboxes-size-mobile;
@@ -136,7 +145,7 @@ $ontario-checkbox-box-shadow-outline: globalFunctions.px-to-rem(4);
 }
 
 .ontario-checkboxes__hint-expander {
-	margin: spacing.$spacing-3 0 0 spacing.$spacing-2;
+	margin: spacing.$spacing-3 0 0 0;
 
 	@media screen and (max-width: breakpoints.$small-breakpoint) {
 		margin-top: spacing.$spacing-4;

package/src/components/ontario-checkbox/ontario-checkboxes.tsx

@@ -25,6 +25,7 @@ import { handleInputEvent } from '../../utils/events/event-handler';
 
 import { default as translations } from '../../translations/global.i18n.json';
 import { ErrorMessage } from '../../utils/components/error-message/error-message';
+import { HeaderLanguageToggleEventDetails } from '../../utils/events/common-events.interface';
 
 @Component({
 	tag: 'ontario-checkboxes',
@@ -220,9 +221,13 @@ export class OntarioCheckboxes implements Checkboxes {
 		}
 	}
 
+	/**
+	 * 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);
 	}
 
 	/**
@@ -424,7 +429,7 @@ export class OntarioCheckboxes implements Checkboxes {
 	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-checkbox/test/ontario-checkboxes.spec.tsx

@@ -10,7 +10,7 @@ describe('ontario-checkbox', () => {
 		expect(page.root).toEqualHtml(`
       <ontario-checkboxes>
         <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-critical-alert/ontario-critical-alert.scss

@@ -1,7 +1,7 @@
-@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/font-weights.variables' as fontWeights;
-@use '../../styles/grid.scss';
+@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/font-weights.variables' as fontWeights;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/5-layout/_grid.layout.scss';
 
 $ontario-critical-alert-icon-size: 28px;
 $ontario-critical-alert-z-index: 10;

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

@@ -73,7 +73,11 @@ export class OntarioCriticalAlert implements CriticalAlert {
 				<div class="ontario-row">
 					<div class="ontario-column ontario-small-12">
 						<div class="ontario-critical-alert__body">
-							<div class="ontario-critical-alert__icon" innerHTML={OntarioIconCriticalAlertWarning}></div>
+							<div
+								class="ontario-critical-alert__icon"
+								innerHTML={OntarioIconCriticalAlertWarning}
+								aria-hidden="true"
+							></div>
 							{this.renderContent()}
 						</div>
 					</div>

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

@@ -14,7 +14,7 @@ describe('ontario-critical-alert', () => {
 						<div class="ontario-row">
 							<div class="ontario-column ontario-small-12">
 								<div class="ontario-critical-alert__body">
-									<div class="ontario-critical-alert__icon"></div>
+									<div aria-hidden="true" class="ontario-critical-alert__icon"></div>
 									<p>
 										This is the critical alert content
 									</p>
@@ -39,7 +39,7 @@ describe('ontario-critical-alert', () => {
 						<div class="ontario-row">
 							<div class="ontario-column ontario-small-12">
 								<div class="ontario-critical-alert__body">
-									<div class="ontario-critical-alert__icon"></div>
+									<div aria-hidden="true" class="ontario-critical-alert__icon"></div>
 									<p>
 										I am the critical alert content that will display
 									</p>

package/src/components/ontario-date-input/ontario-date-input.scss

@@ -1,9 +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/1-variables/spacing.variables' as spacing;
-@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/global.variables' as globalVariables;
-@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/colours.variables' as colours;
+@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/font-weights.variables' as fontWeights;
+@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/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-date__group {

package/src/components/ontario-date-input/ontario-date-input.tsx

@@ -12,6 +12,7 @@ import { ConsoleType } from '../../utils/console-message/console-message.enum';
 import { InputCaption } from '../../utils/common/input-caption/input-caption';
 import { Caption } from '../../utils/common/input-caption/caption.interface';
 import { emitEvent } from '../../utils/events/event-handler';
+import { HeaderLanguageToggleEventDetails } from '../../utils/events/common-events.interface';
 
 @Component({
 	tag: 'ontario-date-input',
@@ -149,9 +150,13 @@ export class OntarioDateInput {
 		}
 	}
 
+	/**
+	 * 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);
 	}
 
 	@Listen('blur', { capture: true })
@@ -386,67 +391,65 @@ export class OntarioDateInput {
 		const hintTextId = this.getHintTextId();
 
 		return (
-			<div class="ontario-form-group">
-				<fieldset role="group" class="ontario-fieldset">
-					{this.captionState.getCaption()}
-					{!!hintText && (
-						<p id={hintTextId} class="ontario-hint">
-							{hintText}
-						</p>
+			<fieldset role="group" class="ontario-fieldset">
+				{this.captionState.getCaption()}
+				{!!hintText && (
+					<p id={hintTextId} class="ontario-hint">
+						{hintText}
+					</p>
+				)}
+				<ErrorMessage message={this.errorMessage} error={this.isInvalidDate()} />
+				<div class="ontario-date__group">
+					{yearVisible && (
+						<Input
+							id={yearId}
+							type="year"
+							label={dateStrings.year.label[language]}
+							accessibilityLabel={dateStrings.year.accessibility[language]}
+							required={!!required}
+							error={this.yearInvalid}
+							placeholder={placeholderText.year}
+							onInput={this.handleDateInput}
+							onChange={this.handleDateChanged}
+							onBlur={this.handleDateBlur}
+							onFocus={this.handleDateFocus}
+							ariaDescribedBy={hintTextId}
+						/>
+					)}
+					{monthVisible && (
+						<Input
+							id={monthId}
+							type="month"
+							label={dateStrings.month.label[language]}
+							accessibilityLabel={dateStrings.month.accessibility[language]}
+							required={!!required}
+							error={this.monthInvalid}
+							placeholder={placeholderText.month}
+							onInput={this.handleDateInput}
+							onChange={this.handleDateChanged}
+							onBlur={this.handleDateBlur}
+							onFocus={this.handleDateFocus}
+							ariaDescribedBy={hintTextId}
+						/>
+					)}
+					{dayVisible && (
+						<Input
+							id={dayId}
+							type="day"
+							label={dateStrings.day.label[language]}
+							accessibilityLabel={dateStrings.day.accessibility[language]}
+							required={!!required}
+							error={this.dayInvalid}
+							placeholder={placeholderText.day}
+							onInput={this.handleDateInput}
+							onChange={this.handleDateChanged}
+							onBlur={this.handleDateBlur}
+							onFocus={this.handleDateFocus}
+							ariaDescribedBy={hintTextId}
+						/>
 					)}
-					<ErrorMessage message={this.errorMessage} error={this.isInvalidDate()} />
-					<div class="ontario-date__group">
-						{yearVisible && (
-							<Input
-								id={yearId}
-								type="year"
-								label={dateStrings.year.label[language]}
-								accessibilityLabel={dateStrings.year.accessibility[language]}
-								required={!!required}
-								error={this.yearInvalid}
-								placeholder={placeholderText.year}
-								onInput={this.handleDateInput}
-								onChange={this.handleDateChanged}
-								onBlur={this.handleDateBlur}
-								onFocus={this.handleDateFocus}
-								ariaDescribedBy={hintTextId}
-							/>
-						)}
-						{monthVisible && (
-							<Input
-								id={monthId}
-								type="month"
-								label={dateStrings.month.label[language]}
-								accessibilityLabel={dateStrings.month.accessibility[language]}
-								required={!!required}
-								error={this.monthInvalid}
-								placeholder={placeholderText.month}
-								onInput={this.handleDateInput}
-								onChange={this.handleDateChanged}
-								onBlur={this.handleDateBlur}
-								onFocus={this.handleDateFocus}
-								ariaDescribedBy={hintTextId}
-							/>
-						)}
-						{dayVisible && (
-							<Input
-								id={dayId}
-								type="day"
-								label={dateStrings.day.label[language]}
-								accessibilityLabel={dateStrings.day.accessibility[language]}
-								required={!!required}
-								error={this.dayInvalid}
-								placeholder={placeholderText.day}
-								onInput={this.handleDateInput}
-								onChange={this.handleDateChanged}
-								onBlur={this.handleDateBlur}
-								onFocus={this.handleDateFocus}
-								ariaDescribedBy={hintTextId}
-							/>
-						)}
-					</div>
-				</fieldset>
-			</div>
+				</div>
+			</fieldset>
 		);
 	}
 }