@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 ? 'gridrow' : undefined;
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="gridrow"]');
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="gridrow"]');
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 === 'rowgroup');
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="gridrow"]');
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 === 'rowgroup' || node.role === 'listitem');
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 === 'rowgroup');
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 === 'rowgroup') return nextElement;
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 === 'rowgroup');
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 === 'rowgroup') {
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 === 'rowgroup');
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 === 'rowgroup');
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 === 'rowgroup') {
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 === 'rowgroup' || node.role === 'listitem';
602
+ return node.role === 'row' || node.role === 'listitem';
603
603
  }
604
604
 
605
605
  _onFocusIn() {
606
606
  this._focusing = true;
607
- if (this.role !== 'rowgroup' || !tabPressed || hasDisplayedKeyboardTooltip) return;
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 === 'rowgroup'}"
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') ? 'rowgroup' : 'listitem';
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');
@@ -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 === 'rowgroup' || node.role === 'listitem');
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.0",
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",