fix(dropdown): fix wrong labelledby definition (#591)

Trendyol · Jun 7, 2023 · 2f54bce · 2f54bce
1 parent a98e77c
commit 2f54bce
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 5 deletions.
diff --git a/src/components/dropdown/group/bl-dropdown-group.test.ts b/src/components/dropdown/group/bl-dropdown-group.test.ts
@@ -14,7 +14,7 @@ describe('bl-dropdown-group', () => {
  assert.shadowDom.equal(
  el,
  `
- <div class="dropdown-group" role="group"><slot></slot></div>
+ <div class="dropdown-group" role="group" aria-labelledby="label"><slot></slot></div>
  `
  );
  });
@@ -25,7 +25,7 @@ describe('bl-dropdown-group', () => {
  assert.shadowDom.equal(
  el,
  `
- <div class="dropdown-group" role="group" aria-labelledby="caption"><span class="caption">caption</span><slot></slot></div>
+ <div class="dropdown-group" role="group" aria-labelledby="label"><span id="label" class="caption">caption</span><slot></slot></div>
  `
  );
  });

diff --git a/src/components/dropdown/group/bl-dropdown-group.ts b/src/components/dropdown/group/bl-dropdown-group.ts
@@ -1,7 +1,6 @@
 import { LitElement, html, CSSResultGroup, TemplateResult } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import style from './bl-dropdown-group.css';
-import { ifDefined } from 'lit/directives/if-defined.js';
 
 export const blDropdownGroupTag = 'bl-dropdown-group';
 
@@ -22,12 +21,12 @@ export default class BlDropdownGroup extends LitElement {
  caption?: string;
 
  render(): TemplateResult {
- const caption = this.caption ? html`<span class="caption">${this.caption}</span>` : '';
+ const caption = this.caption ? html`<span id="label" class="caption">${this.caption}</span>` : '';
 
  return html`<div
  class="dropdown-group"
  role="group"
- aria-labelledby="${ifDefined(this.caption)}"
+ aria-labelledby="label"
  >
  ${caption}
  <slot></slot>