@umbraco-ui/uui-menu-item 1.9.0-rc.1 → 1.9.0

package/custom-elements.json

@@ -53,6 +53,12 @@
           "type": "string",
           "default": "\"undefined\""
         },
+        {
+          "name": "caret-label",
+          "description": "Sets the aria-label for the caret button.",
+          "type": "string",
+          "default": "\"'Reveal the underlying items'\""
+        },
         {
           "name": "select-only",
           "description": "Enforce selection interaction and prevent all other interactions, set this when the UI is turned into Selection-Mode.",
@@ -138,6 +144,13 @@
           "type": "string",
           "default": "\"undefined\""
         },
+        {
+          "name": "caretLabel",
+          "attribute": "caret-label",
+          "description": "Sets the aria-label for the caret button.",
+          "type": "string",
+          "default": "\"'Reveal the underlying items'\""
+        },
         {
           "name": "styles",
           "type": "CSSResult[]",

package/lib/index.js

@@ -32,6 +32,7 @@ let UUIMenuItemElement = class extends SelectOnlyMixin(
     this.showChildren = false;
     this.hasChildren = false;
     this.loading = false;
+    this.caretLabel = "Reveal the underlying items";
     this.iconSlotHasContent = false;
     this._labelButtonChanged = (label) => {
       this.selectableTarget = label || this;
@@ -105,8 +106,13 @@ let UUIMenuItemElement = class extends SelectOnlyMixin(
   render() {
     return html`
       <div id="menu-item" aria-label="menuitem" role="menuitem">
-        ${this.hasChildren ? html`<button id="caret-button" @click=${this._onCaretClicked}>
-              <uui-symbol-expand ?open=${this.showChildren}></uui-symbol-expand>
+        ${this.hasChildren ? html`<button
+              id="caret-button"
+              aria-label=${this.caretLabel}
+              @click=${this._onCaretClicked}>
+              <uui-symbol-expand
+                aria-hidden="true"
+                ?open=${this.showChildren}></uui-symbol-expand>
             </button>` : ""}
         ${this.href ? this._renderLabelAsAnchor() : this._renderLabelAsButton()}
 
@@ -514,6 +520,9 @@ __decorateClass([
 __decorateClass([
   property({ type: String, attribute: "select-mode", reflect: true })
 ], UUIMenuItemElement.prototype, "selectMode", 2);
+__decorateClass([
+  property({ type: String, attribute: "caret-label" })
+], UUIMenuItemElement.prototype, "caretLabel", 2);
 __decorateClass([
   state()
 ], UUIMenuItemElement.prototype, "iconSlotHasContent", 2);

package/lib/uui-menu-item.element.d.ts

@@ -78,6 +78,13 @@ export declare class UUIMenuItemElement extends UUIMenuItemElement_base {
      * @default undefined
      */
     selectMode?: 'highlight' | 'persisting';
+    /**
+     * Sets the aria-label for the caret button.
+     * @remark Only used when the menu item has children.
+     * @attr
+     * @default 'Reveal the underlying items'
+     */
+    caretLabel: string;
     private iconSlotHasContent;
     connectedCallback(): void;
     focus(): Promise<void>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umbraco-ui/uui-menu-item",
-  "version": "1.9.0-rc.1",
+  "version": "1.9.0",
   "license": "MIT",
   "keywords": [
     "Umbraco",
@@ -30,9 +30,9 @@
     "custom-elements.json"
   ],
   "dependencies": {
-    "@umbraco-ui/uui-base": "1.9.0-rc.1",
-    "@umbraco-ui/uui-loader-bar": "1.9.0-rc.1",
-    "@umbraco-ui/uui-symbol-expand": "1.9.0-rc.1"
+    "@umbraco-ui/uui-base": "1.9.0",
+    "@umbraco-ui/uui-loader-bar": "1.9.0",
+    "@umbraco-ui/uui-symbol-expand": "1.9.0"
   },
   "scripts": {
     "build": "npm run analyze && tsc --build && rollup -c rollup.config.js",
@@ -43,5 +43,5 @@
     "access": "public"
   },
   "homepage": "https://uui.umbraco.com/?path=/story/uui-menu-item",
-  "gitHead": "7092b4717d8b9d4825b15e087508b8f75bf81a92"
+  "gitHead": "37111ea2cebb5883dcef0e682916f1e101013123"
 }