@brightspace-ui/core 2.163.0 → 2.165.0
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.
- package/components/button/button-add.js +127 -0
- package/components/button/demo/button-add.html +73 -0
- package/custom-elements.json +37 -0
- package/lang/ar.js +1 -0
- package/lang/cy.js +1 -0
- package/lang/da.js +1 -0
- package/lang/de.js +1 -0
- package/lang/en-gb.js +1 -0
- package/lang/en.js +1 -0
- package/lang/es-es.js +1 -0
- package/lang/es.js +1 -0
- package/lang/fr-fr.js +1 -0
- package/lang/fr.js +1 -0
- package/lang/hi.js +1 -0
- package/lang/ja.js +1 -0
- package/lang/ko.js +1 -0
- package/lang/nl.js +1 -0
- package/lang/pt.js +1 -0
- package/lang/sv.js +1 -0
- package/lang/tr.js +1 -0
- package/lang/zh-cn.js +1 -0
- package/lang/zh-tw.js +1 -0
- package/package.json +1 -2
- package/tools/a11y-test-helper.js +0 -39
|
@@ -0,0 +1,127 @@
|
|
|
1
|
+
import '../colors/colors.js';
|
|
2
|
+
import '../icons/icon.js';
|
|
3
|
+
import '../tooltip/tooltip.js';
|
|
4
|
+
import { css, html, LitElement, unsafeCSS } from 'lit';
|
|
5
|
+
import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
|
|
6
|
+
import { getFocusPseudoClass } from '../../helpers/focus.js';
|
|
7
|
+
import { getUniqueId } from '../../helpers/uniqueId.js';
|
|
8
|
+
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
9
|
+
import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
|
|
10
|
+
import { PropertyRequiredMixin } from '../../mixins/property-required/property-required-mixin.js';
|
|
11
|
+
|
|
12
|
+
/**
|
|
13
|
+
* A component for quickly adding items to a specific locaiton.
|
|
14
|
+
*/
|
|
15
|
+
class ButtonAdd extends PropertyRequiredMixin(FocusMixin(LocalizeCoreElement(LitElement))) {
|
|
16
|
+
static get properties() {
|
|
17
|
+
return {
|
|
18
|
+
/**
|
|
19
|
+
* When text-visible is true, the text to show in the button. When text-visible is false, the text to show in the tooltip.
|
|
20
|
+
* @type {string}
|
|
21
|
+
*/
|
|
22
|
+
text: { type: String, required: true },
|
|
23
|
+
/**
|
|
24
|
+
* When true, show the button with icon and visible text. When false, only show icon.
|
|
25
|
+
* @type {boolean}
|
|
26
|
+
*/
|
|
27
|
+
textVisible: { type: Boolean, reflect: true, attribute: 'text-visible' }
|
|
28
|
+
};
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
static get styles() {
|
|
32
|
+
return css`
|
|
33
|
+
:host {
|
|
34
|
+
--d2l-button-add-line-style: solid;
|
|
35
|
+
}
|
|
36
|
+
button {
|
|
37
|
+
align-items: center;
|
|
38
|
+
background-color: transparent;
|
|
39
|
+
border: 0;
|
|
40
|
+
box-shadow: none;
|
|
41
|
+
cursor: pointer;
|
|
42
|
+
display: flex;
|
|
43
|
+
font-family: inherit;
|
|
44
|
+
justify-content: center;
|
|
45
|
+
outline: none;
|
|
46
|
+
padding: 0;
|
|
47
|
+
position: relative;
|
|
48
|
+
user-select: none;
|
|
49
|
+
white-space: nowrap;
|
|
50
|
+
width: 100%;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.line {
|
|
54
|
+
border-top: 1px var(--d2l-button-add-line-style) var(--d2l-color-mica);
|
|
55
|
+
margin: 3px 0; /** hover/click target */
|
|
56
|
+
width: 100%;
|
|
57
|
+
}
|
|
58
|
+
button:hover .line,
|
|
59
|
+
button:${unsafeCSS(getFocusPseudoClass())} .line {
|
|
60
|
+
border-top-color: var(--d2l-color-celestine);
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.content {
|
|
64
|
+
align-items: center;
|
|
65
|
+
background-color: white;
|
|
66
|
+
display: flex;
|
|
67
|
+
position: absolute;
|
|
68
|
+
}
|
|
69
|
+
:host([text-visible]) .content {
|
|
70
|
+
color: var(--d2l-color-celestine);
|
|
71
|
+
height: 1.5rem;
|
|
72
|
+
padding: 0 0.3rem;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
:host([text-visible]) d2l-icon,
|
|
76
|
+
:host(:not([text-visible])) button:hover d2l-icon,
|
|
77
|
+
:host(:not([text-visible])) button:${unsafeCSS(getFocusPseudoClass())} d2l-icon {
|
|
78
|
+
color: var(--d2l-color-celestine);
|
|
79
|
+
}
|
|
80
|
+
:host(:not([text-visible])) d2l-icon {
|
|
81
|
+
color: var(--d2l-color-galena);
|
|
82
|
+
margin: -3px; /** hover/click target */
|
|
83
|
+
padding: 3px; /** hover/click target */
|
|
84
|
+
}
|
|
85
|
+
:host([text-visible]) d2l-icon {
|
|
86
|
+
padding-inline-end: 0.2rem;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
span {
|
|
90
|
+
font-size: 0.7rem;
|
|
91
|
+
font-weight: 700;
|
|
92
|
+
letter-spacing: 0.2px;
|
|
93
|
+
line-height: 1rem;
|
|
94
|
+
}
|
|
95
|
+
`;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
constructor() {
|
|
99
|
+
super();
|
|
100
|
+
|
|
101
|
+
this.textVisible = false;
|
|
102
|
+
this._buttonId = getUniqueId();
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
static get focusElementSelector() {
|
|
106
|
+
return 'button';
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
render() {
|
|
110
|
+
const text = this.text || this.localize('components.button-add.addItem');
|
|
111
|
+
const id = !this.textVisible ? this._buttonId : undefined;
|
|
112
|
+
|
|
113
|
+
return html`
|
|
114
|
+
<button class="d2l-label-text" id="${ifDefined(id)}">
|
|
115
|
+
<div class="line"></div>
|
|
116
|
+
<div class="content">
|
|
117
|
+
<d2l-icon icon="tier1:plus-default"></d2l-icon>
|
|
118
|
+
${this.textVisible
|
|
119
|
+
? html`<span>${text}</span>`
|
|
120
|
+
: html`<d2l-tooltip class="vdiff-target" offset="18" for="${this._buttonId}" for-type="label">${text}</d2l-tooltip>`}
|
|
121
|
+
</div>
|
|
122
|
+
</button>
|
|
123
|
+
`;
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
customElements.define('d2l-button-add', ButtonAdd);
|
|
127
|
+
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
5
|
+
<meta charset="UTF-8">
|
|
6
|
+
<link rel="stylesheet" href="../../demo/styles.css" type="text/css">
|
|
7
|
+
<script type="module">
|
|
8
|
+
import '../../demo/demo-page.js';
|
|
9
|
+
import '../button-add.js';
|
|
10
|
+
</script>
|
|
11
|
+
<style>
|
|
12
|
+
.d2l-button-add-dashed {
|
|
13
|
+
--d2l-button-add-line-style: dashed;
|
|
14
|
+
}
|
|
15
|
+
</style>
|
|
16
|
+
</head>
|
|
17
|
+
<body unresolved>
|
|
18
|
+
|
|
19
|
+
<d2l-demo-page page-title="d2l-button-add">
|
|
20
|
+
|
|
21
|
+
<h2>Add Button</h2>
|
|
22
|
+
|
|
23
|
+
<d2l-demo-snippet>
|
|
24
|
+
<template>
|
|
25
|
+
<d2l-button-add></d2l-button-add>
|
|
26
|
+
</template>
|
|
27
|
+
</d2l-demo-snippet>
|
|
28
|
+
|
|
29
|
+
<h2>Add Button, dashed line</h2>
|
|
30
|
+
|
|
31
|
+
<d2l-demo-snippet>
|
|
32
|
+
<template>
|
|
33
|
+
<d2l-button-add class="d2l-button-add-dashed"></d2l-button-add>
|
|
34
|
+
</template>
|
|
35
|
+
</d2l-demo-snippet>
|
|
36
|
+
|
|
37
|
+
<h2>Add Button, custom text</h2>
|
|
38
|
+
|
|
39
|
+
<d2l-demo-snippet>
|
|
40
|
+
<template>
|
|
41
|
+
<d2l-button-add text="Custom Tooltip"></d2l-button-add>
|
|
42
|
+
</template>
|
|
43
|
+
</d2l-demo-snippet>
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
<h2>Add Button, text-visible</h2>
|
|
47
|
+
|
|
48
|
+
<d2l-demo-snippet>
|
|
49
|
+
<template>
|
|
50
|
+
<d2l-button-add text-visible></d2l-button-add>
|
|
51
|
+
</template>
|
|
52
|
+
</d2l-demo-snippet>
|
|
53
|
+
|
|
54
|
+
|
|
55
|
+
<h2>Add Button, text-visible, custom text</h2>
|
|
56
|
+
|
|
57
|
+
<d2l-demo-snippet>
|
|
58
|
+
<template>
|
|
59
|
+
<d2l-button-add text-visible text="Custom Text"></d2l-button-add>
|
|
60
|
+
</template>
|
|
61
|
+
</d2l-demo-snippet>
|
|
62
|
+
|
|
63
|
+
</d2l-demo-page>
|
|
64
|
+
|
|
65
|
+
<script>
|
|
66
|
+
document.addEventListener('click', e => {
|
|
67
|
+
if (e.target.tagName !== 'D2L-BUTTON-ADD') return;
|
|
68
|
+
console.log('add button clicked', e.target);
|
|
69
|
+
});
|
|
70
|
+
</script>
|
|
71
|
+
|
|
72
|
+
</body>
|
|
73
|
+
</html>
|
package/custom-elements.json
CHANGED
|
@@ -343,6 +343,43 @@
|
|
|
343
343
|
}
|
|
344
344
|
]
|
|
345
345
|
},
|
|
346
|
+
{
|
|
347
|
+
"name": "d2l-button-add",
|
|
348
|
+
"path": "./components/button/button-add.js",
|
|
349
|
+
"description": "A component for quickly adding items to a specific locaiton.",
|
|
350
|
+
"attributes": [
|
|
351
|
+
{
|
|
352
|
+
"name": "text",
|
|
353
|
+
"description": "When text-visible is true, the text to show in the button. When text-visible is false, the text to show in the tooltip.",
|
|
354
|
+
"type": "string"
|
|
355
|
+
},
|
|
356
|
+
{
|
|
357
|
+
"name": "text-visible",
|
|
358
|
+
"description": "When true, show the button with icon and visible text. When false, only show icon.",
|
|
359
|
+
"type": "boolean",
|
|
360
|
+
"default": "false"
|
|
361
|
+
}
|
|
362
|
+
],
|
|
363
|
+
"properties": [
|
|
364
|
+
{
|
|
365
|
+
"name": "text",
|
|
366
|
+
"attribute": "text",
|
|
367
|
+
"description": "When text-visible is true, the text to show in the button. When text-visible is false, the text to show in the tooltip.",
|
|
368
|
+
"type": "string"
|
|
369
|
+
},
|
|
370
|
+
{
|
|
371
|
+
"name": "textVisible",
|
|
372
|
+
"attribute": "text-visible",
|
|
373
|
+
"description": "When true, show the button with icon and visible text. When false, only show icon.",
|
|
374
|
+
"type": "boolean",
|
|
375
|
+
"default": "false"
|
|
376
|
+
},
|
|
377
|
+
{
|
|
378
|
+
"name": "documentLocaleSettings",
|
|
379
|
+
"default": "\"getDocumentLocaleSettings()\""
|
|
380
|
+
}
|
|
381
|
+
]
|
|
382
|
+
},
|
|
346
383
|
{
|
|
347
384
|
"name": "d2l-button-icon",
|
|
348
385
|
"path": "./components/button/button-icon.js",
|
package/lang/ar.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export default {
|
|
2
2
|
"components.alert.close": "إغلاق التنبيه",
|
|
3
3
|
"components.breadcrumbs.breadcrumb": "شريط التنقل",
|
|
4
|
+
"components.button-add.addItem": "Add Item",
|
|
4
5
|
"components.calendar.notSelected": "لم يتم التحديد.",
|
|
5
6
|
"components.calendar.selected": "تم التحديد.",
|
|
6
7
|
"components.calendar.show": "إظهار {month}",
|
package/lang/cy.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export default {
|
|
2
2
|
"components.alert.close": "Cau Hysbysiad",
|
|
3
3
|
"components.breadcrumbs.breadcrumb": "Briwsionyn Bara",
|
|
4
|
+
"components.button-add.addItem": "Add Item",
|
|
4
5
|
"components.calendar.notSelected": "Heb ei Ddewis.",
|
|
5
6
|
"components.calendar.selected": "Wedi'i Ddewis.",
|
|
6
7
|
"components.calendar.show": "Dangos {month}",
|
package/lang/da.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export default {
|
|
2
2
|
"components.alert.close": "Luk besked",
|
|
3
3
|
"components.breadcrumbs.breadcrumb": "Brødkrumme",
|
|
4
|
+
"components.button-add.addItem": "Add Item",
|
|
4
5
|
"components.calendar.notSelected": "Ikke valgt.",
|
|
5
6
|
"components.calendar.selected": "Valgt.",
|
|
6
7
|
"components.calendar.show": "Vis {month}",
|
package/lang/de.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export default {
|
|
2
2
|
"components.alert.close": "Benachrichtigung schließen",
|
|
3
3
|
"components.breadcrumbs.breadcrumb": "Brotkrümelnavigation",
|
|
4
|
+
"components.button-add.addItem": "Add Item",
|
|
4
5
|
"components.calendar.notSelected": "Nicht ausgewählt.",
|
|
5
6
|
"components.calendar.selected": "Ausgewählt.",
|
|
6
7
|
"components.calendar.show": "{month} anzeigen",
|
package/lang/en-gb.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export default {
|
|
2
2
|
"components.alert.close": "Close Alert",
|
|
3
3
|
"components.breadcrumbs.breadcrumb": "Breadcrumb",
|
|
4
|
+
"components.button-add.addItem": "Add Item",
|
|
4
5
|
"components.calendar.notSelected": "Not Selected.",
|
|
5
6
|
"components.calendar.selected": "Selected.",
|
|
6
7
|
"components.calendar.show": "Show {month}",
|
package/lang/en.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export default {
|
|
2
2
|
"components.alert.close": "Close Alert",
|
|
3
3
|
"components.breadcrumbs.breadcrumb": "Breadcrumb",
|
|
4
|
+
"components.button-add.addItem": "Add Item",
|
|
4
5
|
"components.calendar.notSelected": "Not Selected.",
|
|
5
6
|
"components.calendar.selected": "Selected.",
|
|
6
7
|
"components.calendar.show": "Show {month}",
|
package/lang/es-es.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export default {
|
|
2
2
|
"components.alert.close": "Cerrar alerta",
|
|
3
3
|
"components.breadcrumbs.breadcrumb": "Ruta de navegación",
|
|
4
|
+
"components.button-add.addItem": "Add Item",
|
|
4
5
|
"components.calendar.notSelected": "No seleccionado.",
|
|
5
6
|
"components.calendar.selected": "Seleccionado.",
|
|
6
7
|
"components.calendar.show": "Mostrar {month}",
|
package/lang/es.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export default {
|
|
2
2
|
"components.alert.close": "Cerrar alerta",
|
|
3
3
|
"components.breadcrumbs.breadcrumb": "Ruta de navegación",
|
|
4
|
+
"components.button-add.addItem": "Add Item",
|
|
4
5
|
"components.calendar.notSelected": "No seleccionado.",
|
|
5
6
|
"components.calendar.selected": "Seleccionado.",
|
|
6
7
|
"components.calendar.show": "Mostrar {month}",
|
package/lang/fr-fr.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export default {
|
|
2
2
|
"components.alert.close": "Fermer l'alerte",
|
|
3
3
|
"components.breadcrumbs.breadcrumb": "Chemin de navigation",
|
|
4
|
+
"components.button-add.addItem": "Add Item",
|
|
4
5
|
"components.calendar.notSelected": "Non sélectionné.",
|
|
5
6
|
"components.calendar.selected": "Sélectionné.",
|
|
6
7
|
"components.calendar.show": "Afficher {month}",
|
package/lang/fr.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export default {
|
|
2
2
|
"components.alert.close": "Fermer l'alerte",
|
|
3
3
|
"components.breadcrumbs.breadcrumb": "Chemin de navigation",
|
|
4
|
+
"components.button-add.addItem": "Add Item",
|
|
4
5
|
"components.calendar.notSelected": "Non sélectionné(e)",
|
|
5
6
|
"components.calendar.selected": "Sélectionné(e).",
|
|
6
7
|
"components.calendar.show": "Afficher {month}",
|
package/lang/hi.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export default {
|
|
2
2
|
"components.alert.close": "अलर्ट बंद करें",
|
|
3
3
|
"components.breadcrumbs.breadcrumb": "ब्रेडक्रंब",
|
|
4
|
+
"components.button-add.addItem": "Add Item",
|
|
4
5
|
"components.calendar.notSelected": "चयनित नहीं।",
|
|
5
6
|
"components.calendar.selected": "चयनित।",
|
|
6
7
|
"components.calendar.show": "{month} दिखाएँ",
|
package/lang/ja.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export default {
|
|
2
2
|
"components.alert.close": "アラートを閉じる",
|
|
3
3
|
"components.breadcrumbs.breadcrumb": "階層",
|
|
4
|
+
"components.button-add.addItem": "Add Item",
|
|
4
5
|
"components.calendar.notSelected": "選択されていません。",
|
|
5
6
|
"components.calendar.selected": "選択されています。",
|
|
6
7
|
"components.calendar.show": "{month} を表示",
|
package/lang/ko.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export default {
|
|
2
2
|
"components.alert.close": "경보 닫기",
|
|
3
3
|
"components.breadcrumbs.breadcrumb": "이동 경로",
|
|
4
|
+
"components.button-add.addItem": "Add Item",
|
|
4
5
|
"components.calendar.notSelected": "선택되지 않음.",
|
|
5
6
|
"components.calendar.selected": "선택됨.",
|
|
6
7
|
"components.calendar.show": "{month} 표시",
|
package/lang/nl.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export default {
|
|
2
2
|
"components.alert.close": "Waarschuwing sluiten",
|
|
3
3
|
"components.breadcrumbs.breadcrumb": "Kruimelpad",
|
|
4
|
+
"components.button-add.addItem": "Add Item",
|
|
4
5
|
"components.calendar.notSelected": "Niet geselecteerd.",
|
|
5
6
|
"components.calendar.selected": "Geselecteerd.",
|
|
6
7
|
"components.calendar.show": "{month} weergeven",
|
package/lang/pt.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export default {
|
|
2
2
|
"components.alert.close": "Fechar alerta",
|
|
3
3
|
"components.breadcrumbs.breadcrumb": "Auxiliar de navegação",
|
|
4
|
+
"components.button-add.addItem": "Add Item",
|
|
4
5
|
"components.calendar.notSelected": "Não selecionado.",
|
|
5
6
|
"components.calendar.selected": "Selecionado.",
|
|
6
7
|
"components.calendar.show": "Mostrar {month}",
|
package/lang/sv.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export default {
|
|
2
2
|
"components.alert.close": "Stängningsvarning",
|
|
3
3
|
"components.breadcrumbs.breadcrumb": "Sökväg",
|
|
4
|
+
"components.button-add.addItem": "Add Item",
|
|
4
5
|
"components.calendar.notSelected": "Inte vald.",
|
|
5
6
|
"components.calendar.selected": "Markerad.",
|
|
6
7
|
"components.calendar.show": "Visa {month}",
|
package/lang/tr.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export default {
|
|
2
2
|
"components.alert.close": "Kapatma Uyarısı",
|
|
3
3
|
"components.breadcrumbs.breadcrumb": "İçerik Haritası",
|
|
4
|
+
"components.button-add.addItem": "Add Item",
|
|
4
5
|
"components.calendar.notSelected": "Seçili Değil.",
|
|
5
6
|
"components.calendar.selected": "Seçili.",
|
|
6
7
|
"components.calendar.show": "{month} Göster",
|
package/lang/zh-cn.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export default {
|
|
2
2
|
"components.alert.close": "关闭提醒",
|
|
3
3
|
"components.breadcrumbs.breadcrumb": "痕迹导航",
|
|
4
|
+
"components.button-add.addItem": "Add Item",
|
|
4
5
|
"components.calendar.notSelected": "未选择。",
|
|
5
6
|
"components.calendar.selected": "已选择。",
|
|
6
7
|
"components.calendar.show": "显示 {month}",
|
package/lang/zh-tw.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export default {
|
|
2
2
|
"components.alert.close": "關閉警示",
|
|
3
3
|
"components.breadcrumbs.breadcrumb": "導覽路徑",
|
|
4
|
+
"components.button-add.addItem": "Add Item",
|
|
4
5
|
"components.calendar.notSelected": "未選取。",
|
|
5
6
|
"components.calendar.selected": "已選取。",
|
|
6
7
|
"components.calendar.show": "顯示{month}",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.165.0",
|
|
4
4
|
"description": "A collection of accessible, free, open-source web components for building Brightspace applications",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"repository": "https://github.com/BrightspaceUI/core.git",
|
|
@@ -51,7 +51,6 @@
|
|
|
51
51
|
"@rollup/plugin-node-resolve": "^15",
|
|
52
52
|
"@rollup/plugin-replace": "^5",
|
|
53
53
|
"@web/dev-server": "^0.2",
|
|
54
|
-
"axe-core": "^4",
|
|
55
54
|
"chalk": "^5",
|
|
56
55
|
"eslint": "^8",
|
|
57
56
|
"eslint-config-brightspace": "^0.23",
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
/*eslint no-console: 0*/
|
|
2
|
-
/*eslint no-undef: 0*/
|
|
3
|
-
import 'axe-core/axe.min.js';
|
|
4
|
-
|
|
5
|
-
/*
|
|
6
|
-
* Rules can be disabled using the options parameter:
|
|
7
|
-
* options = { "rules":
|
|
8
|
-
* {
|
|
9
|
-
* "color-contrast": { enabled: false },
|
|
10
|
-
* "valid-lang": { enabled: false }
|
|
11
|
-
* }
|
|
12
|
-
* }
|
|
13
|
-
* Rule ids can be found here: https://github.com/dequelabs/axe-core/blob/master/doc/rule-descriptions.md
|
|
14
|
-
*/
|
|
15
|
-
export async function runAxe(element, options) {
|
|
16
|
-
const results = await axe.run(element, options);
|
|
17
|
-
|
|
18
|
-
const violations = results.violations;
|
|
19
|
-
|
|
20
|
-
console.log('Inapplicable Tests:', results.inapplicable.length);
|
|
21
|
-
console.log('Passed Tests:', results.passes.length);
|
|
22
|
-
console.log('Failed Tests:', results.violations.length);
|
|
23
|
-
|
|
24
|
-
if (!violations.length) {
|
|
25
|
-
return Promise.resolve();
|
|
26
|
-
}
|
|
27
|
-
const errorMessage = ['Accessibility Violations', '---'];
|
|
28
|
-
for (const violation of violations) {
|
|
29
|
-
errorMessage.push(violation.help);
|
|
30
|
-
for (const node of violation.nodes) {
|
|
31
|
-
if (node.failureSummary) {
|
|
32
|
-
errorMessage.push(node.failureSummary);
|
|
33
|
-
}
|
|
34
|
-
errorMessage.push(node.html);
|
|
35
|
-
}
|
|
36
|
-
errorMessage.push('---');
|
|
37
|
-
}
|
|
38
|
-
return Promise.reject(new Error(errorMessage.join('\n')));
|
|
39
|
-
}
|