uikit 3.15.10-dev.6ba1ea187 → 3.15.11-dev.6033fe67f

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 (68) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/css/uikit-core-rtl.css +1 -1
  3. package/dist/css/uikit-core-rtl.min.css +1 -1
  4. package/dist/css/uikit-core.css +1 -1
  5. package/dist/css/uikit-core.min.css +1 -1
  6. package/dist/css/uikit-rtl.css +1 -1
  7. package/dist/css/uikit-rtl.min.css +1 -1
  8. package/dist/css/uikit.css +1 -1
  9. package/dist/css/uikit.min.css +1 -1
  10. package/dist/js/components/countdown.js +1 -1
  11. package/dist/js/components/countdown.min.js +1 -1
  12. package/dist/js/components/filter.js +2 -18
  13. package/dist/js/components/filter.min.js +1 -1
  14. package/dist/js/components/lightbox-panel.js +1 -1
  15. package/dist/js/components/lightbox-panel.min.js +1 -1
  16. package/dist/js/components/lightbox.js +1 -1
  17. package/dist/js/components/lightbox.min.js +1 -1
  18. package/dist/js/components/notification.js +1 -1
  19. package/dist/js/components/notification.min.js +1 -1
  20. package/dist/js/components/parallax.js +1 -1
  21. package/dist/js/components/parallax.min.js +1 -1
  22. package/dist/js/components/slider-parallax.js +1 -1
  23. package/dist/js/components/slider-parallax.min.js +1 -1
  24. package/dist/js/components/slider.js +1 -1
  25. package/dist/js/components/slider.min.js +1 -1
  26. package/dist/js/components/slideshow-parallax.js +1 -1
  27. package/dist/js/components/slideshow-parallax.min.js +1 -1
  28. package/dist/js/components/slideshow.js +1 -1
  29. package/dist/js/components/slideshow.min.js +1 -1
  30. package/dist/js/components/sortable.js +4 -20
  31. package/dist/js/components/sortable.min.js +1 -1
  32. package/dist/js/components/tooltip.js +1 -1
  33. package/dist/js/components/tooltip.min.js +1 -1
  34. package/dist/js/components/upload.js +1 -1
  35. package/dist/js/components/upload.min.js +1 -1
  36. package/dist/js/uikit-core.js +7 -6
  37. package/dist/js/uikit-core.min.js +2 -2
  38. package/dist/js/uikit-icons.js +2 -1
  39. package/dist/js/uikit-icons.min.js +1 -1
  40. package/dist/js/uikit.js +10 -25
  41. package/dist/js/uikit.min.js +2 -2
  42. package/package.json +5 -5
  43. package/src/images/icons/crosshairs.svg +7 -0
  44. package/src/js/api/component.js +2 -2
  45. package/src/js/components/sortable.js +2 -2
  46. package/src/js/core/scrollspy.js +3 -2
  47. package/src/js/mixin/internal/animate-slide.js +1 -18
  48. package/tests/breadcrumb.html +25 -19
  49. package/tests/comment.html +9 -9
  50. package/tests/drop.html +2 -2
  51. package/tests/dropbar.html +1 -1
  52. package/tests/dropdown.html +1 -1
  53. package/tests/filter.html +1 -1
  54. package/tests/form.html +40 -40
  55. package/tests/icon.html +4 -0
  56. package/tests/index.html +22 -19
  57. package/tests/js/index.js +3 -3
  58. package/tests/lightbox.html +1 -1
  59. package/tests/list.html +1 -1
  60. package/tests/nav.html +1 -1
  61. package/tests/navbar.html +3 -3
  62. package/tests/search.html +21 -21
  63. package/tests/slider.html +3 -3
  64. package/tests/slideshow.html +2 -2
  65. package/tests/sticky.html +1 -1
  66. package/tests/table.html +9 -9
  67. package/tests/tooltip.html +2 -2
  68. package/tests/utility.html +4 -4
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "uikit",
3
3
  "title": "UIkit",
4
4
  "description": "UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.",
5
- "version": "3.15.10-dev.6ba1ea187",
5
+ "version": "3.15.11-dev.6033fe67f",
6
6
  "main": "dist/js/uikit.js",
7
7
  "style": "dist/css/uikit.css",
8
8
  "sideEffects": [
@@ -34,8 +34,8 @@
34
34
  },
