@brightspace-ui/core 3.110.0 → 3.110.2
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.
@@ -232,6 +232,7 @@ class AlertToast extends LitElement {
|
|
232
232
|
'd2l-alert-toast-container-lowest': !this._totalSiblingHeightBelow,
|
233
233
|
'vdiff-target': true
|
234
234
|
};
|
235
|
+
|
235
236
|
return html`
|
236
237
|
<div
|
237
238
|
class="${classMap(containerClasses)}"
|
@@ -248,6 +249,7 @@ class AlertToast extends LitElement {
|
|
248
249
|
?hidden="${this._state === states.CLOSED}"
|
249
250
|
@mouseenter=${this._onMouseEnter}
|
250
251
|
@mouseleave=${this._onMouseLeave}
|
252
|
+
role="${ifDefined(this._state !== states.CLOSED ? 'alert' : undefined)}"
|
251
253
|
subtext="${ifDefined(this.subtext)}"
|
252
254
|
type="${ifDefined(this.type)}">
|
253
255
|
<slot></slot>
|
@@ -392,7 +394,6 @@ class AlertToast extends LitElement {
|
|
392
394
|
this._totalSiblingHeightBelow = 0;
|
393
395
|
this._numAlertsBelow = 0;
|
394
396
|
this._closeClicked = false;
|
395
|
-
this.removeAttribute('role');
|
396
397
|
}
|
397
398
|
|
398
399
|
_onTransitionEnd() {
|
@@ -420,13 +421,11 @@ class AlertToast extends LitElement {
|
|
420
421
|
this._state = states.OPEN;
|
421
422
|
}
|
422
423
|
}
|
423
|
-
this.setAttribute('role', 'alert');
|
424
424
|
} else {
|
425
425
|
if (!this._innerContainer) return;
|
426
426
|
|
427
427
|
if (activeReduceMotion || this._state === states.PREOPENING) {
|
428
428
|
cancelAnimationFrame(this._preopenFrame);
|
429
|
-
this.removeAttribute('role');
|
430
429
|
} else if (this._state === states.OPENING || this._state === states.OPEN || this._state === states.SLIDING) {
|
431
430
|
this._state = states.CLOSING;
|
432
431
|
}
|
@@ -214,7 +214,7 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
|
|
214
214
|
|
215
215
|
connectedCallback() {
|
216
216
|
super.connectedCallback();
|
217
|
-
this.role = this.gridActive ? '
|
217
|
+
this.role = this.gridActive ? 'gridcell' : undefined;
|
218
218
|
}
|
219
219
|
|
220
220
|
firstUpdated() {
|
@@ -265,7 +265,7 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
|
|
265
265
|
|
266
266
|
_focusFirstRow() {
|
267
267
|
const list = findComposedAncestor(this, (node) => node.tagName === 'D2L-LIST');
|
268
|
-
const row = list.firstElementChild.shadowRoot.querySelector('[role="
|
268
|
+
const row = list.firstElementChild.shadowRoot.querySelector('[role="gridcell"]');
|
269
269
|
if (this.dir === 'rtl') {
|
270
270
|
row._focusLastCell();
|
271
271
|
} else {
|
@@ -288,7 +288,7 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
|
|
288
288
|
|
289
289
|
_focusLastRow() {
|
290
290
|
const list = findComposedAncestor(this, (node) => node.tagName === 'D2L-LIST');
|
291
|
-
const row = list.lastElementChild.shadowRoot.querySelector('[role="
|
291
|
+
const row = list.lastElementChild.shadowRoot.querySelector('[role="gridcell"]');
|
292
292
|
if (this.dir === 'rtl') {
|
293
293
|
row._focusFirstCell();
|
294
294
|
} else {
|
@@ -320,7 +320,7 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
|
|
320
320
|
|
321
321
|
_focusNextRow(focusInfo, previous = false, num = 1) {
|
322
322
|
|
323
|
-
const curListItem = findComposedAncestor(this, node => node.role === '
|
323
|
+
const curListItem = findComposedAncestor(this, node => node.role === 'row');
|
324
324
|
let listItem = curListItem;
|
325
325
|
|
326
326
|
while (num > 0) {
|
@@ -331,7 +331,7 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
|
|
331
331
|
}
|
332
332
|
|
333
333
|
if (!listItem) return;
|
334
|
-
const listItemRow = listItem.shadowRoot.querySelector('[role="
|
334
|
+
const listItemRow = listItem.shadowRoot.querySelector('[role="gridcell"]');
|
335
335
|
const focusedCellItem = listItemRow._focusCellItem(focusInfo);
|
336
336
|
|
337
337
|
if (!focusedCellItem) {
|
@@ -339,7 +339,7 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
|
|
339
339
|
if (!listItem._tryFocus()) {
|
340
340
|
// ultimate fallback to generic method for getting next/previous focusable
|
341
341
|
const nextFocusable = previous ? getPreviousFocusable(listItem) : getNextFocusable(listItem);
|
342
|
-
const nextListItem = findComposedAncestor(nextFocusable, (node) => node.role === '
|
342
|
+
const nextListItem = findComposedAncestor(nextFocusable, (node) => node.role === 'row' || node.role === 'listitem');
|
343
343
|
if (nextListItem && this._isContainedInSameRootList(curListItem, nextListItem)) {
|
344
344
|
nextFocusable.focus();
|
345
345
|
}
|
@@ -363,7 +363,7 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
|
|
363
363
|
// check for nested list first; this check needs to account for standard list-items as well as custom
|
364
364
|
const nestedList = listItem.querySelector('[slot="nested"]') || listItem.shadowRoot.querySelector('d2l-list');
|
365
365
|
if (nestedList && (!listItem.expandable || (listItem.expandable && listItem.expanded))) {
|
366
|
-
const nestedListItem = [...nestedList.children].find(node => node.role === '
|
366
|
+
const nestedListItem = [...nestedList.children].find(node => node.role === 'row');
|
367
367
|
if (nestedListItem) return nestedListItem;
|
368
368
|
}
|
369
369
|
|
@@ -372,7 +372,7 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
|
|
372
372
|
// check for sibling list-item
|
373
373
|
let nextElement = listItem.nextElementSibling;
|
374
374
|
while (nextElement) {
|
375
|
-
if (nextElement.role === '
|
375
|
+
if (nextElement.role === 'row') return nextElement;
|
376
376
|
nextElement = nextElement.nextElementSibling;
|
377
377
|
}
|
378
378
|
|
@@ -380,7 +380,7 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
|
|
380
380
|
const list = findComposedAncestor(listItem, node => node.tagName === 'D2L-LIST');
|
381
381
|
if (list.slot !== 'nested' && !(list.parentNode.tagName === 'SLOT' && list.parentNode.name === 'nested')) return;
|
382
382
|
|
383
|
-
const parentListItem = findComposedAncestor(list, node => node.role === '
|
383
|
+
const parentListItem = findComposedAncestor(list, node => node.role === 'row');
|
384
384
|
return getNextListItem(parentListItem);
|
385
385
|
|
386
386
|
};
|
@@ -396,14 +396,14 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
|
|
396
396
|
|
397
397
|
// try to get the previous list-item in the current list sub-tree including nested
|
398
398
|
while (previousElement) {
|
399
|
-
if (previousElement.role === '
|
399
|
+
if (previousElement.role === 'row') {
|
400
400
|
|
401
401
|
let nestedList;
|
402
402
|
do {
|
403
403
|
// this check needs to account for standard list-items as well as custom
|
404
404
|
nestedList = previousElement.querySelector('[slot="nested"]') || previousElement.shadowRoot.querySelector('d2l-list');
|
405
405
|
if (nestedList) {
|
406
|
-
const nestedListItems = [...nestedList.children].filter(node => node.role === '
|
406
|
+
const nestedListItems = [...nestedList.children].filter(node => node.role === 'row');
|
407
407
|
if (nestedListItems.length) {
|
408
408
|
previousElement = nestedListItems[nestedListItems.length - 1];
|
409
409
|
} else {
|
@@ -421,7 +421,7 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
|
|
421
421
|
|
422
422
|
// this check needs to account for standard list-items as well as custom
|
423
423
|
if (list.slot === 'nested' || (list.parentNode.tagName === 'SLOT' && list.parentNode.name === 'nested')) {
|
424
|
-
const parentListItem = findComposedAncestor(list, node => node.role === '
|
424
|
+
const parentListItem = findComposedAncestor(list, node => node.role === 'row');
|
425
425
|
return parentListItem;
|
426
426
|
}
|
427
427
|
|
@@ -460,7 +460,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
|
|
460
460
|
|
461
461
|
connectedCallback() {
|
462
462
|
super.connectedCallback();
|
463
|
-
if (this.role === '
|
463
|
+
if (this.role === 'row') {
|
464
464
|
addTabListener();
|
465
465
|
}
|
466
466
|
if (!this.selectable && !this.expandable) {
|
@@ -599,12 +599,12 @@ export const ListItemMixin = superclass => class extends composeMixins(
|
|
599
599
|
|
600
600
|
_isListItem(node) {
|
601
601
|
if (!node) node = this;
|
602
|
-
return node.role === '
|
602
|
+
return node.role === 'row' || node.role === 'listitem';
|
603
603
|
}
|
604
604
|
|
605
605
|
_onFocusIn() {
|
606
606
|
this._focusing = true;
|
607
|
-
if (this.role !== '
|
607
|
+
if (this.role !== 'row' || !tabPressed || hasDisplayedKeyboardTooltip) return;
|
608
608
|
this._displayKeyboardTooltip = true;
|
609
609
|
hasDisplayedKeyboardTooltip = true;
|
610
610
|
}
|
@@ -696,7 +696,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
|
|
696
696
|
@focusout="${this._onFocusOut}"
|
697
697
|
class="${classMap(classes)}"
|
698
698
|
data-separators="${ifDefined(this._separators)}"
|
699
|
-
?grid-active="${this.role === '
|
699
|
+
?grid-active="${this.role === 'row'}"
|
700
700
|
?no-primary-action="${this.noPrimaryAction}">
|
701
701
|
${this._showAddButton && this.first ? html`
|
702
702
|
<div slot="add-top">
|
@@ -27,7 +27,7 @@ export const ListItemRoleMixin = superclass => class extends superclass {
|
|
27
27
|
|
28
28
|
const separators = parent.getAttribute('separators');
|
29
29
|
|
30
|
-
this.role = parent.hasAttribute('grid') ? '
|
30
|
+
this.role = parent.hasAttribute('grid') ? 'row' : 'listitem';
|
31
31
|
this._nested = (parent.slot === 'nested');
|
32
32
|
this._separators = separators || undefined;
|
33
33
|
this._extendSeparators = parent.hasAttribute('extend-separators');
|
package/components/list/list.js
CHANGED
@@ -205,7 +205,7 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
|
|
205
205
|
}
|
206
206
|
|
207
207
|
render() {
|
208
|
-
const role = !this.grid ? 'list' : 'application';
|
208
|
+
const role = !this.grid ? 'list' : 'application'; // not using grid role due to Safari+VO: https://bugs.webkit.org/show_bug.cgi?id=291591
|
209
209
|
const ariaLabel = this.slot !== 'nested' ? this.label : undefined;
|
210
210
|
return html`
|
211
211
|
<slot name="controls"></slot>
|
@@ -235,7 +235,7 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
|
|
235
235
|
if (!slot) slot = this.shadowRoot.querySelector('slot:not([name])');
|
236
236
|
if (!slot) return [];
|
237
237
|
return slot.assignedNodes({ flatten: true }).filter((node) => {
|
238
|
-
return node.nodeType === Node.ELEMENT_NODE && (node.role === '
|
238
|
+
return node.nodeType === Node.ELEMENT_NODE && (node.role === 'row' || node.role === 'listitem');
|
239
239
|
});
|
240
240
|
}
|
241
241
|
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@brightspace-ui/core",
|
3
|
-
"version": "3.110.
|
3
|
+
"version": "3.110.2",
|
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",
|