Skip to content

Commit 097dc19

Browse files
GoodDayForSurfGoodDayForSurf
authored
Merge branch '25_2' into 25_2_ng_nested_fix
2 parents 2d787db + fa97af0 commit 097dc19

File tree

2 files changed

+107
-97
lines changed

2 files changed

+107
-97
lines changed

‎packages/devextreme/js/__internal/ui/form/components/label.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@ function renderLabelMark(
5858

5959
return $('<span>')
6060
.addClass(markClass)
61+
.attr('aria-hidden', 'true')
6162
.text(markText);
6263
}
6364

‎packages/devextreme/testing/tests/DevExpress.ui.widgets.form/formLayoutManager.markup.tests.js‎

Lines changed: 106 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -208,125 +208,134 @@ QUnit.module('Layout manager', () => {
208208
assert.equal($button.length, 1, 'field item label with button is rendered');
209209
});
210210

211-
test('Default render with marks', function(assert) {
212-
const $testContainer = $('#container').dxLayoutManager({
213-
items: [{
214-
dataField: 'name',
215-
editorType: 'dxTextBox',
216-
isRequired: true
217-
}, {
218-
dataField: 'address',
219-
editorType: 'dxTextBox'
220-
}]
221-
});
222-
const $items = $testContainer.find('.' + FIELD_ITEM_CLASS);
223-
224-
assert.equal($items.length, 2, 'field items is rendered');
211+
QUnit.module('Label marks', () => {
212+
const getRequiredMark = ($item) => $item.find(`.${FIELD_ITEM_REQUIRED_MARK_CLASS}`);
213+
const getOptionalMark = ($item) => $item.find(`.${FIELD_ITEM_OPTIONAL_MARK_CLASS}`);
225214

226-
const $requiredItem = $items.eq(0);
227-
const $optionalItem = $items.eq(1);
215+
test('Default render with marks', function(assert) {
216+
const $testContainer = $('#container').dxLayoutManager({
217+
items: [{
218+
dataField: 'name',
219+
editorType: 'dxTextBox',
220+
isRequired: true
221+
}, {
222+
dataField: 'address',
223+
editorType: 'dxTextBox'
224+
}]
225+
});
226+
const $items = $testContainer.find(`.${FIELD_ITEM_CLASS}`);
228227

229-
assert.ok($requiredItem.hasClass(FIELD_ITEM_REQUIRED_CLASS), 'field item has required class');
230-
assert.ok(!$requiredItem.hasClass(FIELD_ITEM_OPTIONAL_CLASS), 'field item hasn\'t optional class');
231-
assert.ok($requiredItem.find('.' + FIELD_ITEM_REQUIRED_MARK_CLASS).length, 'field item has required mark');
232-
assert.ok(!$requiredItem.find('.' + FIELD_ITEM_OPTIONAL_MARK_CLASS).length, 'field item hasn\'t optional mark');
228+
assert.equal($items.length, 2, 'field items is rendered');
233229

230+
const $requiredItem = $items.eq(0);
231+
const $optionalItem = $items.eq(1);
234232

235-
assert.ok(!$optionalItem.hasClass(FIELD_ITEM_REQUIRED_CLASS), 'field item hasn\'t required class');
236-
assert.ok($optionalItem.hasClass(FIELD_ITEM_OPTIONAL_CLASS), 'field item has optional class');
237-
assert.ok(!$optionalItem.find('.' + FIELD_ITEM_REQUIRED_MARK_CLASS).length, 'field item hasn\'t required mark');
238-
assert.ok(!$optionalItem.find('.' + FIELD_ITEM_OPTIONAL_MARK_CLASS).length, 'field item hasn\'t optional mark');
239-
});
233+
assert.ok($requiredItem.hasClass(FIELD_ITEM_REQUIRED_CLASS), 'field item has required class');
234+
assert.ok(!$requiredItem.hasClass(FIELD_ITEM_OPTIONAL_CLASS), 'field item has not optional class');
235+
assert.strictEqual(getRequiredMark($requiredItem).length, 1, 'field item has required mark');
236+
assert.strictEqual(getOptionalMark($requiredItem).length, 0, 'field item hasn\'t optional mark');
237+
assert.strictEqual(getRequiredMark($requiredItem).attr('aria-hidden'), 'true', 'required mark has aria-hidden=true attribute');
240238

241-
test('Show optional marks', function(assert) {
242-
const $testContainer = $('#container').dxLayoutManager({
243-
items: [{
244-
dataField: 'address',
245-
editorType: 'dxTextBox'
246-
}],
247-
showOptionalMark: true
239+
assert.ok(!$optionalItem.hasClass(FIELD_ITEM_REQUIRED_CLASS), 'field item has not required class');
240+
assert.ok($optionalItem.hasClass(FIELD_ITEM_OPTIONAL_CLASS), 'field item has optional class');
241+
assert.strictEqual(getRequiredMark($optionalItem).length, 0, 'field item has not required mark');
242+
assert.strictEqual(getOptionalMark($optionalItem).length, 0, 'field item has not optional mark');
248243
});
249-
const $items = $testContainer.find('.' + FIELD_ITEM_CLASS);
250244

251-
assert.equal($items.length, 1, 'field items is rendered');
245+
test('Show optional marks', function(assert) {
246+
const $testContainer = $('#container').dxLayoutManager({
247+
items: [{
248+
dataField: 'address',
249+
editorType: 'dxTextBox'
250+
}],
251+
showOptionalMark: true
252+
});
253+
const $items = $testContainer.find(`.${FIELD_ITEM_CLASS}`);
252254

253-
const $optionalItem = $items.eq(0);
254-
assert.ok(!$optionalItem.hasClass(FIELD_ITEM_REQUIRED_CLASS), 'field item hasn\'t required class');
255-
assert.ok($optionalItem.hasClass(FIELD_ITEM_OPTIONAL_CLASS), 'field item has optional class');
256-
assert.ok(!$optionalItem.find('.' + FIELD_ITEM_REQUIRED_MARK_CLASS).length, 'field item hasn\'t required mark');
257-
assert.ok($optionalItem.find('.' + FIELD_ITEM_OPTIONAL_MARK_CLASS).length, 'field item hasn optional mark');
258-
});
255+
assert.equal($items.length, 1, 'field items is rendered');
259256

260-
test('Render custom marks', function(assert) {
261-
const $testContainer = $('#container').dxLayoutManager({
262-
showOptionalMark: true,
263-
optionalMark: '-',
264-
requiredMark: '+',
265-
items: [{
266-
dataField: 'name',
267-
editorType: 'dxTextBox',
268-
isRequired: true
269-
}, {
270-
dataField: 'address',
271-
editorType: 'dxTextBox'
272-
}]
257+
const $optionalItem = $items.eq(0);
258+
259+
assert.ok(!$optionalItem.hasClass(FIELD_ITEM_REQUIRED_CLASS), 'field item has not required class');
260+
assert.ok($optionalItem.hasClass(FIELD_ITEM_OPTIONAL_CLASS), 'field item has optional class');
261+
assert.strictEqual(getRequiredMark($optionalItem).length, 0, 'field item has not required mark');
262+
assert.strictEqual(getOptionalMark($optionalItem).length, 1, 'field item has optional mark');
263+
assert.strictEqual(getOptionalMark($optionalItem).attr('aria-hidden'), 'true', 'optional mark has aria-hidden=true attribute');
273264
});
274-
const $items = $testContainer.find('.' + FIELD_ITEM_CLASS);
275265

276-
const $requiredItem = $items.eq(0);
277-
const $optionalItem = $items.eq(1);
266+
test('Render custom marks', function(assert) {
267+
const $testContainer = $('#container').dxLayoutManager({
268+
showOptionalMark: true,
269+
optionalMark: '-',
270+
requiredMark: '+',
271+
items: [{
272+
dataField: 'name',
273+
editorType: 'dxTextBox',
274+
isRequired: true
275+
}, {
276+
dataField: 'address',
277+
editorType: 'dxTextBox'
278+
}]
279+
});
278280

279-
assert.equal($requiredItem.find('.' + FIELD_ITEM_REQUIRED_MARK_CLASS).text().trim(), '+', 'custom required mark');
280-
assert.equal($optionalItem.find('.' + FIELD_ITEM_OPTIONAL_MARK_CLASS).text().trim(), '-', 'custom optional mark');
281-
});
281+
const $items = $testContainer.find(`.${FIELD_ITEM_CLASS}`);
282+
const $requiredItem = $items.eq(0);
283+
const $optionalItem = $items.eq(1);
282284

283-
test('Change marks', function(assert) {
284-
const $testContainer = $('#container').dxLayoutManager({
285-
showOptionalMark: true,
286-
items: [{
287-
dataField: 'name',
288-
editorType: 'dxTextBox',
289-
isRequired: true
290-
}, {
291-
dataField: 'address',
292-
editorType: 'dxTextBox'
293-
}]
285+
assert.equal(getRequiredMark($requiredItem).text().trim(), '+', 'custom required mark');
286+
assert.strictEqual(getRequiredMark($requiredItem).attr('aria-hidden'), 'true', 'required mark has aria-hidden=true attribute');
287+
assert.equal(getOptionalMark($optionalItem).text().trim(), '-', 'custom optional mark');
288+
assert.strictEqual(getOptionalMark($optionalItem).attr('aria-hidden'), 'true', 'optional mark has aria-hidden=true attribute');
294289
});
295-
const instance = $testContainer.dxLayoutManager('instance');
296290

297-
instance.option('optionalMark', '-');
298-
instance.option('requiredMark', '+');
291+
test('Change marks', function(assert) {
292+
const $testContainer = $('#container').dxLayoutManager({
293+
showOptionalMark: true,
294+
items: [{
295+
dataField: 'name',
296+
editorType: 'dxTextBox',
297+
isRequired: true
298+
}, {
299+
dataField: 'address',
300+
editorType: 'dxTextBox'
301+
}]
302+
});
303+
const instance = $testContainer.dxLayoutManager('instance');
299304

300-
const $items = $testContainer.find('.' + FIELD_ITEM_CLASS);
301-
const $requiredItem = $items.eq(0);
302-
const $optionalItem = $items.eq(1);
305+
instance.option('optionalMark', '-');
306+
instance.option('requiredMark', '+');
303307

304-
assert.equal($requiredItem.find('.' + FIELD_ITEM_REQUIRED_MARK_CLASS).text().trim(), '+', 'custom required mark');
305-
assert.equal($optionalItem.find('.' + FIELD_ITEM_OPTIONAL_MARK_CLASS).text().trim(), '-', 'custom optional mark');
306-
});
308+
const $items = $testContainer.find(`.${FIELD_ITEM_CLASS}`);
309+
const $requiredItem = $items.eq(0);
310+
const $optionalItem = $items.eq(1);
307311

308-
test('Change marks visibility', function(assert) {
309-
const $testContainer = $('#container').dxLayoutManager({
310-
items: [{
311-
dataField: 'name',
312-
editorType: 'dxTextBox',
313-
isRequired: true
314-
}, {
315-
dataField: 'address',
316-
editorType: 'dxTextBox'
317-
}]
312+
assert.equal(getRequiredMark($requiredItem).text().trim(), '+', 'custom required mark');
313+
assert.equal(getOptionalMark($optionalItem).text().trim(), '-', 'custom optional mark');
318314
});
319-
const instance = $testContainer.dxLayoutManager('instance');
320-
const $items = $testContainer.find('.' + FIELD_ITEM_CLASS);
321315

322-
instance.option('showOptionalMark', true);
323-
instance.option('showRequiredMark', false);
316+
test('Change marks visibility', function(assert) {
317+
const $testContainer = $('#container').dxLayoutManager({
318+
items: [{
319+
dataField: 'name',
320+
editorType: 'dxTextBox',
321+
isRequired: true
322+
}, {
323+
dataField: 'address',
324+
editorType: 'dxTextBox'
325+
}]
326+
});
327+
const instance = $testContainer.dxLayoutManager('instance');
324328

325-
const $requiredItem = $items.eq(0);
326-
const $optionalItem = $items.eq(1);
329+
instance.option('showOptionalMark', true);
330+
instance.option('showRequiredMark', false);
327331

328-
assert.ok($requiredItem.find('.' + FIELD_ITEM_REQUIRED_MARK_CLASS).length, 'Item has no required mark');
329-
assert.ok(!$optionalItem.find('.' + FIELD_ITEM_OPTIONAL_MARK_CLASS).length, 'Item has optional mark');
332+
const $items = $testContainer.find(`.${FIELD_ITEM_CLASS}`);
333+
const $requiredItem = $items.eq(0);
334+
const $optionalItem = $items.eq(1);
335+
336+
assert.strictEqual(getRequiredMark($requiredItem).length, 0, 'Item has no required mark');
337+
assert.strictEqual(getOptionalMark($optionalItem).length, 1, 'Item has optional mark');
338+
});
330339
});
331340

332341
test('Render read only layoutManager', function(assert) {

0 commit comments

Comments
 (0)