Skip to content

Commit 22723d4

Browse files
fcollonvalfcollonval
committed
Use 'aria-invalid' to style as error
1 parent 996adbc commit 22723d4

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+142
-229
lines changed

‎packages/components/src/checkbox/checkbox.stories.ts‎

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
import type { Meta, StoryFn, StoryObj } from '@storybook/html';
44
import { action } from '@storybook/addon-actions';
55
import { Checkbox } from './index';
6-
import { withForm } from '../utilities/storybook';
76

87
export default {
98
title: 'Components/Checkbox',
@@ -12,8 +11,7 @@ export default {
1211
checked: { control: 'boolean' },
1312
disabled: { control: 'boolean' },
1413
indeterminate: { control: 'boolean' },
15-
errorMessage: { control: 'text' },
16-
inForm: { control: 'boolean' },
14+
invalid: { control: 'boolean' },
1715
onChange: {
1816
action: 'changed',
1917
table: {
@@ -27,7 +25,7 @@ export default {
2725
}
2826
}
2927
},
30-
decorators: [withForm]
28+
decorators: []
3129
} as Meta;
3230

3331
const Template: StoryFn = (args): HTMLElement => {
@@ -37,7 +35,7 @@ const Template: StoryFn = (args): HTMLElement => {
3735
`<jp-checkbox
3836
${args.checked ? 'checked' : ''}
3937
${args.disabled ? 'disabled' : ''}
40-
${args.errorMessage ? `error-message="${args.errorMessage}"` : ''}
38+
${args.invalid ? `aria-invalid="${args.invalid}"` : ''}
4139
>
4240
${args.label}
4341
</jp-checkbox>`
@@ -65,10 +63,9 @@ Default.args = {
6563
checked: false,
6664
disabled: false,
6765
indeterminate: false,
68-
errorMessage: '',
66+
invalid: false,
6967
onChange: action('change'),
70-
onInvalid: action('invalid'),
71-
inForm: false
68+
onInvalid: action('invalid')
7269
};
7370

7471
export const WithChecked: StoryObj = { render: Template.bind({}) };
@@ -92,5 +89,5 @@ WithIndeterminate.args = {
9289
export const WithError: StoryObj = { render: Template.bind({}) };
9390
WithError.args = {
9491
...Default.args,
95-
errorMessage: 'Invalid checkbox value'
92+
invalid: true
9693
};

‎packages/components/src/checkbox/checkbox.styles.ts‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ export const checkboxStyles: FoundationElementTemplate<
7272
cursor: pointer;
7373
}
7474
75-
:host(.invalid) .control {
75+
:host([aria-invalid='true']) .control {
7676
border-color: ${errorFillRest};
7777
}
7878
@@ -124,11 +124,11 @@ export const checkboxStyles: FoundationElementTemplate<
124124
border-color: ${neutralStrokeActive};
125125
}
126126
127-
:host(.invalid:not([disabled])) .control:hover {
127+
:host([aria-invalid='true']:not([disabled])) .control:hover {
128128
border-color: ${errorFillHover};
129129
}
130130
131-
:host(.invalid:not([disabled])) .control:active {
131+
:host([aria-invalid='true']:not([disabled])) .control:active {
132132
border-color: ${errorFillActive};
133133
}
134134
@@ -137,7 +137,7 @@ export const checkboxStyles: FoundationElementTemplate<
137137
outline-offset: 2px;
138138
}
139139
140-
:host(.invalid:${focusVisible}) .control {
140+
:host([aria-invalid='true']:${focusVisible}) .control {
141141
outline-color: ${errorFillFocus};
142142
}
143143
@@ -151,12 +151,13 @@ export const checkboxStyles: FoundationElementTemplate<
151151
border: calc(${strokeWidth} * 1px) solid ${accentFillHover};
152152
}
153153
154-
:host(.invalid[aria-checked='true']) .control {
154+
:host([aria-invalid='true'][aria-checked='true']) .control {
155155
background-color: ${errorFillRest};
156156
border-color: ${errorFillRest};
157157
}
158158
159-
:host(.invalid[aria-checked='true']:not([disabled])) .control:hover {
159+
:host([aria-invalid='true'][aria-checked='true']:not([disabled]))
160+
.control:hover {
160161
background-color: ${errorFillHover};
161162
border-color: ${errorFillHover};
162163
}
@@ -178,7 +179,8 @@ export const checkboxStyles: FoundationElementTemplate<
178179
border: calc(${strokeWidth} * 1px) solid ${accentFillActive};
179180
}
180181
181-
:host(.invalid[aria-checked='true']:not([disabled])) .control:active {
182+
:host([aria-invalid='true'][aria-checked='true']:not([disabled]))
183+
.control:active {
182184
background-color: ${errorFillActive};
183185
border-color: ${errorFillActive};
184186
}
@@ -200,7 +202,7 @@ export const checkboxStyles: FoundationElementTemplate<
200202
outline-offset: 2px;
201203
}
202204
203-
:host(.invalid[aria-checked="true"]:${focusVisible}:not([disabled])) .control {
205+
:host([aria-invalid='true'][aria-checked="true"]:${focusVisible}:not([disabled])) .control {
204206
outline-color: ${errorFillFocus};
205207
}
206208
@@ -226,7 +228,7 @@ export const checkboxStyles: FoundationElementTemplate<
226228
border-color: ${SystemColors.FieldText};
227229
background: ${SystemColors.Field};
228230
}
229-
:host(.invalid) .control {
231+
:host([aria-invalid='true']) .control {
230232
border-style: dashed;
231233
}
232234
.checked-indicator {

‎packages/components/src/checkbox/index.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import {
88
FoundationElementTemplate
99
} from '@microsoft/fast-foundation';
1010
import { checkboxStyles as styles } from './checkbox.styles.js';
11-
import { ErrorMessageMixin } from '../validation.js';
1211
import { ViewTemplate, html, slotted } from '@microsoft/fast-element';
1312

1413
/**
@@ -53,7 +52,7 @@ export const checkboxTemplate: FoundationElementTemplate<
5352
* Base class for Checkbox
5453
* @public
5554
*/
56-
export class Checkbox extends ErrorMessageMixin(BaseCheckbox) {
55+
export class Checkbox extends BaseCheckbox {
5756
indeterminateChanged(prev: boolean, next: boolean): void {
5857
if (this.indeterminate) {
5958
this.classList.add('indeterminate');

‎packages/components/src/combobox/combobox.stories.ts‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33

44
import type { StoryFn, Meta, StoryObj } from '@storybook/html';
55
import { action } from '@storybook/addon-actions';
6-
import { getFaIcon, withForm } from '../utilities/storybook';
6+
import { getFaIcon, } from '../utilities/storybook';
77
import { Combobox } from './index';
88

99
export default {
@@ -32,7 +32,7 @@ export default {
3232
}
3333
}
3434
},
35-
decorators: [withForm]
35+
decorators: []
3636
} as Meta;
3737

3838
const nameList = [
@@ -60,7 +60,7 @@ const Template: StoryFn = (args): HTMLElement => {
6060
${args.minimal ? 'minimal' : ''}
6161
${args.autowidth ? 'autowidth' : ''}
6262
${args.autocomplete !== 'none' ? `autocomplete=${args.autocomplete}` : ''}
63-
${args.errorMessage ? `error-message="${args.errorMessage}"` : ''}
63+
${args.invalid ? `aria-invalid="${args.invalid}"` : ''}
6464
>
6565
${args.customIndicator ? getFaIcon('sliders-h', 'indicator') : ''}
6666
${new Array(args.numberOfChildren ?? 10)
@@ -100,10 +100,9 @@ Default.args = {
100100
minimal: false,
101101
autowidth: false,
102102
autocomplete: 'none',
103-
errorMessage: '',
103+
invalid: false,
104104
onChange: action('change'),
105105
onInvalid: action('invalid'),
106-
inForm: false
107106
};
108107

109108
export const WithOpen: StoryObj = { render: Template.bind({}) };
@@ -133,5 +132,5 @@ WithCustomIndicator.args = {
133132
export const WithError: StoryObj = { render: Template.bind({}) };
134133
WithError.args = {
135134
...Default.args,
136-
errorMessage: 'Invalid combobox value'
135+
invalid: true
137136
};

‎packages/components/src/combobox/combobox.styles.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ export const comboboxStyles: FoundationElementTemplate<
4545
${accentFillFocus};
4646
}
4747
48-
:host(.invalid:focus-within:not([disabled])) {
48+
:host([aria-invalid='true']:focus-within:not([disabled])) {
4949
border-color: ${errorFillFocus};
5050
box-shadow: 0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px)
5151
${errorFillFocus};

‎packages/components/src/combobox/index.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,12 @@ import {
1010
} from '@microsoft/fast-foundation';
1111
import { heightNumberAsToken } from '../design-tokens.js';
1212
import { comboboxStyles as styles } from './combobox.styles.js';
13-
import { ErrorMessageMixin } from '../validation.js';
1413

1514
/**
1615
* Base class for Combobox.
1716
* @public
1817
*/
19-
export class Combobox extends ErrorMessageMixin(FoundationCombobox) {
18+
export class Combobox extends FoundationCombobox {
2019
/**
2120
* Whether the combobox has a compact layout or not.
2221
*

‎packages/components/src/date-field/date-field.stories.ts‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33

44
import type { StoryFn, Meta, StoryObj } from '@storybook/html';
55
import { action } from '@storybook/addon-actions';
6-
import { getFaIcon, withForm } from '../utilities/storybook';
6+
import { getFaIcon } from '../utilities/storybook';
77
import { DateField } from './index';
88

99
export default {
@@ -29,7 +29,7 @@ export default {
2929
}
3030
}
3131
},
32-
decorators: [withForm]
32+
decorators: []
3333
} as Meta;
3434

3535
const Template: StoryFn = (args, context): HTMLElement => {
@@ -40,7 +40,7 @@ const Template: StoryFn = (args, context): HTMLElement => {
4040
${args.readonly ? 'readonly=""' : ''}
4141
${args.disabled ? 'disabled=""' : ''}
4242
${args.autofocus ? 'autofocus' : ''}
43-
${args.errorMessage ? `error-message="${args.errorMessage}"` : ''}
43+
${args.invalid ? `aria-invalid="${args.invalid}"` : ''}
4444
>
4545
${args.startIcon ? getFaIcon('search', 'start') : ''}
4646
${args.label}
@@ -73,10 +73,9 @@ Default.args = {
7373
autofocus: false,
7474
startIcon: false,
7575
endIcon: false,
76-
errorMessage: '',
76+
invalid: false,
7777
onChange: action('change'),
78-
onInvalid: action('invalid'),
79-
inForm: false
78+
onInvalid: action('invalid')
8079
};
8180

8281
export const WithAutofocus: StoryObj = { render: Template.bind({}) };
@@ -112,5 +111,5 @@ WithEndIcon.args = {
112111
export const WithError: StoryObj = { render: Template.bind({}) };
113112
WithError.args = {
114113
...Default.args,
115-
errorMessage: 'Invalid date value'
114+
invalid: true
116115
};

‎packages/components/src/date-field/date-field.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@ import {
1717
import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
1818
import { FormAssociatedDateField } from './date-field.form-associated';
1919
import { nullableDateConverter } from '../converters';
20-
import { ErrorMessageMixin } from '../validation';
2120

2221
/**
2322
* Number field appearances
@@ -353,4 +352,4 @@ export class DateField extends FormAssociatedDateField {
353352
* @internal
354353
*/
355354
export interface DateField extends StartEnd, DelegatesARIATextbox {}
356-
applyMixins(DateField, StartEnd, DelegatesARIATextbox, ErrorMessageMixin);
355+
applyMixins(DateField, StartEnd, DelegatesARIATextbox);

‎packages/components/src/number-field/index.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import {
99
numberFieldTemplate as template
1010
} from '@microsoft/fast-foundation';
1111
import { numberFieldStyles as styles } from './number-field.styles.js';
12-
import { ErrorMessageMixin } from '../validation.js';
1312

1413
/**
1514
* Number field appearances
@@ -20,7 +19,7 @@ export type NumberFieldAppearance = 'filled' | 'outline';
2019
/**
2120
* @internal
2221
*/
23-
export class NumberField extends ErrorMessageMixin(FoundationNumberField) {
22+
export class NumberField extends FoundationNumberField {
2423
/**
2524
* The appearance of the element.
2625
*

‎packages/components/src/number-field/number-field.stories.ts‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33

44
import type { StoryFn, Meta, StoryObj } from '@storybook/html';
55
import { action } from '@storybook/addon-actions';
6-
import { getFaIcon, withForm } from '../utilities/storybook';
6+
import { getFaIcon } from '../utilities/storybook';
77
import { NumberField } from './index';
88

99
export default {
@@ -33,7 +33,7 @@ export default {
3333
}
3434
}
3535
},
36-
decorators: [withForm]
36+
decorators: []
3737
} as Meta;
3838

3939
const Template: StoryFn = (args, context): HTMLElement => {
@@ -48,7 +48,7 @@ const Template: StoryFn = (args, context): HTMLElement => {
4848
${args.disabled ? 'disabled' : ''}
4949
${args.autofocus ? 'autofocus' : ''}
5050
appearance="${args.appearance}"
51-
${args.errorMessage ? `error-message="${args.errorMessage}"` : ''}
51+
${args.invalid ? `aria-invalid="${args.invalid}"` : ''}
5252
>
5353
${args.startIcon ? getFaIcon('search', 'start') : ''}
5454
${args.label}
@@ -85,10 +85,9 @@ Default.args = {
8585
startIcon: false,
8686
endIcon: false,
8787
appearance: 'outline',
88-
errorMessage: '',
88+
invalid: false,
8989
onChange: action('change'),
90-
onInvalid: action('invalid'),
91-
inForm: false
90+
onInvalid: action('invalid')
9291
};
9392

9493
export const WithPlaceholder: StoryObj = { render: Template.bind({}) };
@@ -144,5 +143,5 @@ WithEndIcon.args = {
144143
export const WithError: StoryObj = { render: Template.bind({}) };
145144
WithError.args = {
146145
...Default.args,
147-
errorMessage: 'Invalid number value'
146+
invalid: true
148147
};

0 commit comments

Comments
 (0)