@brightspace-ui/labs 2.20.0 → 2.20.1

package/package.json

@@ -98,5 +98,5 @@
     "resize-observer-polyfill": "^1",
     "webvtt-parser": "^2.1.2"
   },
-  "version": "2.20.0"
+  "version": "2.20.1"
 }

package/src/components/navigation/navigation-dropdown-button-custom.js

@@ -1,9 +1,16 @@
 import { css, html, LitElement } from 'lit';
 import { highlightBorderStyles, highlightButtonStyles } from './navigation-styles.js';
 import { DropdownOpenerMixin } from '@brightspace-ui/core/components/dropdown/dropdown-opener-mixin.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 
 class NavigationDropdownButtonCustom extends DropdownOpenerMixin(LitElement) {
 
+	static get properties() {
+		return {
+			openerLabel: { type: String, attribute: 'opener-label' }
+		};
+	}
+
 	static get styles() {
 		return [highlightBorderStyles, highlightButtonStyles, css`
 			:host {
@@ -19,7 +26,10 @@ class NavigationDropdownButtonCustom extends DropdownOpenerMixin(LitElement) {
 
 	render() {
 		return html`
-			<button type="button">
+			<button
+				type="button"
+				aria-haspopup="menu"
+				aria-label="${ifDefined(this.openerLabel)}">
 				<span class="d2l-labs-navigation-highlight-border"></span>
 				<slot name="opener"></slot>
 			</button>

package/src/components/navigation/navigation-skip.js

@@ -44,14 +44,9 @@ class NavigationSkip extends FocusMixin(PropertyRequiredMixin(LitElement)) {
 	}
 
 	render() {
-		return html`<a tabindex="0" @keydown="${this._handleKeyDown}" class="vdiff-target">${this.text}</a>`;
-	}
-
-	_handleKeyDown(e) {
-		if (e.keyCode === 13) {
-			e.preventDefault();
-			this.dispatchEvent(new CustomEvent('click', { bubbles: true, composed: true }));
-		}
+		// Href attribute is needed for a11y tools to recognize anchor as a link
+		// and for click events to be dispatched using key presses
+		return html`<a href="javascript:void(0);" class="vdiff-target">${this.text}</a>`;
 	}
 
 }