Skip to content

Commit fb48cb9

Browse files
CopilotHristo313
Copilot
and
Hristo313
authored
fix(theming): fix bootstrap accordion a11y and markup structure
Agent-Logs-Url: https://github.com/IgniteUI/igniteui-angular-samples/sessions/9ea0c7a4-37e0-49ea-ab9e-4f1c50e4253f Co-authored-by: Hristo313 <57346540+Hristo313@users.noreply.github.com>
1 parent 753a35d commit fb48cb9

1 file changed

Lines changed: 36 additions & 26 deletions

File tree

‎src/app/theming/bootstrap/bootstrap-sample.component.html‎

Lines changed: 36 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -230,7 +230,10 @@ <h5 igxCardHeaderSubtitle>$ 42,646.43</h5>
230230
<div class="accordion">
231231
<div class="accordion-item">
232232
<h2 class="accordion-header m-0">
233-
<button class="accordion-button collapsed" [class.collapsed]="!visaOpen" type="button" (click)="visaOpen = !visaOpen">
233+
<button class="accordion-button" [class.collapsed]="!visaOpen" type="button"
234+
(click)="visaOpen = !visaOpen"
235+
[attr.aria-expanded]="visaOpen"
236+
aria-controls="visaCollapseBody">
234237
<div class="d-flex align-items-center justify-content-between">
235238
<h5 class="m-0">Visa Gold</h5>
236239
<h5 class="m-0">
@@ -240,25 +243,30 @@ <h5 class="m-0">
240243
</button>
241244
</h2>
242245
@if (visaOpen) {
243-
<div class="accordion-collapse accordion-body">
244-
<igx-list>
245-
@for (contact of contacts; track contact) {
246-
<igx-list-item>
247-
<span igxListLineTitle>{{ contact.name }}</span>
248-
<span igxListAction>{{ contact.amount }}</span>
249-
</igx-list-item>
250-
}
251-
</igx-list>
252-
<button igxButton="contained" class="mt-3">
253-
Show more
254-
</button>
246+
<div class="accordion-collapse collapse show" id="visaCollapseBody">
247+
<div class="accordion-body">
248+
<igx-list>
249+
@for (contact of contacts; track contact) {
250+
<igx-list-item>
251+
<span igxListLineTitle>{{ contact.name }}</span>
252+
<span igxListAction>{{ contact.amount }}</span>
253+
</igx-list-item>
254+
}
255+
</igx-list>
256+
<button igxButton="contained" class="mt-3">
257+
Show more
258+
</button>
259+
</div>
255260
</div>
256261
}
257262
</div>
258263

259264
<div class="accordion-item">
260265
<h2 class="accordion-header m-0">
261-
<button class="accordion-button collapsed" [class.collapsed]="!mastercardOpen" type="button" (click)="mastercardOpen = !mastercardOpen">
266+
<button class="accordion-button" [class.collapsed]="!mastercardOpen" type="button"
267+
(click)="mastercardOpen = !mastercardOpen"
268+
[attr.aria-expanded]="mastercardOpen"
269+
aria-controls="mastercardCollapseBody">
262270
<div class="d-flex align-items-center justify-content-between">
263271
<h5 class="m-0">Mastercard</h5>
264272
<h5 class="m-0">
@@ -269,18 +277,20 @@ <h5 class="m-0">
269277
</button>
270278
</h2>
271279
@if (mastercardOpen) {
272-
<div class="accordion-collapse accordion-body">
273-
<igx-list>
274-
@for (contact of contacts; track contact) {
275-
<igx-list-item>
276-
<span igxListLineTitle>{{ contact.name }}</span>
277-
<span igxListAction>{{ contact.amount }}</span>
278-
</igx-list-item>
279-
}
280-
</igx-list>
281-
<button igxButton="contained" class="mt-3">
282-
Show more
283-
</button>
280+
<div class="accordion-collapse collapse show" id="mastercardCollapseBody">
281+
<div class="accordion-body">
282+
<igx-list>
283+
@for (contact of contacts; track contact) {
284+
<igx-list-item>
285+
<span igxListLineTitle>{{ contact.name }}</span>
286+
<span igxListAction>{{ contact.amount }}</span>
287+
</igx-list-item>
288+
}
289+
</igx-list>
290+
<button igxButton="contained" class="mt-3">
291+
Show more
292+
</button>
293+
</div>
284294
</div>
285295
}
286296
</div>

0 commit comments

Comments
 (0)