@instructure/ui-text-input 10.12.0 → 10.12.1-snapshot-1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/es/TextInput/__new-tests__/TextInput.test.js +12 -40
  3. package/es/TextInput/index.js +0 -3
  4. package/lib/TextInput/__new-tests__/TextInput.test.js +12 -40
  5. package/lib/TextInput/index.js +0 -3
  6. package/package.json +16 -16
  7. package/src/TextInput/__new-tests__/TextInput.test.tsx +3 -51
  8. package/src/TextInput/index.tsx +0 -7
  9. package/tsconfig.build.tsbuildinfo +1 -1
  10. package/types/TextInput/index.d.ts.map +1 -1
package/CHANGELOG.md CHANGED
@@ -3,6 +3,17 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [10.12.1-snapshot-1](https://github.com/instructure/instructure-ui/compare/v10.12.0...v10.12.1-snapshot-1) (2025-03-03)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **many:** fix form label not read by NVDA in hover mode and other layout issues ([ef77281](https://github.com/instructure/instructure-ui/commit/ef77281890511e8eea794196445d3ef2454537ba))
12
+
13
+
14
+
15
+
16
+
6
17
  # [10.12.0](https://github.com/instructure/instructure-ui/compare/v10.11.0...v10.12.0) (2025-02-24)
7
18
 
8
19
 
package/es/TextInput/__new-tests__/TextInput.test.js CHANGED
@@ -1,4 +1,4 @@
1
- var _TextInput, _TextInput2, _TextInput3, _TextInput4, _TextInput5, _TextInput6;
1
+ var _TextInput, _TextInput2, _TextInput3, _TextInput4, _TextInput5, _TextInput6, _TextInput7;
2
2
  /*
3
3
  * The MIT License (MIT)
4
4
  *
@@ -85,41 +85,13 @@ describe('<TextInput/>', () => {
85
85
  }));
86
86
  expect((_ref2 = ref) === null || _ref2 === void 0 ? void 0 : _ref2.value).toBe('bar');
87
87
  });
88
- it('should provide messageId to FormField', async () => {
89
- render(/*#__PURE__*/React.createElement(TextInput, {
88
+ it('should let aria-describedby through', async () => {
89
+ render(_TextInput2 || (_TextInput2 = /*#__PURE__*/React.createElement(TextInput, {
90
90
  renderLabel: "Name",
91
- messages: [{
92
- text: 'yup',
93
- type: 'error'
94
- }]
95
- }));
91
+ "aria-describedby": "abcd"
92
+ })));
96
93
  const input = screen.getByRole('textbox');
97
- expect(input).toHaveAttribute('aria-describedby');
98
- });
99
- it('should have equal messagesId and aria-describedby values', async () => {
100
- const _render2 = render(/*#__PURE__*/React.createElement(TextInput, {
101
- renderLabel: "Name",
102
- messages: [{
103
- text: 'yup',
104
- type: 'error'
105
- }]
106
- })),
107
- container = _render2.container;
108
- const id = screen.getByRole('textbox').getAttribute('aria-describedby');
109
- const messages = container.querySelector('span[class$="-formFieldMessages"]');
110
- expect(messages).toHaveAttribute('id', id);
111
- });
112
- it('should handle multiple aria-describedby ids', async () => {
113
- render(/*#__PURE__*/React.createElement(TextInput, {
114
- renderLabel: "Name",
115
- "aria-describedby": "assistive-id",
116
- messages: [{
117
- text: 'yup',
118
- type: 'error'
119
- }]
120
- }));
121
- const ids = screen.getByRole('textbox').getAttribute('aria-describedby');
122
- expect(ids).toMatch('assistive-id TextInput-messages');
94
+ expect(input).toHaveAttribute('aria-describedby', 'abcd');
123
95
  });