35
35
  "homepage": "https://getuikit.com",
36
36
  "devDependencies": {
37
- "@babel/core": "^7.19.0",
38
- "@babel/preset-env": "^7.19.0",
37
+ "@babel/core": "^7.19.1",
38
+ "@babel/preset-env": "^7.19.1",
39
39
  "@rollup/plugin-alias": "^3.1.9",
40
40
  "@rollup/plugin-babel": "^5.3.1",
41
41
  "@rollup/plugin-replace": "^4.0.0",
@@ -43,12 +43,12 @@
43
43
  "camelcase": "^7.0.0",
44
44
  "clean-css": "^5.3.1",
45
45
  "dateformat": "^5.0.3",
46
- "esbuild": "^0.15.7",
46
+ "esbuild": "^0.15.8",
47
47
  "eslint": "^8.23.1",
48
48
  "eslint-config-prettier": "^8.5.0",
49
49
  "fs-extra": "^10.1.0",
50
50
  "glob": "^8.0.3",
51
- "inquirer": "^9.1.1",
51
+ "inquirer": "^9.1.2",
52
52
  "less": "^4.1.3",
53
53
  "minimist": "^1.2.6",
54
54
  "number-precision": "^1.5.2",
package/src/images/icons/crosshairs.svg ADDED
@@ -0,0 +1,7 @@
1
+ <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
2
+ <circle fill="none" stroke="#000" cx="10" cy="10" r="7.5" />
3
+ <line fill="none" stroke="#000" x1="10" x2="10" y2="8" />
4
+ <line fill="none" stroke="#000" x1="10" y1="12" x2="10" y2="20" />
5
+ <line fill="none" stroke="#000" y1="10" x2="8" y2="10" />
6
+ <line fill="none" stroke="#000" x1="12" y1="10" x2="20" y2="10" />
7
+ </svg>
package/src/js/api/component.js CHANGED
@@ -66,8 +66,8 @@ export default function (UIkit) {
66
66
  }
67
67
  }
68
68
 
69
- for (const attribute of node.attributes) {
70
- const name = getComponentName(attribute.name);
69
+ for (const attribute of node.getAttributeNames()) {
70
+ const name = getComponentName(attribute);
71
71
  name && UIkit[name](node);
72
72
  }
73
73
  };
