Skip to content

Commit 01f5044

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent 79de6c0 commit 01f5044

31 files changed

+125
-101
lines changed

Diff for: ‎docs/controls/autocomplete/accessibility/overview.md

+33-25
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ position: 1
88

99
# AutoComplete Accessibility
1010

11-
The AutoComplete is accessible by screen readers and provides WAI-ARIA, Section 508, WCAG 2.2, and keyboard support.
11+
The AutoComplete is accessible by screen readers and provides WAI-ARIA, Section 508, WCAG 2.1, and keyboard support.
1212

1313
> According to [WAI-ARIA 1.1](https://www.w3.org/TR/wai-aria/#combobox) specification *"Authors must ensure an element with role combobox contains or owns a text input element with role textbox or searchbox..."*. Note, that in our implementation, the text input element is the one that has role="combobox", and does not contain another text input element. **This approach is valid for the [WAI-ARIA 1.2](https://www.w3.org/TR/wai-aria-1.2/#combobox) specification and also for the [WAI-ARIA 1.0](https://www.w3.org/TR/wai-aria/#combobox) specification .**
1414
>
@@ -29,46 +29,54 @@ The AutoComplete is compliant with the [Web Content Accessibility Guidelines (WC
2929
## WAI-ARIA
3030

3131

32-
The following table lists the selectors, attributes, and behavior patterns supported by the AutoComplete component:
32+
This section lists the selectors, attributes, and behavior patterns supported by the component and its composite elements, if any.
3333

34-
### AutoComplete wrapper
34+
### AutoComplete Wrapping Element
35+
36+
37+
The following table summarizes the selectors and attributes supported by the AutoComplete wrapper element:
3538

3639
| Selector | Attribute | Usage |
3740
| -------- | --------- | ----- |
38-
| `.k-input-inner` | `role=combobox` | Announces the presence of a autocomplete as inner element of the autocomplete used for filtering. |
39-
| | `label for` or `aria-label` or `aria-labelledby` | The input needs an accessible name to be assigned to it. |
40-
| | `aria-haspopup=listbox` | Indicates the component has a listbox Popup. |
41-
| | `aria-expanded=true/false` | Announces the state of the visibility of the popup. |
42-
| | `aria-controls=.k-list-ul id` | Points to the listbox element. Signifies that the `combobox` element controls the `listbox`. |
43-
| | `aria-activedescendant=.k-list-item.k-focus id` | Points to the focused item in the popup. The focused item is changed via keyboard navigation. If the popup is not visible, the attribute should not point to any element or should be removed. |
44-
| | `aria-autocomplete=list` | Attribute is rendered and value is set to list when **filtering** feature is enabled. |
45-
| | `aria-autocomplete=both` | Attribute is rendered and value is set to both when both **filtering** and **suggest** features are enabled. |
46-
| | `aria-autocomplete=inline` | Attribute is rendered and value is set to only **suggest** feature is enabled. |
47-
| | `readonly` or `aria-readonly` | Attribute is rendered only when the autocomplete is readonly. |
48-
| | `aria-busy=true` | Attribute is rendered only when the autocomplete is loading data. |
41+
| `.k-input-inner` | `role=combobox` | Announces the presence of an AutoComplete as the inner element of the AutoComplete that is used for filtering. |
42+
| | `label for` or `aria-label` or `aria-labelledby` | The input needs an accessible name that will be assigned to it. |
43+
| | `aria-haspopup=listbox` | Indicates that the component has a listbox popup. |
44+
| | `aria-expanded=true/false` | Announces the state of the popup visibility. |
45+
| | `aria-controls=.k-list-ul id` | Points to the `listbox` element. Signifies that the `combobox` element controls the `listbox` one. |
46+
| | `aria-activedescendant=.k-list-item.k-focus id` | Points to the focused item in the popup. The focused item is changed with keyboard navigation. If the popup is not visible, the attribute must not point to any element or must be removed. |
47+
| | `aria-autocomplete=list` | The attribute is rendered and the value is set to `list` when the filtering feature is enabled. |
48+
| | `aria-autocomplete=both` | The attribute is rendered and the value is set to `both` when both the filtering and suggest features are enabled. |
49+
| | `aria-autocomplete=inline` | The attribute is rendered and the value is set to `only` when the suggest feature is enabled. |
50+
| | `readonly` or `aria-readonly` | The attribute is rendered only when the AutoComplete is read-only. |
51+
| | `aria-busy=true` | The attribute is rendered only when the AutoComplete is loading data. |
4952
| | `tabindex=0` | The element must be focusable. |
50-
| `.k-invalid .k-input-inner,.ng-invalid .k-input-inner` | `aria-invalid=true` | Attribute is rendered only when the autocomplete is in form and announces the valid state of the component. |
51-
| `.k-disabled .k-input-inner` | `disabled=disabled` or `aria-disabled=true` | Attribute is rendered only when the autocomplete is disabled. |
53+
| `.k-invalid .k-input-inner,.ng-invalid .k-input-inner` | `aria-invalid=true` | The attribute is rendered only when the AutoComplete is in a form and announces the valid state of the component. |
54+
| `.k-disabled .k-input-inner` | `disabled=disabled` or `aria-disabled=true` | The attribute is rendered only when the AutoComplete is disabled. |
5255

53-
### ListBox Popup
56+
### Popup Listbox
5457

5558

56-
The Popup element of the component should implement the specification for a **Popup List** component.
59+
The popup element of the AutoComplete has to implement the WAI-ARIA specification for a Popup List component. The following table summarizes the selectors and attributes supported by the listbox popup of the AutoComplete:
5760

5861
| Selector | Attribute | Usage |
5962
| -------- | --------- | ----- |
60-
| `.k-animation-container` | `role=region` | When the component container is appended to the `<body>` element of the document, it needs a landmark role to be assigned to it. Otherwise, it should be appended to an element with an appropriate landmark role. |
61-
| | `aria-label` or `aria-labelledby` | Provides a label when the container has a `region` role assigned. |
62-
| `.k-list-ul` | `role=listbox` | Identifies the ul element as a listbox. |
63-
| | `aria-label` or `aria-labelledby` | Provides a label for the listbox of the combobox. |
64-
| `.k-list-item` | `role=option` | Identifies the li element as a listbox option. |
63+
| `.k-animation-container` | `role=region` | When the component container is appended to the `<body>` element of the document, it requires you to assing a `landmark` role to it. Otherwise, append it to an element with an appropriate `landmark` role. |
64+
| | `aria-label` or `aria-labelledby` | When the container has a `region` role assigned, povides a label. |
65+
| `.k-list-ul` | `role=listbox` | Identifies the `ul` element as a listbox. |
66+
| | `aria-label` or `aria-labelledby` | Provides a label for the listbox of the ComboBox. |
67+
| `.k-list-item` | `role=option` | Identifies the `li` element as a listbox option. |
68+
| | `id` | When grouped, the list items must have an `id` attribute specified, so that the `aria-owns` attribute of their group header elements (with `role=group`) point to that ids. |
69+
| | `aria-describedby` | When grouped, the list items must have an `aria-describedby` attribute pointing to the id of the `k-list-item-text` element in their `k-list-group-item`. |
6570
| `.k-list-item.k-selected` | `aria-selected=true` | Indicates the selected state of the item. |
71+
| `.k-list-group-item` | `role=group` | The group elements in the popup list must be have `role=group`. |
72+
| | `aria-owns` | The group elements in the popup list must own the list items belonging to their group. |
73+
| `.k-list-group-item>.k-list-item-text` | `id` | The `k-list-item-text` elements of the `k-list-group-item` must have an id specified. The `aria-labelledby` attribute of the list items in the group must point to that id. |
6674

6775
## Resources
6876

69-
[ARIA practices: Editable Combobox With Both List and Inline Autocomplete Example](https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-autocomplete-both.html)
77+
[WAI-ARIA Authoring Practices: Editable Combobox With Both List and Inline Autocomplete Example](https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-autocomplete-both.html)
7078

71-
[ARIA Practices: Editable Combobox With List Autocomplete Example](https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-autocomplete-list.html)
79+
[WAI-ARIA Authoring Practices: Editable Combobox With List Autocomplete Example](https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-autocomplete-list.html)
7280

7381
## Section 508
7482

Diff for: ‎package-lock.json

+11-7
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@
6464
},
6565
"overrides": {
6666
"chokidar": "^3.0.0",
67+
"braces": "~3.0.3",
6768
"glob-stream": "^8.0.0",
6869
"micromatch": "^4.0.0",
6970
"word-wrap": ">=1.2.4",

Diff for: ‎rollup.config.js

+8-2
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,10 @@ const globals = {
2121
jquery: '$'
2222
};
2323

24+
// Used only for the source code bundle.
25+
const babelArg = process.argv.includes("--configBabel");
26+
const babel = babelArg ? require('@rollup/plugin-babel') : null;
27+
2428
export function transformCodePlugin() {
2529
return {
2630
name: 'transform-kendo-modules',
@@ -73,7 +77,8 @@ const resourcesConfig = (name, options = {}) => ({
7377
plugins: [
7478
transformCodePlugin(),
7579
addKendoVersion(),
76-
polyfill(['../kendo.core.js'])
80+
polyfill(['../kendo.core.js']),
81+
babel ? babel({ babelHelpers: 'bundled' }) : null // Used only for the source code bundle.
7782
]
7883
});
7984

@@ -95,7 +100,8 @@ const configMap = (name) => ({
95100
transformCodePlugin(),
96101
addKendoVersion(),
97102
name === 'kendo.core.js' || isBundle(name) ? polyfill(['jquery']) : null,
98-
nodeResolve()
103+
nodeResolve(),
104+
babel ? babel({ babelHelpers: 'bundled' }) : null // Used only for the source code bundle.
99105
]
100106
});
101107

Diff for: ‎src/kendo.actionsheet.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -116,7 +116,7 @@ var __meta__ = {
116116
}
117117

118118
if (data.iconSize) {
119-
inlineStyles.fontSize = data.iconSize;
119+
inlineStyles.fontSize = data.iconSize + "px";
120120
}
121121

122122
if (Object.keys(inlineStyles).length) {

Diff for: ‎src/kendo.dialog.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -751,7 +751,9 @@ import "./kendo.icons.js";
751751
modal.options.appendTo === that.options.appendTo &&
752752
!modal.containment &&
753753
$(modal.element).is(VISIBLE);
754-
}).sort(function(a, b) {
754+
});
755+
756+
zStack = [].sort.call(zStack, function(a, b) {
755757
return +$(a).css("zIndex") - +$(b).css("zIndex");
756758
});
757759

Diff for: ‎src/kendo.listbox.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1292,7 +1292,7 @@ var __meta__ = {
12921292
var items = that.getItems();
12931293
var offset = options.offset;
12941294
var indecesInDom = getSortedDomIndices(items);
1295-
var movedItems = $.makeArray(items.sort(that.itemComparer));
1295+
var movedItems = $.makeArray([].sort.call(items,that.itemComparer));
12961296
var moveAction = options.moveAction;
12971297
var movedItem;
12981298

Diff for: ‎src/kendo.popup.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -788,7 +788,7 @@ var __meta__ = {
788788
});
789789

790790
if (this.element.is("[tabindex]")) {
791-
elements.push(this.element[0]);
791+
[].push.call(elements, this.element[0]);
792792
}
793793

794794
return elements;
@@ -797,7 +797,7 @@ var __meta__ = {
797797
var sortedElements;
798798

799799
if (stableSort) {
800-
sortedElements = elements.sort(function(prev, next) {
800+
sortedElements = [].sort.call(elements, function(prev, next) {
801801
return prev.tabIndex - next.tabIndex;
802802
});
803803
} else {
@@ -806,7 +806,7 @@ var __meta__ = {
806806
item.setAttribute(attrName, i);
807807
});
808808

809-
sortedElements = elements.sort(function(prev, next) {
809+
sortedElements = [].sort.call(elements, function(prev, next) {
810810
return prev.tabIndex === next.tabIndex ?
811811
parseInt(prev.getAttribute(attrName), 10) - parseInt(next.getAttribute(attrName), 10) :
812812
prev.tabIndex - next.tabIndex;

Diff for: ‎tests/core/class.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,7 @@
100100

101101
var AnotherBall = Ball.extend();
102102

103-
assert.isOk($.isArray(AnotherBall.fn.colors));
103+
assert.isOk(Array.isArray(AnotherBall.fn.colors));
104104
});
105105

106106
});

Diff for: ‎tests/core/json.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99

1010
it("stringified object should be deserializable ", function() {
1111
var obj = { foo: "bar", baz: 1 };
12-
var result = $.parseJSON(kendo.stringify(obj));
12+
var result = JSON.parse(kendo.stringify(obj));
1313
assert.equal(result.foo, "bar");
1414
assert.equal(result.baz, 1);
1515
});

Diff for: ‎tests/data/datasource/initialization.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -354,7 +354,7 @@
354354
sort: { field: "foo", dir: "asc" }
355355
});
356356

357-
assert.isOk($.isArray(dataSource._sort));
357+
assert.isOk(Array.isArray(dataSource._sort));
358358
assert.equal(dataSource._sort[0].field, "foo");
359359
assert.equal(dataSource._sort[0].dir, "asc");
360360
});

Diff for: ‎tests/data/datasource/push.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@
6565
it("pushCreate option is passed to the push method", function() {
6666
var transport = {
6767
push: function(options) {
68-
assert.isOk($.isFunction(options.pushCreate));
68+
assert.isOk(kendo.isFunction(options.pushCreate));
6969
}
7070
};
7171

@@ -75,7 +75,7 @@
7575
it("pushUpdate option is passed to the push method", function() {
7676
var transport = {
7777
push: function(options) {
78-
assert.isOk($.isFunction(options.pushUpdate));
78+
assert.isOk(kendo.isFunction(options.pushUpdate));
7979
}
8080
};
8181

@@ -85,7 +85,7 @@
8585
it("pushDestroy option is passed to the push method", function() {
8686
var transport = {
8787
push: function(options) {
88-
assert.isOk($.isFunction(options.pushDestroy));
88+
assert.isOk(kendo.isFunction(options.pushDestroy));
8989
}
9090
};
9191

Diff for: ‎tests/data/datasource/query.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@
6363
});
6464

6565
dataSource.query({ sort: { field: "foo", dir: "asc" } });
66-
assert.isOk($.isArray(dataSource.sort()));
66+
assert.isOk(Array.isArray(dataSource.sort()));
6767
assert.equal(dataSource.sort()[0].field, "foo");
6868
assert.equal(dataSource.sort()[0].dir, "asc");
6969

@@ -1391,7 +1391,7 @@
13911391
});
13921392

13931393
dataSource.query({ filter: { field: "age", operator: "==", value: 2 } });
1394-
assert.isOk($.isArray(dataSource.filter().filters));
1394+
assert.isOk(Array.isArray(dataSource.filter().filters));
13951395
assert.equal(dataSource.filter().filters[0].field, "age");
13961396
assert.equal(dataSource.filter().filters[0].operator, "eq");
13971397
assert.equal(dataSource.filter().filters[0].value, 2);
@@ -2335,7 +2335,7 @@
23352335
serverSorting: true
23362336
});
23372337

2338-
assert.isOk($.isFunction(dataSource.query().then));
2338+
assert.isOk(kendo.isFunction(dataSource.query().then));
23392339
});
23402340

