@fluid-topics/ft-accordion 0.3.61 → 0.3.63

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -23,9 +23,12 @@ export class FtAccordionItem extends FtLitElement {
23
23
  <div class="ft-accordion-item ${this.active ? "ft-accordion-item--active" : ""}">
24
24
  <div class="ft-accordion-item--toggle"
25
25
  part="toggle"
26
+ role="button"
26
27
  @click=${() => this.active = !this.active}
27
28
  @keydown=${this.onToggleKeyDown}
28
- tabindex="0">
29
+ tabindex="0"
30
+ aria-controls="ft-accordion-item-content"
31
+ aria-expanded="${this.active}">
29
32
  <ft-ripple part="toggle-ripple"></ft-ripple>
30
33
  ${this.icon ? html `
31
34
  <ft-icon variant="material">${this.icon}</ft-icon>
@@ -38,7 +41,10 @@ export class FtAccordionItem extends FtLitElement {
38
41
  `}
39
42
  <ft-icon variant="material">${this.active ? "expand_less" : "expand_more"}</ft-icon>
40
43
  </div>
41
- <div class="ft-accordion-item--content" part="content" @focusin=${() => this.active = true}>
44
+ <div id="ft-accordion-item-content"
45
+ class="ft-accordion-item--content"
46
+ part="content"
47
+ @focusin=${() => this.active = true}>
42
48
  <slot></slot>
43
49
  </div>
44
50
  <div class="ft-accordion-item--separator" part="separator"></div>
@@ -321,9 +321,12 @@ const nt=Symbol.for(""),lt=t=>{if((null==t?void 0:t.r)===nt)return null==t?void
321
321
  <div class="ft-accordion-item ${this.active?"ft-accordion-item--active":""}">
322
322
  <div class="ft-accordion-item--toggle"
323
323
  part="toggle"
324
+ role="button"
324
325
  @click=${()=>this.active=!this.active}
325
326
  @keydown=${this.onToggleKeyDown}
326
- tabindex="0">
327
+ tabindex="0"
328
+ aria-controls="ft-accordion-item-content"
329
+ aria-expanded="${this.active}">
327
330
  <ft-ripple part="toggle-ripple"></ft-ripple>
328
331
  ${this.icon?i.html`
329
332
  <ft-icon variant="material">${this.icon}</ft-icon>
@@ -336,7 +339,10 @@ const nt=Symbol.for(""),lt=t=>{if((null==t?void 0:t.r)===nt)return null==t?void
336
339
  `}
337
340
  <ft-icon variant="material">${this.active?"expand_less":"expand_more"}</ft-icon>
338
341
  </div>
339
- <div class="ft-accordion-item--content" part="content" @focusin=${()=>this.active=!0}>
342
+ <div id="ft-accordion-item-content"
343
+ class="ft-accordion-item--content"
344
+ part="content"
345
+ @focusin=${()=>this.active=!0}>
340
346
  <slot></slot>
341
347
  </div>
342
348
  <div class="ft-accordion-item--separator" part="separator"></div>
@@ -445,9 +445,12 @@ class xi extends St{constructor(t){if(super(t),this.it=V,t.type!==$t)throw Error
445
445
  <div class="ft-accordion-item ${this.active?"ft-accordion-item--active":""}">
446
446
  <div class="ft-accordion-item--toggle"
447
447
  part="toggle"
448
+ role="button"
448
449
  @click=${()=>this.active=!this.active}
449
450
  @keydown=${this.onToggleKeyDown}
450
- tabindex="0">
451
+ tabindex="0"
452
+ aria-controls="ft-accordion-item-content"
453
+ aria-expanded="${this.active}">
451
454
  <ft-ripple part="toggle-ripple"></ft-ripple>
452
455
  ${this.icon?H`
453
456
  <ft-icon variant="material">${this.icon}</ft-icon>
@@ -460,7 +463,10 @@ class xi extends St{constructor(t){if(super(t),this.it=V,t.type!==$t)throw Error
460
463
  `}
461
464
  <ft-icon variant="material">${this.active?"expand_less":"expand_more"}</ft-icon>
462
465
  </div>
463
- <div class="ft-accordion-item--content" part="content" @focusin=${()=>this.active=!0}>
466
+ <div id="ft-accordion-item-content"
467
+ class="ft-accordion-item--content"
468
+ part="content"
469
+ @focusin=${()=>this.active=!0}>
464
470
  <slot></slot>
465
471
  </div>
466
472
  <div class="ft-accordion-item--separator" part="separator"></div>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluid-topics/ft-accordion",
3
- "version": "0.3.61",
3
+ "version": "0.3.63",
4
4
  "description": "The accordion component allows the user to show and hide sections of related content on a page.",
5
5
  "keywords": [
6
6
  "Lit"
@@ -19,11 +19,11 @@
19
19
  "url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
20
20
  },
21
21
  "dependencies": {
22
- "@fluid-topics/ft-icon": "0.3.61",
23
- "@fluid-topics/ft-ripple": "0.3.61",
24
- "@fluid-topics/ft-typography": "0.3.61",
25
- "@fluid-topics/ft-wc-utils": "0.3.61",
22
+ "@fluid-topics/ft-icon": "0.3.63",
23
+ "@fluid-topics/ft-ripple": "0.3.63",
24
+ "@fluid-topics/ft-typography": "0.3.63",
25
+ "@fluid-topics/ft-wc-utils": "0.3.63",
26
26
  "lit": "2.2.8"
27
27
  },
28
- "gitHead": "12a4024fb3084b17772a3aef10723d22ae56c877"
28
+ "gitHead": "0f9703a51261fa203c190b1852718e829ae31b7c"
29
29
  }