Skip to content

Commit 24b56ef

Browse files
krane-c-eightfoldypatadia-eightfold
krane-c-eightfold
and
ypatadia-eightfold
authored
fix: removed clickable area div and moved a11y to parent and render a… (#1024)
* fix: removed clickable area div and moved a11y to parent and render accordion body only if expanded * update: updated as per comments --------- Co-authored-by: ypatadia-eightfold <[email protected]>
1 parent a4f58fd commit 24b56ef

File tree

4 files changed

+59
-99
lines changed

4 files changed

+59
-99
lines changed

‎src/components/Accordion/Accordion.test.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,9 @@ describe('Accordion', () => {
9090
const { container } = render(
9191
<Accordion {...accordionProps} size={AccordionSize.Large} />
9292
);
93-
const summaryClickableArea = container.querySelector('.clickable-area');
93+
const summaryClickableArea = container.querySelector(
94+
'[data-testid="accordion-header-clickable-area"]'
95+
);
9496
fireEvent.click(summaryClickableArea);
9597
await waitFor(() =>
9698
expect(

‎src/components/Accordion/Accordion.tsx‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -100,17 +100,19 @@ export const AccordionSummary: FC<AccordionSummaryProps> = ({
100100
]);
101101

102102
return (
103-
<div className={headerClassnames} id={`${id}-header`} {...rest}>
104-
<div
105-
aria-controls={`${id}-content`}
106-
aria-expanded={expanded}
107-
aria-labelledby={expandButtonDescribedBy || `${id}-header-content`}
108-
className={styles.clickableArea}
109-
onClick={onClick}
110-
onKeyDown={handleKeyDown}
111-
role="button"
112-
tabIndex={0}
113-
></div>
103+
<div
104+
className={headerClassnames}
105+
id={`${id}-header`}
106+
aria-controls={`${id}-content`}
107+
aria-expanded={expanded}
108+
aria-labelledby={expandButtonDescribedBy || `${id}-header-content`}
109+
onClick={onClick}
110+
onKeyDown={handleKeyDown}
111+
role="button"
112+
tabIndex={0}
113+
data-testid="accordion-header-clickable-area"
114+
{...rest}
115+
>
114116
<div
115117
id={`${id}-header-content`}
116118
className={styles.accordionHeaderContainer}

‎src/components/Accordion/__snapshots__/Accordion.test.tsx.snap‎

Lines changed: 42 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -7,17 +7,15 @@ exports[`Accordion Accordion is large 1`] = `
77
data-testid="test-accordion"
88
>
99
<div
10+
aria-controls="myAccordionId-content"
11+
aria-expanded="false"
12+
aria-labelledby="myAccordionId-header-content"
1013
class="accordion-summary large"
14+
data-testid="accordion-header-clickable-area"
1115
id="myAccordionId-header"
16+
role="button"
17+
tabindex="0"
1218
>
13-
<div
14-
aria-controls="myAccordionId-content"
15-
aria-expanded="false"
16-
aria-labelledby="myAccordionId-header-content"
17-
class="clickable-area"
18-
role="button"
19-
tabindex="0"
20-
/>
2119
<div
2220
class="accordion-header-container"
2321
id="myAccordionId-header-content"
@@ -103,17 +101,15 @@ exports[`Accordion Accordion is medium 1`] = `
103101
data-testid="test-accordion"
104102
>
105103
<div
104+
aria-controls="myAccordionId-content"
105+
aria-expanded="false"
106+
aria-labelledby="myAccordionId-header-content"
106107
class="accordion-summary medium"
108+
data-testid="accordion-header-clickable-area"
107109
id="myAccordionId-header"
110+
role="button"
111+
tabindex="0"
108112
>
109-
<div
110-
aria-controls="myAccordionId-content"
111-
aria-expanded="false"
112-
aria-labelledby="myAccordionId-header-content"
113-
class="clickable-area"
114-
role="button"
115-
tabindex="0"
116-
/>
117113
<div
118114
class="accordion-header-container"
119115
id="myAccordionId-header-content"
@@ -199,17 +195,15 @@ exports[`Accordion Accordion is not bordered 1`] = `
199195
data-testid="test-accordion"
200196
>
201197
<div
198+
aria-controls="myAccordionId-content"
199+
aria-expanded="false"
200+
aria-labelledby="myAccordionId-header-content"
202201
class="accordion-summary large"
202+
data-testid="accordion-header-clickable-area"
203203
id="myAccordionId-header"
204+
role="button"
205+
tabindex="0"
204206
>
205-
<div
206-
aria-controls="myAccordionId-content"
207-
aria-expanded="false"
208-
aria-labelledby="myAccordionId-header-content"
209-
class="clickable-area"
210-
role="button"
211-
tabindex="0"
212-
/>
213207
<div
214208
class="accordion-header-container"
215209
id="myAccordionId-header-content"
@@ -295,17 +289,15 @@ exports[`Accordion Accordion is pill shaped 1`] = `
295289
data-testid="test-accordion"
296290
>
297291
<div
292+
aria-controls="myAccordionId-content"
293+
aria-expanded="false"
294+
aria-labelledby="myAccordionId-header-content"
298295
class="accordion-summary large"
296+
data-testid="accordion-header-clickable-area"
299297
id="myAccordionId-header"
298+
role="button"
299+
tabindex="0"
300300
>
301-
<div
302-
aria-controls="myAccordionId-content"
303-
aria-expanded="false"
304-
aria-labelledby="myAccordionId-header-content"
305-
class="clickable-area"
306-
role="button"
307-
tabindex="0"
308-
/>
309301
<div
310302
class="accordion-header-container"
311303
id="myAccordionId-header-content"
@@ -391,17 +383,15 @@ exports[`Accordion Accordion is rectangle shaped 1`] = `
391383
data-testid="test-accordion"
392384
>
393385
<div
386+
aria-controls="myAccordionId-content"
387+
aria-expanded="false"
388+
aria-labelledby="myAccordionId-header-content"
394389
class="accordion-summary large"
390+
data-testid="accordion-header-clickable-area"
395391
id="myAccordionId-header"
392+
role="button"
393+
tabindex="0"
396394
>
397-
<div
398-
aria-controls="myAccordionId-content"
399-
aria-expanded="false"
400-
aria-labelledby="myAccordionId-header-content"
401-
class="clickable-area"
402-
role="button"
403-
tabindex="0"
404-
/>
405395
<div
406396
class="accordion-header-container"
407397
id="myAccordionId-header-content"
@@ -487,18 +477,16 @@ exports[`Accordion Accordion renders custom content and its buttons are clickabl
487477
data-testid="test-accordion"
488478
>
489479
<div
480+
aria-controls="myAccordionId-content"
481+
aria-expanded="true"
482+
aria-labelledby="myAccordionId-header-content"
490483
class="accordion-summary accordion-summary-full-width medium accordion-summary-expanded"
484+
data-testid="accordion-header-clickable-area"
491485
id="myAccordionId-header"
486+
role="button"
492487
style="gap: 8px;"
488+
tabindex="0"
493489
>
494-
<div
495-
aria-controls="myAccordionId-content"
496-
aria-expanded="true"
497-
aria-labelledby="myAccordionId-header-content"
498-
class="clickable-area"
499-
role="button"
500-
tabindex="0"
501-
/>
502490
<div
503491
class="accordion-header-container"
504492
id="myAccordionId-header-content"
@@ -678,17 +666,15 @@ exports[`Accordion Renders without crashing 1`] = `
678666
data-testid="test-accordion"
679667
>
680668
<div
669+
aria-controls="myAccordionId-content"
670+
aria-expanded="false"
671+
aria-labelledby="myAccordionId-header-content"
681672
class="accordion-summary large"
673+
data-testid="accordion-header-clickable-area"
682674
id="myAccordionId-header"
675+
role="button"
676+
tabindex="0"
683677
>
684-
<div
685-
aria-controls="myAccordionId-content"
686-
aria-expanded="false"
687-
aria-labelledby="myAccordionId-header-content"
688-
class="clickable-area"
689-
role="button"
690-
tabindex="0"
691-
/>
692678
<div
693679
class="accordion-header-container"
694680
id="myAccordionId-header-content"

‎src/components/Accordion/accordion.module.scss‎

Lines changed: 1 addition & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -69,29 +69,12 @@
6969
width: 100%;
7070
transition: background-color $motion-duration-fast $motion-easing-easeout;
7171
z-index: 0;
72-
73-
.clickable-area {
74-
bottom: 0;
75-
border-radius: $border-radius-xl;
76-
cursor: pointer;
77-
left: 0;
78-
pointer-events: all;
79-
position: absolute;
80-
right: 0;
81-
top: 0;
82-
z-index: 0;
83-
84-
&:focus,
85-
&:focus-visible {
86-
outline: none;
87-
}
88-
}
72+
cursor: pointer;
8973

9074
// By default we ensure the header content does not obscure the clickable area.
9175
.accordion-header-container {
9276
pointer-events: none;
9377
z-index: 1;
94-
9578
// If there's custom content in the header, its interactive children should be clickable or selectable.
9679
a[href],
9780
area,
@@ -265,23 +248,10 @@
265248
:global(.focus-visible) {
266249
.accordion-container {
267250
.accordion-summary {
268-
.clickable-area {
269-
&.focus-visible,
270-
&:focus-visible {
271-
box-shadow: inset var(--focus-visible-box-shadow);
272-
}
273-
}
274-
275251
&.accordion-summary-expanded {
276252
border-radius: 0;
277253
border-top-left-radius: $border-radius-xl;
278254
border-top-right-radius: $border-radius-xl;
279-
280-
.clickable-area {
281-
border-radius: 0;
282-
border-top-left-radius: $border-radius-xl;
283-
border-top-right-radius: $border-radius-xl;
284-
}
285255
}
286256
}
287257
}

0 commit comments

Comments
 (0)