23412341
it("query returns promise for local operations", function() {
@@ -2347,7 +2347,7 @@
23472347

23482348
dataSource.read();
23492349

2350-
assert.isOk($.isFunction(dataSource.query().then));
2350+
assert.isOk(kendo.isFunction(dataSource.query().then));
23512351
});
23522352

23532353
it("query resolves promise after data has been processed", function() {

Diff for: ‎tests/data/datasource/read.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -751,7 +751,7 @@
751751
}
752752
});
753753

754-
assert.isOk($.isFunction(dataSource.read().then));
754+
assert.isOk(kendo.isFunction(dataSource.read().then));
755755
});
756756

757757
it("read resolves promise upon success", function() {

Diff for: ‎tests/data/datasource/sync-response.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
var obj = {};
2020
data = data !== undefined ? data : [{ id: 1, foo: "bar" }];
2121
obj[method] = function(options) {
22-
options.success($.isFunction(data) ? data() : data);
22+
options.success(kendo.isFunction(data) ? data() : data);
2323
};
2424

2525
stub(dataSource.transport, obj);

Diff for: ‎tests/data/datasource/sync.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -284,7 +284,7 @@
284284

285285
var models = dataSource.transport.args("create")[0].data.models;
286286

287-
assert.isOk($.isArray(models));
287+
assert.isOk(Array.isArray(models));
288288
assert.equal(models.length, 2);
289289
assert.equal(models[0].foo, "foo");
290290
assert.equal(models[1].foo, "bar");
@@ -329,7 +329,7 @@
329329
dataSource.sync();
330330

331331
var models = dataSource.transport.args("update")[0].data.models;
332-
assert.isOk($.isArray(models));
332+
assert.isOk(Array.isArray(models));
333333
assert.equal(models.length, 2);
334334
assert.equal(models[0].foo, "foo");
335335
assert.equal(models[1].foo, "bar");
@@ -371,7 +371,7 @@
371371

372372

373373
var models = dataSource.transport.args("destroy")[0].data.models;
374-
assert.isOk($.isArray(models));
374+
assert.isOk(Array.isArray(models));
375375
assert.equal(models.length, 2);
376376
assert.equal(models[0].id, 1);
377377
assert.equal(models[1].id, 2);
@@ -864,7 +864,7 @@
864864

865865
var promise = dataSource.sync();
866866

867-
assert.isOk($.isFunction(promise.then));
867+
assert.isOk(kendo.isFunction(promise.then));
868868
});
869869

870870
it("sync returns promise when offline", function() {
@@ -881,7 +881,7 @@
881881

882882
var promise = dataSource.sync();
883883

884-
assert.isOk($.isFunction(promise.then));
884+
assert.isOk(kendo.isFunction(promise.then));
885885

886886
promise.then($.proxy(assert.isOk, this, true));
887887

Diff for: ‎tests/data/hierarchy.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1205,7 +1205,7 @@
12051205

12061206
dataSource.read();
12071207

1208-
assert.isOk($.isFunction(dataSource.get(1).load().then));
1208+
assert.isOk(kendo.isFunction(dataSource.get(1).load().then));
12091209
});
12101210

12111211
it("Node without children resolves load promise immediately", function() {

0 commit comments

Comments
 (0)