124
96
  describe('events', () => {
125
97
  it('responds to onChange event', async () => {
@@ -165,7 +137,7 @@ describe('<TextInput/>', () => {
165
137
  });
166
138
  describe('interaction', () => {
167
139
  it('should set the disabled attribute when `interaction` is disabled', async () => {
168
- render(_TextInput2 || (_TextInput2 = /*#__PURE__*/React.createElement(TextInput, {
140
+ render(_TextInput3 || (_TextInput3 = /*#__PURE__*/React.createElement(TextInput, {
169
141
  renderLabel: "Name",
170
142
  interaction: "disabled"
171
143
  })));
@@ -173,7 +145,7 @@ describe('<TextInput/>', () => {
173
145
  expect(input).toHaveAttribute('disabled');
174
146
  });
175
147
  it('should set the disabled attribute when `disabled` is set', async () => {
176
- render(_TextInput3 || (_TextInput3 = /*#__PURE__*/React.createElement(TextInput, {
148
+ render(_TextInput4 || (_TextInput4 = /*#__PURE__*/React.createElement(TextInput, {
177
149
  renderLabel: "Name",
178
150
  disabled: true
179
151
  })));
@@ -181,7 +153,7 @@ describe('<TextInput/>', () => {
181
153
  expect(input).toHaveAttribute('disabled');
182
154
  });
183
155
  it('should set the readonly attribute when `interaction` is readonly', async () => {
184
- render(_TextInput4 || (_TextInput4 = /*#__PURE__*/React.createElement(TextInput, {
156
+ render(_TextInput5 || (_TextInput5 = /*#__PURE__*/React.createElement(TextInput, {
185
157
  renderLabel: "Name",
186
158
  interaction: "readonly"
187
159
  })));
@@ -189,7 +161,7 @@ describe('<TextInput/>', () => {
189
161
  expect(input).toHaveAttribute('readonly');
190
162
  });
191
163
  it('should set the readonly attribute when `readOnly` is set', async () => {
192
- render(_TextInput5 || (_TextInput5 = /*#__PURE__*/React.createElement(TextInput, {
164
+ render(_TextInput6 || (_TextInput6 = /*#__PURE__*/React.createElement(TextInput, {
193
165
  renderLabel: "Name",
194
166
  readOnly: true
195
167
  })));
@@ -199,10 +171,10 @@ describe('<TextInput/>', () => {
199
171
  });
200
172
  describe('for a11y', () => {
201
173
  it('should meet standards', async () => {
202
- const _render3 = render(_TextInput6 || (_TextInput6 = /*#__PURE__*/React.createElement(TextInput, {
174
+ const _render2 = render(_TextInput7 || (_TextInput7 = /*#__PURE__*/React.createElement(TextInput, {
203
175
  renderLabel: "Name"
204
176
  }))),
205
- container = _render3.container;
177
+ container = _render2.container;
206
178
  const axeCheck = await runAxeCheck(container);
207
179
  expect(axeCheck).toBe(true);
208
180
  });
package/es/TextInput/index.js CHANGED
@@ -186,9 +186,6 @@ let TextInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
186
186
  if (props['aria-describedby']) {
187
187
  descriptionIds = `${props['aria-describedby']}`;
188
188
  }
189
- if (this.hasMessages) {
190
- descriptionIds = descriptionIds !== '' ? `${descriptionIds} ${this._messagesId}` : this._messagesId;
191
- }
192
189
  return jsx("input", Object.assign({}, props, {
193
190
  css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.textInput,
194
191
  defaultValue: defaultValue,
package/lib/TextInput/__new-tests__/TextInput.test.js CHANGED
@@ -8,7 +8,7 @@ var _vitest = require("vitest");
8
8
  require("@testing-library/jest-dom");
9
9
  var _runAxeCheck = require("@instructure/ui-axe-check/lib/runAxeCheck.js");
10
10
  var _index = require("../index");
11
- var _TextInput, _TextInput2, _TextInput3, _TextInput4, _TextInput5, _TextInput6;
11
+ var _TextInput, _TextInput2, _TextInput3, _TextInput4, _TextInput5, _TextInput6, _TextInput7;
12
12
  /*
13
13
  * The MIT License (MIT)
14
14
  *
@@ -87,41 +87,13 @@ describe('<TextInput/>', () => {
87
87
  }));
88
88
  expect((_ref2 = ref) === null || _ref2 === void 0 ? void 0 : _ref2.value).toBe('bar');
89
89
  });
90
- it('should provide messageId to FormField', async () => {
91
- (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.TextInput, {
90
+ it('should let aria-describedby through', async () => {
91
+ (0, _react2.render)(_TextInput2 || (_TextInput2 = /*#__PURE__*/_react.default.createElement(_index.TextInput, {
92
92
  renderLabel: "Name",
93
- messages: [{
94
- text: 'yup',
95
- type: 'error'
96
- }]
97
- }));
93
+ "aria-describedby": "abcd"
94
+ })));
98
95
  const input = _react2.screen.getByRole('textbox');
99
- expect(input).toHaveAttribute('aria-describedby');
100
- });
101
- it('should have equal messagesId and aria-describedby values', async () => {
102
- const _render2 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.TextInput, {
103
- renderLabel: "Name",
104
- messages: [{
105
- text: 'yup',
106
- type: 'error'
107
- }]
108
- })),
109
- container = _render2.container;
110
- const id = _react2.screen.getByRole('textbox').getAttribute('aria-describedby');
111
- const messages = container.querySelector('span[class$="-formFieldMessages"]');
112
- expect(messages).toHaveAttribute('id', id);
113
- });
114
- it('should handle multiple aria-describedby ids', async () => {
115
- (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.TextInput, {
116
- renderLabel: "Name",
117
- "aria-describedby": "assistive-id",
118
- messages: [{
119
- text: 'yup',
120
- type: 'error'
121
- }]
122
- }));
123
- const ids = _react2.screen.getByRole('textbox').getAttribute('aria-describedby');
124
- expect(ids).toMatch('assistive-id TextInput-messages');
96
+ expect(input).toHaveAttribute('aria-describedby', 'abcd');
125
97
  });
126
98
  describe('events', () => {
127
99
  it('responds to onChange event', async () => {
@@ -167,7 +139,7 @@ describe('<TextInput/>', () => {
167
139
  });
168
140
  describe('interaction', () => {
169
141
  it('should set the disabled attribute when `interaction` is disabled', async () => {
170
- (0, _react2.render)(_TextInput2 || (_TextInput2 = /*#__PURE__*/_react.default.createElement(_index.TextInput, {
142
+ (0, _react2.render)(_TextInput3 || (_TextInput3 = /*#__PURE__*/_react.default.createElement(_index.TextInput, {
171
143
  renderLabel: "Name",
172
144
  interaction: "disabled"
173
145
  })));
@@ -175,7 +147,7 @@ describe('<TextInput/>', () => {
175
147
  expect(input).toHaveAttribute('disabled');
176
148
  });
177
149
  it('should set the disabled attribute when `disabled` is set', async () => {
178
- (0, _react2.render)(_TextInput3 || (_TextInput3 = /*#__PURE__*/_react.default.createElement(_index.TextInput, {
150
+ (0, _react2.render)(_TextInput4 || (_TextInput4 = /*#__PURE__*/_react.default.createElement(_index.TextInput, {
179
151
  renderLabel: "Name",
180
152
  disabled: true
181
153
  })));
@@ -183,7 +155,7 @@ describe('<TextInput/>', () => {
183
155
  expect(input).toHaveAttribute('disabled');
184
156
  });
185
157
  it('should set the readonly attribute when `interaction` is readonly', async () => {
186
- (0, _react2.render)(_TextInput4 || (_TextInput4 = /*#__PURE__*/_react.default.createElement(_index.TextInput, {
158
+ (0, _react2.render)(_TextInput5 || (_TextInput5 = /*#__PURE__*/_react.default.createElement(_index.TextInput, {
187
159
  renderLabel: "Name",
188
160
  interaction: "readonly"
189
161
  })));
@@ -191,7 +163,7 @@ describe('<TextInput/>', () => {
191
163
  expect(input).toHaveAttribute('readonly');
192
164
  });
193
165
  it('should set the readonly attribute when `readOnly` is set', async () => {
194
- (0, _react2.render)(_TextInput5 || (_TextInput5 = /*#__PURE__*/_react.default.createElement(_index.TextInput, {
166
+ (0, _react2.render)(_TextInput6 || (_TextInput6 = /*#__PURE__*/_react.default.createElement(_index.TextInput, {
195
167
  renderLabel: "Name",
196
168
  readOnly: true
197
169
  })));
@@ -201,10 +173,10 @@ describe('<TextInput/>', () => {
201
173
  });
202
174
  describe('for a11y', () => {
203
175
  it('should meet standards', async () => {
204
- const _render3 = (0, _react2.render)(_TextInput6 || (_TextInput6 = /*#__PURE__*/_react.default.createElement(_index.TextInput, {
176
+ const _render2 = (0, _react2.render)(_TextInput7 || (_TextInput7 = /*#__PURE__*/_react.default.createElement(_index.TextInput, {
205
177
  renderLabel: "Name"
206
178
  }))),
207
- container = _render3.container;
179
+ container = _render2.container;
208
180
  const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);
209
181
  expect(axeCheck).toBe(true);
210
182
  });
package/lib/TextInput/index.js CHANGED
@@ -196,9 +196,6 @@ let TextInput = exports.TextInput = (_dec = (0, _withDeterministicId.withDetermi
196
196
  if (props['aria-describedby']) {
197
197
  descriptionIds = `${props['aria-describedby']}`;
198
198
  }
199
- if (this.hasMessages) {
200
- descriptionIds = descriptionIds !== '' ? `${descriptionIds} ${this._messagesId}` : this._messagesId;
201
- }
202
199
  return (0, _emotion.jsx)("input", Object.assign({}, props, {
203
200
  css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.textInput,
204
201
  defaultValue: defaultValue,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-text-input",
3
- "version": "10.12.0",
3
+ "version": "10.12.1-snapshot-1",
4
4
  "description": "A styled HTML text input component.",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -23,12 +23,12 @@
23
23
  },
24
24
  "license": "MIT",
25
25
  "devDependencies": {
26
- "@instructure/ui-axe-check": "10.12.0",
27
- "@instructure/ui-babel-preset": "10.12.0",
28
- "@instructure/ui-badge": "10.12.0",
29
- "@instructure/ui-color-utils": "10.12.0",
30
- "@instructure/ui-test-utils": "10.12.0",
31
- "@instructure/ui-themes": "10.12.0",
26
+ "@instructure/ui-axe-check": "10.12.1-snapshot-1",
27
+ "@instructure/ui-babel-preset": "10.12.1-snapshot-1",
28
+ "@instructure/ui-badge": "10.12.1-snapshot-1",
29
+ "@instructure/ui-color-utils": "10.12.1-snapshot-1",
30
+ "@instructure/ui-test-utils": "10.12.1-snapshot-1",
31
+ "@instructure/ui-themes": "10.12.1-snapshot-1",
32
32
  "@testing-library/jest-dom": "^6.6.3",
33
33
  "@testing-library/react": "^16.0.1",
34
34
  "@testing-library/user-event": "^14.5.2",
@@ -36,15 +36,15 @@
36
36
  },
37
37
  "dependencies": {
38
38
  "@babel/runtime": "^7.26.0",
39
- "@instructure/emotion": "10.12.0",
40
- "@instructure/shared-types": "10.12.0",
41
- "@instructure/ui-dom-utils": "10.12.0",
42
- "@instructure/ui-form-field": "10.12.0",
43
- "@instructure/ui-icons": "10.12.0",
44
- "@instructure/ui-prop-types": "10.12.0",
45
- "@instructure/ui-react-utils": "10.12.0",
46
- "@instructure/ui-tag": "10.12.0",
47
- "@instructure/ui-testable": "10.12.0",
39
+ "@instructure/emotion": "10.12.1-snapshot-1",
40
+ "@instructure/shared-types": "10.12.1-snapshot-1",
41
+ "@instructure/ui-dom-utils": "10.12.1-snapshot-1",
42
+ "@instructure/ui-form-field": "10.12.1-snapshot-1",
43
+ "@instructure/ui-icons": "10.12.1-snapshot-1",
44
+ "@instructure/ui-prop-types": "10.12.1-snapshot-1",
45
+ "@instructure/ui-react-utils": "10.12.1-snapshot-1",
46
+ "@instructure/ui-tag": "10.12.1-snapshot-1",
47
+ "@instructure/ui-testable": "10.12.1-snapshot-1",
48
48
  "prop-types": "^15.8.1"
49
49
  },
50
50
  "peerDependencies": {
package/src/TextInput/__new-tests__/TextInput.test.tsx CHANGED
@@ -90,59 +90,11 @@ describe('<TextInput/>', () => {
90
90
  expect(ref?.value).toBe('bar')
91
91
  })
92
92
 
93
- it('should provide messageId to FormField', async () => {
94
- render(
95
- <TextInput
96
- renderLabel="Name"
97
- messages={[
98
- {
99
- text: 'yup',
100
- type: 'error'
101
- }
102
- ]}
103
- />
104
- )
93
+ it('should let aria-describedby through', async () => {
94
+ render(<TextInput renderLabel="Name" aria-describedby="abcd" />)
105
95
  const input = screen.getByRole('textbox')
106
96
 
107
- expect(input).toHaveAttribute('aria-describedby')
108
- })
109
-
110
- it('should have equal messagesId and aria-describedby values', async () => {
111
- const { container } = render(
112
- <TextInput
113
- renderLabel="Name"
114
- messages={[
115
- {
116
- text: 'yup',
117
- type: 'error'
118
- }
119
- ]}
120
- />
121
- )
122
- const id = screen.getByRole('textbox').getAttribute('aria-describedby')
123
- const messages = container.querySelector(
124
- 'span[class$="-formFieldMessages"]'
125
- )
126
-
127
- expect(messages).toHaveAttribute('id', id)
128
- })
129
-
130
- it('should handle multiple aria-describedby ids', async () => {
131
- render(
132
- <TextInput
133
- renderLabel="Name"
134
- aria-describedby="assistive-id"
135
- messages={[
136
- {
137
- text: 'yup',
138
- type: 'error'
139
- }
140
- ]}
141
- />
142
- )
143
- const ids = screen.getByRole('textbox').getAttribute('aria-describedby')
144
-
145
- expect(ids).toMatch('assistive-id TextInput-messages')
97
+ expect(input).toHaveAttribute('aria-describedby', 'abcd')
146
98
  })
147
99
 
148
100
  describe('events', () => {
package/src/TextInput/index.tsx CHANGED
@@ -243,13 +243,6 @@ class TextInput extends Component<TextInputProps, TextInputState> {
243
243
  descriptionIds = `${props['aria-describedby']}`
244
244
  }
245
245
 
246
- if (this.hasMessages) {
247
- descriptionIds =
248
- descriptionIds !== ''
249
- ? `${descriptionIds} ${this._messagesId}`
250
- : this._messagesId
251
- }
252
-
253
246
  return (
254
247
  <input
255
248
  {...props}