fix(dropdown-item): provides accessible label when href is not parsed (…

…#7316) **Related Issue:** #6921 ## Summary This PR provides accessible label for `calcite-dropdown-item` irrespective of `href` property value.
Esri · Jul 14, 2023 · 966b83d · 966b83d
1 parent 25aff2f
commit 966b83d
Showing 1 changed file with 17 additions and 16 deletions.
diff --git a/packages/calcite-components/src/components/dropdown-item/dropdown-item.tsx b/packages/calcite-components/src/components/dropdown-item/dropdown-item.tsx
@@ -128,10 +128,11 @@ export class DropdownItem implements LoadableComponent {
 
   render(): VNode {
     const scale = getElementProp(this.el, "scale", this.scale);
+    const { href, selectionMode, label, iconFlipRtl } = this;
     const iconStartEl = (
       <calcite-icon
         class={CSS.iconStart}
-        flipRtl={this.iconFlipRtl === "start" || this.iconFlipRtl === "both"}
+        flipRtl={iconFlipRtl === "start" || iconFlipRtl === "both"}
         icon={this.iconStart}
         scale={scale === "l" ? "m" : "s"}
       />
@@ -144,7 +145,7 @@ export class DropdownItem implements LoadableComponent {
     const iconEndEl = (
       <calcite-icon
         class={CSS.iconEnd}
-        flipRtl={this.iconFlipRtl === "end" || this.iconFlipRtl === "both"}
+        flipRtl={iconFlipRtl === "end" || iconFlipRtl === "both"}
         icon={this.iconEnd}
         scale={scale === "l" ? "m" : "s"}
       />
@@ -159,13 +160,13 @@ export class DropdownItem implements LoadableComponent {
         ? [contentNode, iconEndEl]
         : contentNode;
 
-    const contentEl = !this.href ? (
+    const contentEl = !href ? (
       slottedContent
     ) : (
       <a
-        aria-label={this.label}
+        aria-label={label}
         class={CSS.link}
-        href={this.href}
+        href={href}
         rel={this.rel}
         tabIndex={-1}
         target={this.target}
@@ -176,34 +177,34 @@ export class DropdownItem implements LoadableComponent {
       </a>
     );
 
-    const itemRole = this.href
+    const itemRole = href
       ? null
-      : this.selectionMode === "single"
+      : selectionMode === "single"
       ? "menuitemradio"
-      : this.selectionMode === "multiple"
+      : selectionMode === "multiple"
       ? "menuitemcheckbox"
       : "menuitem";
 
-    const itemAria = this.selectionMode !== "none" ? toAriaBoolean(this.selected) : null;
+    const itemAria = selectionMode !== "none" ? toAriaBoolean(this.selected) : null;
 
     return (
-      <Host aria-checked={itemAria} role={itemRole} tabindex="0">
+      <Host aria-checked={itemAria} aria-label={!href ? label : ""} role={itemRole} tabindex="0">
         <div
           class={{
             container: true,
-            [CSS.containerLink]: !!this.href,
+            [CSS.containerLink]: !!href,
             [CSS.containerSmall]: scale === "s",
             [CSS.containerMedium]: scale === "m",
             [CSS.containerLarge]: scale === "l",
-            [CSS.containerMulti]: this.selectionMode === "multiple",
-            [CSS.containerSingle]: this.selectionMode === "single",
-            [CSS.containerNone]: this.selectionMode === "none"
+            [CSS.containerMulti]: selectionMode === "multiple",
+            [CSS.containerSingle]: selectionMode === "single",
+            [CSS.containerNone]: selectionMode === "none"
           }}
         >
-          {this.selectionMode !== "none" ? (
+          {selectionMode !== "none" ? (
             <calcite-icon
               class={CSS.icon}
-              icon={this.selectionMode === "multiple" ? "check" : "bullet-point"}
+              icon={selectionMode === "multiple" ? "check" : "bullet-point"}
               scale={scale === "l" ? "m" : "s"}
             />
           ) : null}