package/src/js/components/sortable.js CHANGED
@@ -352,8 +352,8 @@ function appendDrag(container, element) {
352
352
  if (['li', 'tr'].some((tag) => isTag(element, tag))) {
353
353
  clone = $('<div>');
354
354
  append(clone, element.cloneNode(true).children);
355
- for (const { nodeName, nodeValue } of element.attributes) {
356
- attr(clone, nodeName, nodeValue);
355
+ for (const attribute of element.getAttributeNames()) {
356
+ attr(clone, attribute, element.getAttribute(attribute));
357
357
  }
358
358
  } else {
359
359
  clone = element.cloneNode(true);
package/src/js/core/scrollspy.js CHANGED
@@ -48,7 +48,8 @@ export default {
48
48
 
49
49
  watch(elements, prev) {
50
50
  if (this.hidden) {
51
- css(filter(elements, `:not(.${this.inViewClass})`), 'visibility', 'hidden');
51
+ // use `opacity:0` instead of `visibility:hidden` to make content focusable with keyboard
52
+ css(filter(elements, `:not(.${this.inViewClass})`), 'opacity', 0);
52
53
  }
53
54
 
54
55
  if (!isEqual(elements, prev)) {
@@ -134,7 +135,7 @@ export default {
134
135
 
135
136
  state.off?.();
136
137
 
137
- css(el, 'visibility', !inview && this.hidden ? 'hidden' : '');
138
+ css(el, 'opacity', !inview && this.hidden ? 0 : '');
138
139
 
139
140
  toggleClass(el, this.inViewClass, inview);
140
141
  toggleClass(el, state.cls);
package/src/js/mixin/internal/animate-slide.js CHANGED
@@ -6,7 +6,6 @@ import {
6
6
  includes,
7
7
  index,
8
8
  isVisible,
9
- observeMutation,
10
9
  offset,
11
10
  parent,
12
11
  position,
@@ -32,7 +31,7 @@ export default async function (action, target, duration) {
32
31
  nodes = nodes.concat(children(target).filter((el) => !includes(nodes, el)));
33
32
 
34
33
  // Wait for update to propagate
35
- await awaitMutation();
34
+ await Promise.resolve();
36
35
 
37
36
  // Force update
38
37
  fastdom.flush();
@@ -144,19 +143,3 @@ function getPositionWithMargin(el) {
144
143
  function awaitFrame() {
145
144
  return new Promise((resolve) => requestAnimationFrame(resolve));
146
145
  }
147
-
148
- function awaitMutation() {
149
- const text = document.createTextNode('');
150
- const promise = new Promise((resolve) =>
151
- observeMutation(
152
- text,
153
- (_, observer) => {
154
- resolve();
155
- observer.disconnect();
156
- },
157
- { characterData: true }
158
- )
159
- );
160
- text.data = 1;
161
- return promise;
162
- }
package/tests/breadcrumb.html CHANGED
@@ -14,25 +14,31 @@
14
14
 
15
15
  <h1>Breadcrumb</h1>
16
16
 
17
- <ul class="uk-breadcrumb uk-width-xlarge">
18
- <li><a href="#">Home</a></li>
19
- <li><a href="#">Linked Category</a></li>
20
- <li class="uk-disabled"><a>Disabled Category</a></li>
21
- <li><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></li>
22
- </ul>
23
-
24
- <ul class="uk-breadcrumb uk-width-xlarge">
25
- <li><a href="#">Home</a></li>
26
- <li><a href="#">Linked Category</a></li>
27
- <li class="uk-disabled"><a>Disabled Category</a></li>
28
- <li class="uk-disabled"><a>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a></li>
29
- </ul>
30
-
31
- <ul class="uk-breadcrumb">
32
- <li><a href="#">Home</a></li>
33
- <li><a href="#">Linked Category</a></li>
34
- <li><a href="#">Linked Category</a></li>
35
- </ul>
17
+ <nav aria-label="Breadcrumb">
18
+ <ul class="uk-breadcrumb uk-width-xlarge">
19
+ <li><a href="#">Home</a></li>
20
+ <li><a href="#">Linked Category</a></li>
21
+ <li class="uk-disabled"><a>Disabled Category</a></li>
22
+ <li><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></li>
23
+ </ul>
24
+ </nav>
25
+
26
+ <nav aria-label="Breadcrumb">
27
+ <ul class="uk-breadcrumb uk-width-xlarge">
28
+ <li><a href="#">Home</a></li>
29
+ <li><a href="#">Linked Category</a></li>
30
+ <li class="uk-disabled"><a>Disabled Category</a></li>
31
+ <li class="uk-disabled"><a>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a></li>
32
+ </ul>
33
+ </nav>
34
+
35
+ <nav aria-label="Breadcrumb">
36
+ <ul class="uk-breadcrumb">
37
+ <li><a href="#">Home</a></li>
38
+ <li><a href="#">Linked Category</a></li>
39
+ <li><a href="#">Linked Category</a></li>
40
+ </ul>
41
+ </nav>
36
42
 
37
43
  </div>
38
44
 
package/tests/comment.html CHANGED
@@ -18,7 +18,7 @@
18
18
 
19
19
  <ul class="uk-comment-list">
20
20
  <li>
21
- <article class="uk-comment">
21
+ <article class="uk-comment" role="comment">
22
22
  <header class="uk-comment-header">
23
23
  <div class="uk-grid-medium uk-flex-middle" uk-grid>
24
24
  <div class="uk-width-auto">
@@ -39,7 +39,7 @@
39
39
  </article>
40
40
  </li>
41
41
  <li>
42
- <article class="uk-comment uk-visible-toggle" tabindex="-1">
42
+ <article class="uk-comment uk-visible-toggle" tabindex="-1" role="comment">
43
43
  <header class="uk-comment-header uk-position-relative">
44
44
  <div class="uk-grid-medium uk-flex-middle" uk-grid>
45
45
  <div class="uk-width-auto">
@@ -58,7 +58,7 @@
58
58
  </article>
59
59
  <ul>
60
60
  <li>
61
- <article class="uk-comment uk-visible-toggle" tabindex="-1">
61
+ <article class="uk-comment uk-visible-toggle" tabindex="-1" role="comment">
62
62
  <header class="uk-comment-header uk-position-relative">
63
63
  <div class="uk-grid-medium uk-flex-middle" uk-grid>
64
64
  <div class="uk-width-auto">
@@ -77,7 +77,7 @@
77
77
  </article>
78
78
  <ul>
79
79
  <li>
80
- <article class="uk-comment uk-comment-primary uk-visible-toggle" tabindex="-1">
80
+ <article class="uk-comment uk-comment-primary uk-visible-toggle" tabindex="-1" role="comment">
81
81
  <header class="uk-comment-header uk-position-relative">
82
82
  <div class="uk-grid-medium uk-flex-middle" uk-grid>
83
83
  <div class="uk-width-auto">
@@ -96,7 +96,7 @@
96
96
  </article>
97
97
  <ul>
98
98
  <li>
99
- <article class="uk-comment uk-visible-toggle" tabindex="-1">
99
+ <article class="uk-comment uk-visible-toggle" tabindex="-1" role="comment">
100
100
  <header class="uk-comment-header uk-position-relative">
101
101
  <div class="uk-grid-medium uk-flex-middle" uk-grid>
102
102
  <div class="uk-width-auto">
@@ -119,7 +119,7 @@
119
119
  </ul>
120
120
  </li>
121
121
  <li>
122
- <article class="uk-comment uk-visible-toggle" tabindex="-1">
122
+ <article class="uk-comment uk-visible-toggle" tabindex="-1" role="comment">
123
123
  <header class="uk-comment-header uk-position-relative">
124
124
  <div class="uk-grid-medium uk-flex-middle" uk-grid>
125
125
  <div class="uk-width-auto">
@@ -141,7 +141,7 @@
141
141
  </ul>
142
142
  </li>
143
143
  <li>
144
- <article class="uk-comment uk-visible-toggle" tabindex="-1">
144
+ <article class="uk-comment uk-visible-toggle" tabindex="-1" role="comment">
145
145
  <header class="uk-comment-header uk-position-relative">
146
146
  <div class="uk-grid-medium uk-flex-middle" uk-grid>
147
147
  <div class="uk-width-auto">
@@ -160,7 +160,7 @@
160
160
  </article>
161
161
  </li>
162
162
  <li>
163
- <article class="uk-comment uk-comment-primary uk-visible-toggle" tabindex="-1">
163
+ <article class="uk-comment uk-comment-primary uk-visible-toggle" tabindex="-1" role="comment">
164
164
  <header class="uk-comment-header uk-position-relative">
165
165
  <div class="uk-grid-medium uk-flex-middle" uk-grid>
166
166
  <div class="uk-width-auto">
@@ -179,7 +179,7 @@
179
179
  </article>
180
180
  <ul>
181
181
  <li>
182
- <article class="uk-comment uk-visible-toggle" tabindex="-1">
182
+ <article class="uk-comment uk-visible-toggle" tabindex="-1" role="comment">
183
183
  <header class="uk-comment-header uk-position-relative">
184
184
  <div class="uk-grid-medium uk-flex-middle" uk-grid>
185
185
  <div class="uk-width-auto">
package/tests/drop.html CHANGED
@@ -27,7 +27,7 @@
27
27
  <h1>Drop</h1>
28
28
 
29
29
  <div class="uk-margin uk-form-stacked">
30
- <select id="js-style-switcher" class="uk-select uk-form-width-small">
30
+ <select id="js-style-switcher" class="uk-select uk-form-width-small" aria-label="Style switcher">
31
31
  <option value="uk-dropdown">Dropdown</option>
32
32
  <option value="uk-dropbar">Dropbar</option>
33
33
  <option value="uk-card uk-card-body uk-card-default">Card Default</option>
@@ -557,7 +557,7 @@
557
557
  <h2>Shift and Flip</h2>
558
558
 
559
559
  <div class="uk-margin">
560
- <select id="js-boundary-overflow-switcher" class="uk-select uk-form-width-small">
560
+ <select id="js-boundary-overflow-switcher" class="uk-select uk-form-width-small" aria-label="Boundary overflow switcher">
561
561
  <option value="">Resize</option>
562
562
  <option value="test-boundary-overflow">Scroll</option>
563
563
  </select>
package/tests/dropbar.html CHANGED
@@ -30,7 +30,7 @@
30
30
  <h1>Dropbar</h1>
31
31
 
32
32
  <div class="uk-margin">
33
- <select id="js-size-switcher" class="uk-select uk-form-width-small">
33
+ <select id="js-size-switcher" class="uk-select uk-form-width-small" aria-label="Size switcher">
34
34
  <option value="">Default</option>
35
35
  <option value="uk-dropbar-large">Large</option>
36
36
  </select>
package/tests/dropdown.html CHANGED
@@ -31,7 +31,7 @@
31
31
  <h1>Dropdown</h1>
32
32
 
33
33
  <div class="uk-margin">
34
- <select id="js-size-switcher" class="uk-select uk-form-width-small">
34
+ <select id="js-size-switcher" class="uk-select uk-form-width-small" aria-label="Size switcher">
35
35
  <option value="">Default</option>
36
36
  <option value="uk-dropdown-large">Large</option>
37
37
  </select>
package/tests/filter.html CHANGED
@@ -42,7 +42,7 @@
42
42
  <h1>Filter</h1>
43
43
 
44
44
  <div class="uk-margin">
45
- <select id="js-animation-switcher" class="uk-select uk-form-width-small">
45
+ <select id="js-animation-switcher" class="uk-select uk-form-width-small" aria-label="Animation switcher">
46
46
  <option value="slide">Slide</option>
47
47
  <option value="fade">Fade</option>
48
48
  <option value="delayed-fade">Delayed Fade</option>
package/tests/form.html CHANGED
@@ -112,9 +112,9 @@
112
112
  <form>
113
113
 
114
114
  <div class="uk-margin" uk-margin>
115
- <textarea class="uk-textarea uk-form-width-small uk-form-large" rows="2" placeholder="Some text..."></textarea>
116
- <input class="uk-input uk-form-width-small uk-form-large" type="text" placeholder="Some text...">
117
- <select class="uk-select uk-form-width-small uk-form-large">
115
+ <textarea class="uk-textarea uk-form-width-small uk-form-large" rows="2" placeholder="Some text..." aria-label="Large"></textarea>
116
+ <input class="uk-input uk-form-width-small uk-form-large" type="text" placeholder="Some text..." aria-label="Large">
117
+ <select class="uk-select uk-form-width-small uk-form-large" aria-label="Large">
118
118
  <option>Option 01</option>
119
119
  <option>Option 02</option>
120
120
  </select>
@@ -123,9 +123,9 @@
123
123
  </div>
124
124
 
125
125
  <div class="uk-margin" uk-margin>
126
- <textarea class="uk-textarea uk-form-width-small" rows="2" placeholder="Some text..."></textarea>
127
- <input class="uk-input uk-form-width-small" type="text" placeholder="Some text...">
128
- <select class="uk-select uk-form-width-small">
126
+ <textarea class="uk-textarea uk-form-width-small" rows="2" placeholder="Some text..." aria-label="Default"></textarea>
127
+ <input class="uk-input uk-form-width-small" type="text" placeholder="Some text..." aria-label="Default">
128
+ <select class="uk-select uk-form-width-small" aria-label="Default">
129
129
  <option>Option 01</option>
130
130
  <option>Option 02</option>
131
131
  </select>
@@ -134,9 +134,9 @@
134
134
  </div>
135
135
 
136
136
  <div class="uk-margin" uk-margin>
137
- <textarea class="uk-textarea uk-form-width-small uk-form-small" rows="2" placeholder="Some text..."></textarea>
138
- <input class="uk-input uk-form-width-small uk-form-small" type="text" placeholder="Some text...">
139
- <select class="uk-select uk-form-width-small uk-form-small">
137
+ <textarea class="uk-textarea uk-form-width-small uk-form-small" rows="2" placeholder="Some text..." aria-label="Small"></textarea>
138
+ <input class="uk-input uk-form-width-small uk-form-small" type="text" placeholder="Some text..." aria-label="Small">
139
+ <select class="uk-select uk-form-width-small uk-form-small" aria-label="Small">
140
140
  <option>Option 01</option>
141
141
  <option>Option 02</option>
142
142
  </select>
@@ -151,40 +151,40 @@
151
151
  <form>
152
152
 
153
153
  <div class="uk-margin" uk-margin>
154
- <input class="uk-input uk-form-width-large" type="text" placeholder="form-width-large">
154
+ <input class="uk-input uk-form-width-large" type="text" placeholder="form-width-large" arial-label="Width large">
155
155
  </div>
156
156
 
157
157
  <div class="uk-margin" uk-margin>
158
- <select class="uk-select uk-form-width-large">
158
+ <select class="uk-select uk-form-width-large" arial-label="Width large">
159
159
  <option>form-width-large</option>
160
160
  </select>
161
161
  </div>
162
162
 
163
163
  <div class="uk-margin" uk-margin>
164
- <textarea class="uk-textarea uk-form-width-large" rows="1" placeholder="form-width-large"></textarea>
164
+ <textarea class="uk-textarea uk-form-width-large" rows="1" placeholder="form-width-large" arial-label="Width large"></textarea>
165
165
  </div>
166
166
 
167
167
  <div class="uk-margin" uk-margin>
168
- <input class="uk-input uk-form-width-medium" type="text" placeholder="form-width-medium">
169
- <input class="uk-input uk-form-width-small" type="text" placeholder="form-width-small">
170
- <input class="uk-input uk-form-width-xsmall" type="text" placeholder="form-width-xsmall">
168
+ <input class="uk-input uk-form-width-medium" type="text" placeholder="form-width-medium" arial-label="Width medium">
169
+ <input class="uk-input uk-form-width-small" type="text" placeholder="form-width-small" arial-label="Width small">
170
+ <input class="uk-input uk-form-width-xsmall" type="text" placeholder="form-width-xsmall" arial-label="Width xsmall">
171
171
  </div>
172
172
 
173
173
  <div class="uk-margin" uk-margin>
174
- <select class="uk-select uk-form-width-medium">
174
+ <select class="uk-select uk-form-width-medium" arial-label="Width medium">
175
175
  <option>form-width-medium</option>
176
176
  </select>
177
- <select class="uk-select uk-form-width-small">
177
+ <select class="uk-select uk-form-width-small" arial-label="Width small">
178
178
  <option>form-width-small</option>
179
179
  </select>
180
- <select class="uk-select uk-form-width-xsmall">
180
+ <select class="uk-select uk-form-width-xsmall" arial-label="Width xsmall">
181
181
  <option>form-width-xsmall</option>
182
182
  </select>
183
183
  </div>
184
184
 
185
185
  <div class="uk-margin" uk-margin>
186
- <textarea class="uk-textarea uk-form-width-medium" rows="1" placeholder="form-width-medium"></textarea>
187
- <textarea class="uk-textarea uk-form-width-small" rows="1" placeholder="form-width-small"></textarea>
186
+ <textarea class="uk-textarea uk-form-width-medium" rows="1" placeholder="form-width-medium" arial-label="Width medium"></textarea>
187
+ <textarea class="uk-textarea uk-form-width-small" rows="1" placeholder="form-width-small" arial-label="Width small"></textarea>
188
188
  </div>
189
189
 
190
190
  </form>
@@ -200,7 +200,7 @@
200
200
 
201
201
  <div class="uk-inline">
202
202
  <span class="uk-form-icon" uk-icon="icon: user"></span>
203
- <input class="uk-input uk-form-width-medium" type="text">
203
+ <input class="uk-input uk-form-width-medium" type="text" arial-label="Not clickable icon">
204
204
  </div>
205
205
 
206
206
  </div>
@@ -209,7 +209,7 @@
209
209
 
210
210
  <div class="uk-inline">
211
211
  <span class="uk-form-icon uk-form-icon-flip" uk-icon="icon: lock"></span>
212
- <input class="uk-input uk-form-width-medium" type="text">
212
+ <input class="uk-input uk-form-width-medium" type="text" arial-label="Not clickable icon">
213
213
  </div>
214
214
 
215
215
  </div>
@@ -223,7 +223,7 @@
223
223
 
224
224
  <div class="uk-inline">
225
225
  <a class="uk-form-icon" href="#" uk-icon="icon: pencil"></a>
226
- <input class="uk-input" type="text">
226
+ <input class="uk-input" type="text" arial-label="Clickable icon">
227
227
  </div>
228
228
 
229
229
  </div>
@@ -232,7 +232,7 @@
232
232
 
233
233
  <div class="uk-inline">
234
234
  <a class="uk-form-icon uk-form-icon-flip" href="#" uk-icon="icon: link"></a>
235
- <input class="uk-input" type="text">
235
+ <input class="uk-input" type="text" arial-label="Clickable icon">
236
236
  </div>
237
237
 
238
238
  </div>
@@ -242,20 +242,20 @@
242
242
 
243
243
  <h2>Select</h2>
244
244
 
245
- <select class="uk-select uk-form-width-large">
245
+ <select class="uk-select uk-form-width-large" arial-label="Select">
246
246
  <option>Option 01</option>
247
247
  <option>Option 02</option>
248
248
  </select>
249
249
 
250
250
  <p class="uk-margin-small">
251
- <select class="uk-select uk-form-width-large" disabled>
251
+ <select class="uk-select uk-form-width-large" arial-label="Select disabled" disabled>
252
252
  <option>Option 01</option>
253
253
  <option>Option 02</option>
254
254
  </select>
255
255
  </p>
256
256
 
257
257
  <p class="uk-margin-small">
258
- <select class="uk-select uk-form-width-large" multiple="multiple">
258
+ <select class="uk-select uk-form-width-large" arial-label="Select multiple" multiple="multiple">
259
259
  <option>Option 01</option>
260
260
  <option>Option 02</option>
261
261
  <option>Option 03</option>
@@ -329,7 +329,7 @@
329
329
  <div class="uk-margin">
330
330
 
331
331
  <div uk-form-custom>
332
- <input type="file">
332
+ <input type="file" aria-label="Custom controls">
333
333
  <button class="uk-button uk-button-default" type="button" tabindex="-1">Select</button>
334
334
  </div>
335
335
 
@@ -338,7 +338,7 @@
338
338
  <div class="uk-margin">
339
339
  <span class="uk-text-middle">Here is a text</span>
340
340
  <div uk-form-custom>
341
- <input type="file">
341
+ <input type="file" aria-label="Custom controls">
342
342
  <span class="uk-link">upload</span>
343
343
  </div>
344
344
  </div>
@@ -346,7 +346,7 @@
346
346
  <div class="uk-margin" uk-margin>
347
347
 
348
348
  <div uk-form-custom="target: true">
349
- <input type="file">
349
+ <input type="file" aria-label="Custom controls">
350
350
  <input class="uk-input uk-form-width-medium" type="text" placeholder="Select file" disabled>
351
351
  </div>
352
352
 
@@ -362,7 +362,7 @@
362
362
  <div class="uk-margin">
363
363
 
364
364
  <div uk-form-custom="target: true">
365
- <select>
365
+ <select aria-label="Custom controls">
366
366
  <option value="1">Option 01</option>
367
367
  <option value="2">Option 02</option>
368
368
  <option value="3">Option 03</option>
@@ -376,7 +376,7 @@
376
376
  <div class="uk-margin">
377
377
 
378
378
  <div uk-form-custom="target: > * > span:last-child">
379
- <select>
379
+ <select aria-label="Custom controls">
380
380
  <option value="1">Option 01</option>
381
381
  <option value="2">Option 02</option>
382
382
  <option value="3">Option 03</option>
@@ -393,7 +393,7 @@
393
393
  <div class="uk-margin">
394
394
 
395
395
  <div uk-form-custom="target: > * > span:first-child">
396
- <select>
396
+ <select aria-label="Custom controls">
397
397
  <option value="">Please select...</option>
398
398
  <option value="1">Option 01</option>
399
399
  <option value="2">Option 02</option>
@@ -411,7 +411,7 @@
411
411
  <div class="uk-margin">
412
412
 
413
413
  <div uk-form-custom="target: true">
414
- <select>
414
+ <select aria-label="Custom controls">
415
415
  <option value="">Please select...</option>
416
416
  <option value="1">Option 01</option>
417
417
  <option value="2">Option 02</option>
@@ -437,28 +437,28 @@
437
437
  <span class="uk-form-label">States and styles</span>
438
438
  <div class="uk-margin-small uk-grid-small uk-child-width-1-2" uk-grid>
439
439
  <div>
440
- <input class="uk-input" type="text" placeholder=":disabled" disabled>
440
+ <input class="uk-input" type="text" placeholder=":disabled" aria-label="disabled" disabled>
441
441
  </div>
442
442
  <div>
443
- <input class="uk-input" type="text" placeholder=":disabled" value="Some text..." disabled>
443
+ <input class="uk-input" type="text" placeholder=":disabled" aria-label="disabled" value="Some text..." disabled>
444
444
  </div>
445
445
  </div>
446
446
  <div class="uk-margin-small uk-grid-small" uk-grid>
447
447
  <div class="uk-width-expand">
448
- <input class="uk-input" type="text" placeholder=":focus" autofocus required>
448
+ <input class="uk-input" type="text" placeholder=":focus" aria-label="focus" autofocus required>
449
449
  </div>
450
450
  <div class="uk-width-auto">
451
451
  <button class="uk-button uk-button-default uk-width-1-1">Required</button>
452
452
  </div>
453
453
  </div>
454
454
  <div class="uk-margin-small">
455
- <input class="uk-input uk-form-danger" type="text" placeholder="form-danger" value="form-danger">
455
+ <input class="uk-input uk-form-danger" type="text" placeholder="form-danger" aria-label="form-danger" value="form-danger">
456
456
  </div>
457
457
  <div class="uk-margin-small">
458
- <input class="uk-input uk-form-success" type="text" placeholder="form-success" value="form-success">
458
+ <input class="uk-input uk-form-success" type="text" placeholder="form-success" aria-label="form-success" value="form-success">
459
459
  </div>
460
460
  <div class="uk-margin-small">
461
- <input class="uk-input uk-form-blank" type="text" placeholder="form-blank">
461
+ <input class="uk-input uk-form-blank" type="text" placeholder="form-blank" aria-label="form-blank">
462
462
  </div>
463
463
  </div>
464
464
 
package/tests/icon.html CHANGED
@@ -82,6 +82,7 @@
82
82
  <li><span class="uk-margin-small-right" uk-icon="icon: clock"></span> clock</li>
83
83
  <li><span class="uk-margin-small-right" uk-icon="icon: history"></span> history</li>
84
84
  <li><span class="uk-margin-small-right" uk-icon="icon: future"></span> future</li>
85
+ <li><span class="uk-margin-small-right" uk-icon="icon: crosshairs"></span> crosshairs</li>
85
86
  <li><span class="uk-margin-small-right" uk-icon="icon: pencil"></span> pencil</li>
86
87
  <li><span class="uk-margin-small-right" uk-icon="icon: trash"></span> trash</li>
87
88
  <li><span class="uk-margin-small-right" uk-icon="icon: move"></span> move</li>
@@ -261,6 +262,7 @@
261
262
  <li><a class="uk-icon-link" href="#" uk-icon="icon: clock"></a></li>
262
263
  <li><a class="uk-icon-link" href="#" uk-icon="icon: history"></a></li>
263
264
  <li><a class="uk-icon-link" href="#" uk-icon="icon: future"></a></li>
265
+ <li><a class="uk-icon-link" href="#" uk-icon="icon: crosshairs"></a></li>
264
266
  <li><a class="uk-icon-link" href="#" uk-icon="icon: pencil"></a></li>
265
267
  <li><a class="uk-icon-link" href="#" uk-icon="icon: link"></a></li>
266
268
  <li><a class="uk-icon-link" href="#" uk-icon="icon: trash"></a></li>
@@ -424,6 +426,7 @@
424
426
  <li><a class="uk-icon-button" href="#" uk-icon="icon: clock"></a></li>
425
427
  <li><a class="uk-icon-button" href="#" uk-icon="icon: history"></a></li>
426
428
  <li><a class="uk-icon-button" href="#" uk-icon="icon: future"></a></li>
429
+ <li><a class="uk-icon-button" href="#" uk-icon="icon: crosshairs"></a></li>
427
430
  <li><a class="uk-icon-button" href="#" uk-icon="icon: pencil"></a></li>
428
431
  <li><a class="uk-icon-button" href="#" uk-icon="icon: link"></a></li>
429
432
  <li><a class="uk-icon-button" href="#" uk-icon="icon: trash"></a></li>
@@ -585,6 +588,7 @@
585
588
  <li><span uk-icon="ratio: 2; icon: clock"></span></li>
586
589
  <li><span uk-icon="ratio: 2; icon: history"></span></li>
587
590
  <li><span uk-icon="ratio: 2; icon: future"></span></li>
591
+ <li><span uk-icon="ratio: 2; icon: crosshairs"></span></li>
588
592
  <li><span uk-icon="ratio: 2; icon: pencil"></span></li>
589
593
  <li><span uk-icon="ratio: 2; icon: link"></span></li>
590
594
  <li><span uk-icon="ratio: 2; icon: trash"></span></li>