Skip to content

Commit 72d4678

Browse files
planctusplanctus
committed
fix(accordion): Fixing markup of the item, removing unneeded title-id - FRONT-4228
1 parent 537325c commit 72d4678

File tree

6 files changed

+63
-34
lines changed

6 files changed

+63
-34
lines changed

‎src/components.d.ts

+4-2
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,10 @@ export namespace Components {
1616
"expanded": boolean;
1717
"itemId": string;
1818
"label": string;
19+
"labelCollapsed": string;
20+
"labelExpanded": string;
1921
"styleClass": string;
2022
"theme": string;
21-
"titleId": string;
2223
}
2324
interface EclBanner {
2425
"bannerTitle": string;
@@ -1442,9 +1443,10 @@ declare namespace LocalJSX {
14421443
"expanded"?: boolean;
14431444
"itemId"?: string;
14441445
"label"?: string;
1446+
"labelCollapsed"?: string;
1447+
"labelExpanded"?: string;
14451448
"styleClass"?: string;
14461449
"theme"?: string;
1447-
"titleId"?: string;
14481450
}
14491451
interface EclBanner {
14501452
"bannerTitle"?: string;

‎src/components/ecl-accordion/ecl-accordion-item.tsx

+14-6
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,10 @@ export class EclAccordionItem {
1313
@Prop() styleClass: string;
1414
@Prop() label: string;
1515
@Prop() itemId: string;
16-
@Prop() titleId: string;
1716
@Prop({reflect:true}) expanded: boolean;
1817
@Prop() theme: string = 'ec';
18+
@Prop() labelExpanded = '';
19+
@Prop() labelCollapsed = '';
1920

2021
getClass(): string {
2122
return [
@@ -26,24 +27,31 @@ export class EclAccordionItem {
2627
}
2728

2829
render() {
30+
const titleId = `${this.itemId}-title`;
31+
const contentId = `${this.itemId}-content`;
2932
return (
3033
<div
3134
class={this.getClass()}
32-
id={this.itemId || null}
33-
aria-labelledby={this.titleId || null}
35+
aria-labelledby={titleId}
3436
>
3537
<h3
3638
class={`ecl-accordion__title sc-ecl-accordion-${this.theme}`}
37-
id={this.titleId || null}
39+
id={titleId}
3840
>
3941
<button
42+
type="button"
4043
data-ecl-accordion-toggle
41-
aria-controls={`${this.el.id}-content`}
44+
aria-controls={contentId}
4245
class={`ecl-accordion__toggle sc-ecl-accordion-${this.theme}`}
4346
aria-expanded={this.expanded ? 'true' : 'false'}
47+
data-ecl-label-collapsed={this.labelCollapsed}
48+
data-ecl-label-expanded={this.labelExpanded}
4449
>
4550
<span class={`ecl-accordion__toggle-flex sc-ecl-accordion-${this.theme}`}>
4651
<span class={`ecl-accordion__toggle-indicator sc-ecl-accordion-${this.theme}`}>
52+
<span class={`ecl-accordion__toggle-label sc-ecl-accordion-${this.theme}`}>
53+
{this.expanded ? this.labelExpanded : this.labelCollapsed}
54+
</span>
4755
<ecl-icon
4856
icon={this.expanded ? "minus" : 'plus'}
4957
theme={this.theme}
@@ -61,7 +69,7 @@ export class EclAccordionItem {
6169
<div
6270
class={`ecl-accordion__content sc-ecl-accordion-${this.theme}`}
6371
role="region"
64-
id={`${this.el.id}-content`}
72+
id={contentId}
6573
hidden={this.expanded !== true}
6674
>
6775
<slot></slot>

‎src/components/ecl-accordion/ecl-accordion.stories.ts

+6-3
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,10 @@ const Template = (args) =>
99
>
1010
<ecl-accordion-item
1111
item-id="ecl-accordion-item-id-1"
12-
title-id="accordion-example-title-1"
1312
label="Delivery of last pending proposals, a common Destiny of unity, the hour of European Democracy"
1413
theme="${args.theme}"
14+
label-expanded="Close"
15+
label-collapsed="Open"
1516
>
1617
The College of Commissioners held today the first weekly meeting of 2019 which was devoted to discussing the
1718
challenges of this new year. Commissioners used the opportunity to take stock and discuss the year ahead,
@@ -21,18 +22,20 @@ const Template = (args) =>
2122
<ecl-accordion-item
2223
item-id="ecl-accordion-item-id-2"
2324
label="Energy union and climate"
24-
title-id="accordion-example-title-2"
2525
expanded
2626
theme="${args.theme}"
27+
label-expanded="Close"
28+
label-collapsed="Open"
2729
>
2830
A balanced and progressive trade policy to harness globalisation
2931
</ecl-accordion-item>
3032
3133
<ecl-accordion-item
3234
item-id="ecl-accordion-item-id-3"
33-
title-id="accordion-example-title-3"
3435
label="Delivery of last pending proposals, a common Destiny of unity, the hour of European Democracy"
3536
theme="${args.theme}"
37+
label-expanded="Close"
38+
label-collapsed="Open"
3639
>
3740
In the modern global economy trade is essential for growth, <ecl-link path="https://ec.europa.eu/">jobs</ecl-link> and competiveness, and the EU is committed to
3841
maintaining an open and rules-based trading system. With the rising threat of protectionism and weakened

‎src/components/ecl-accordion/readme.md

+9-8
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,15 @@
77

88
## Properties
99

10-
| Property | Attribute | Description | Type | Default |
11-
| ------------ | ------------- | ----------- | --------- | ----------- |
12-
| `expanded` | `expanded` | | `boolean` | `undefined` |
13-
| `itemId` | `item-id` | | `string` | `undefined` |
14-
| `label` | `label` | | `string` | `undefined` |
15-
| `styleClass` | `style-class` | | `string` | `undefined` |
16-
| `theme` | `theme` | | `string` | `'ec'` |
17-
| `titleId` | `title-id` | | `string` | `undefined` |
10+
| Property | Attribute | Description | Type | Default |
11+
| ---------------- | ----------------- | ----------- | --------- | ----------- |
12+
| `expanded` | `expanded` | | `boolean` | `undefined` |
13+
| `itemId` | `item-id` | | `string` | `undefined` |
14+
| `label` | `label` | | `string` | `undefined` |
15+
| `labelCollapsed` | `label-collapsed` | | `string` | `''` |
16+
| `labelExpanded` | `label-expanded` | | `string` | `''` |
17+
| `styleClass` | `style-class` | | `string` | `undefined` |
18+
| `theme` | `theme` | | `string` | `'ec'` |
1819

1920

2021
## Dependencies

‎src/components/ecl-accordion/test/__snapshots__/ecl-accordion.spec.tsx.snap

+21-12
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,16 @@ exports[`ecl-accordion renders 1`] = `
44
<ecl-accordion theme="ec">
55
<!---->
66
<div class="ecl-accordion">
7-
<ecl-accordion-item icon-path="/icons.svg" id="ecl-accordion-item-id-1" label="Delivery of last pending proposals, a common Destiny of unity, the hour of European Democracy">
7+
<ecl-accordion-item icon-path="/icons.svg" item-id="ecl-accordion-item-id-1" label="Delivery of last pending proposals, a common Destiny of unity, the hour of European Democracy" label-collapsed="Open" label-expanded="Close">
88
<!---->
9-
<div class="ecl-accordion__item sc-ecl-accordion-ec">
10-
<h3 class="ecl-accordion__title sc-ecl-accordion-ec">
11-
<button aria-controls="ecl-accordion-item-id-1-content" aria-expanded="false" class="ecl-accordion__toggle sc-ecl-accordion-ec" data-ecl-accordion-toggle>
9+
<div aria-labelledby="ecl-accordion-item-id-1-title" class="ecl-accordion__item sc-ecl-accordion-ec">
10+
<h3 class="ecl-accordion__title sc-ecl-accordion-ec" id="ecl-accordion-item-id-1-title">
11+
<button aria-controls="ecl-accordion-item-id-1-content" aria-expanded="false" class="ecl-accordion__toggle sc-ecl-accordion-ec" data-ecl-accordion-toggle data-ecl-label-collapsed="Open" data-ecl-label-expanded="Close" type="button">
1212
<span class="ecl-accordion__toggle-flex sc-ecl-accordion-ec">
1313
<span class="ecl-accordion__toggle-indicator sc-ecl-accordion-ec">
14+
<span class="ecl-accordion__toggle-label sc-ecl-accordion-ec">
15+
Open
16+
</span>
1417
<ecl-icon data-ecl-accordion-icon icon="plus" size="m" style-class="ecl-accordion__toggle-icon sc-ecl-accordion-ec" theme="ec"></ecl-icon>
1518
</span>
1619
<span class="ecl-accordion__toggle-title sc-ecl-accordion-ec">
@@ -24,13 +27,16 @@ exports[`ecl-accordion renders 1`] = `
2427
</div>
2528
</div>
2629
</ecl-accordion-item>
27-
<ecl-accordion-item expanded="" icon-path="/icons.svg" id="ecl-accordion-item-id-2" label="Energy union and climate">
30+
<ecl-accordion-item expanded="" icon-path="/icons.svg" item-id="ecl-accordion-item-id-2" label="Energy union and climate" label-collapsed="Open" label-expanded="Close">
2831
<!---->
29-
<div class="ecl-accordion__item sc-ecl-accordion-ec">
30-
<h3 class="ecl-accordion__title sc-ecl-accordion-ec">
31-
<button aria-controls="ecl-accordion-item-id-2-content" aria-expanded="true" class="ecl-accordion__toggle sc-ecl-accordion-ec" data-ecl-accordion-toggle>
32+
<div aria-labelledby="ecl-accordion-item-id-2-title" class="ecl-accordion__item sc-ecl-accordion-ec">
33+
<h3 class="ecl-accordion__title sc-ecl-accordion-ec" id="ecl-accordion-item-id-2-title">
34+
<button aria-controls="ecl-accordion-item-id-2-content" aria-expanded="true" class="ecl-accordion__toggle sc-ecl-accordion-ec" data-ecl-accordion-toggle data-ecl-label-collapsed="Open" data-ecl-label-expanded="Close" type="button">
3235
<span class="ecl-accordion__toggle-flex sc-ecl-accordion-ec">
3336
<span class="ecl-accordion__toggle-indicator sc-ecl-accordion-ec">
37+
<span class="ecl-accordion__toggle-label sc-ecl-accordion-ec">
38+
Close
39+
</span>
3440
<ecl-icon data-ecl-accordion-icon icon="minus" size="m" style-class="ecl-accordion__toggle-icon sc-ecl-accordion-ec" theme="ec"></ecl-icon>
3541
</span>
3642
<span class="ecl-accordion__toggle-title sc-ecl-accordion-ec">
@@ -44,13 +50,16 @@ exports[`ecl-accordion renders 1`] = `
4450
</div>
4551
</div>
4652
</ecl-accordion-item>
47-
<ecl-accordion-item id="ecl-accordion-item-id-3" label="Delivery of last pending proposals, a common Destiny of unity, the hour of European Democracy">
53+
<ecl-accordion-item item-id="ecl-accordion-item-id-3" label="Delivery of last pending proposals, a common Destiny of unity, the hour of European Democracy" label-collapsed="Open" label-expanded="Close">
4854
<!---->
49-
<div class="ecl-accordion__item sc-ecl-accordion-ec">
50-
<h3 class="ecl-accordion__title sc-ecl-accordion-ec">
51-
<button aria-controls="ecl-accordion-item-id-3-content" aria-expanded="false" class="ecl-accordion__toggle sc-ecl-accordion-ec" data-ecl-accordion-toggle>
55+
<div aria-labelledby="ecl-accordion-item-id-3-title" class="ecl-accordion__item sc-ecl-accordion-ec">
56+
<h3 class="ecl-accordion__title sc-ecl-accordion-ec" id="ecl-accordion-item-id-3-title">
57+
<button aria-controls="ecl-accordion-item-id-3-content" aria-expanded="false" class="ecl-accordion__toggle sc-ecl-accordion-ec" data-ecl-accordion-toggle data-ecl-label-collapsed="Open" data-ecl-label-expanded="Close" type="button">
5258
<span class="ecl-accordion__toggle-flex sc-ecl-accordion-ec">
5359
<span class="ecl-accordion__toggle-indicator sc-ecl-accordion-ec">
60+
<span class="ecl-accordion__toggle-label sc-ecl-accordion-ec">
61+
Open
62+
</span>
5463
<ecl-icon data-ecl-accordion-icon icon="plus" size="m" style-class="ecl-accordion__toggle-icon sc-ecl-accordion-ec" theme="ec"></ecl-icon>
5564
</span>
5665
<span class="ecl-accordion__toggle-title sc-ecl-accordion-ec">

‎src/components/ecl-accordion/test/ecl-accordion.spec.tsx

+9-3
Original file line numberDiff line numberDiff line change
@@ -8,23 +8,29 @@ describe('ecl-accordion', () => {
88
components: [EclAccordion, EclAccordionItem],
99
html: `<ecl-accordion theme="ec">
1010
<ecl-accordion-item
11-
id="ecl-accordion-item-id-1"
11+
item-id="ecl-accordion-item-id-1"
1212
label="Delivery of last pending proposals, a common Destiny of unity, the hour of European Democracy"
1313
icon-path="/icons.svg"
14+
label-expanded="Close"
15+
label-collapsed="Open"
1416
>
1517
Accordion item label
1618
</ecl-accordion-item>
1719
<ecl-accordion-item
18-
id="ecl-accordion-item-id-2"
20+
item-id="ecl-accordion-item-id-2"
1921
label="Energy union and climate"
2022
icon-path="/icons.svg"
2123
expanded
24+
label-expanded="Close"
25+
label-collapsed="Open"
2226
>
2327
Accordion item label
2428
</ecl-accordion-item>
2529
<ecl-accordion-item
26-
id="ecl-accordion-item-id-3"
30+
item-id="ecl-accordion-item-id-3"
2731
label="Delivery of last pending proposals, a common Destiny of unity, the hour of European Democracy"
32+
label-expanded="Close"
33+
label-collapsed="Open"
2834
>
2935
Accordion item label
3036
</ecl-accordion-item>

0 commit comments

Comments
 (0)