diff --git a/src/auro-menu.js b/src/auro-menu.js index 3350478..0f04f93 100644 --- a/src/auro-menu.js +++ b/src/auro-menu.js @@ -9,6 +9,8 @@ import styleCss from "./style-menu-css.js"; import colorCss from "./color-menu-css.js"; import tokensCss from "./tokens-css.js"; +import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs'; + import './auro-menuoption.js'; import "mark.js/dist/mark.es6.min.js"; @@ -50,6 +52,11 @@ export class AuroMenu extends LitElement { * @private */ this.rootMenu = true; + + /** + * @private + */ + this.runtimeUtils = new AuroLibraryRuntimeUtils(); } static get properties() { @@ -100,6 +107,9 @@ export class AuroMenu extends LitElement { } firstUpdated() { + // Add the tag name as an attribute if it is different than the component name + this.runtimeUtils.handleComponentTagRename(this, 'auro-menu'); + this.addEventListener('keydown', this.handleKeyDown); } diff --git a/src/auro-menuoption.js b/src/auro-menuoption.js index 892986a..49e85f1 100644 --- a/src/auro-menuoption.js +++ b/src/auro-menuoption.js @@ -10,8 +10,9 @@ import styleCss from "./style-menuoption-css.js"; import colorCss from "./color-menuoption-css.js"; import tokensCss from "./tokens-css.js"; - +import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs'; import { AuroDependencyVersioning } from '@aurodesignsystem/auro-library/scripts/runtime/dependencyTagVersioning.mjs'; + import { AuroIcon } from '@aurodesignsystem/auro-icon/src/auro-icon.js'; import iconVersion from './iconVersion'; @@ -32,7 +33,6 @@ class AuroMenuOption extends LitElement { /** * Generate unique names for dependency components. */ - const versioning = new AuroDependencyVersioning(); this.iconTag = versioning.generateTag('auro-icon', iconVersion, AuroIcon); @@ -44,6 +44,11 @@ class AuroMenuOption extends LitElement { * @private */ this.tabIndex = -1; + + /** + * @private + */ + this.runtimeUtils = new AuroLibraryRuntimeUtils(); } static get properties() { @@ -80,6 +85,9 @@ class AuroMenuOption extends LitElement { } firstUpdated() { + // Add the tag name as an attribute if it is different than the component name + this.runtimeUtils.handleComponentTagRename(this, 'auro-menuoption'); + this.setAttribute('role', 'option'); this.addEventListener('mouseover', () => {