Skip to content

Commit 5eee509

Browse files
thejacksheltonthejackshelton
authored
Merge pull request #374 from thejackshelton/accordion-improvements
fix(accordion): docs typo, cleanup comments, comment out dynamic test…
2 parents 427b453 + 049d788 commit 5eee509

File tree

3 files changed

+65
-146
lines changed

3 files changed

+65
-146
lines changed

‎apps/website/src/routes/docs/headless/(components)/accordion/index.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ import { AlphaBanner } from '../../../_components/alpha-banner/alpha-banner';
3636

3737
<HeroAccordion>
3838
```tsx
39-
<AccordionRoot class="accordion-wrapper" animate>
39+
<AccordionRoot class="accordion-wrapper" animated>
4040
<AccordionItem>
4141
<AccordionHeader>
4242
<AccordionTrigger class="accordion-trigger">
@@ -226,7 +226,7 @@ If you're curious about how the accordion is animated, you can use a built-in Qw
226226

227227
The variable calculates the content height behind the scenes, so that you can use this variable in your keyframes. Out of the box, you can use the `accordion-open` and `accordion-close` keyframes in your project. These use an `animation` declaration on the height property.
228228

229-
> You can also check out this awesome [Cubic Bezier Tool](https://cubic-bezier.com/) to visualize the animation curve.
229+
> The animation above makes use of the overflow hidden declaration. You can also check out this awesome [Cubic Bezier Tool](https://cubic-bezier.com/) to visualize the animation curve.
230230
231231
## Non-collapsible
232232

‎packages/kit-headless/src/components/accordion/accordion-context-id.ts‎

Lines changed: 1 addition & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -1,89 +1,8 @@
11
import { createContextId } from '@builder.io/qwik';
2-
import {
3-
AccordionRootContext,
4-
AccordionItemContext,
5-
} from './accordion-context.type';
2+
import { AccordionRootContext, AccordionItemContext } from './accordion-context.type';
63

74
export const accordionRootContextId =
85
createContextId<AccordionRootContext>('accordion-root');
96

107
export const accordionItemContextId =
118
createContextId<AccordionItemContext>('accordion-item');
12-
13-
/*
14-
Accordion Header:
15-
- Label for section of content that serves as a control for hiding the section.
16-
17-
Accordion Panel:
18-
- Section of content that can be shown or hidden.
19-
20-
21-
Keyboard interaction:
22-
23-
Enter or Space: When focus is on the accordion header for a collapsed panel, expands the associated panel.
24-
25-
If the implementation allows only one panel to be expanded, and if another panel is expanded, collapses that panel.
26-
27-
When focus is on the accordion header for an expanded panel, collapses the panel if the implementation supports collapsing. Some implementations require one panel to be expanded at all times and allow only one panel to be expanded; so, they do not support a collapse function.
28-
29-
Tab: Moves focus to the next focusable element; all focusable elements in the accordion are included in the page Tab sequence.
30-
31-
Shift + Tab: Moves focus to the previous focusable element; all focusable elements in the accordion are included in the page Tab sequence.
32-
33-
Down Arrow (Optional): If focus is on an accordion header, moves focus to the next accordion header. If focus is on the last accordion header, either does nothing or moves focus to the first accordion header.
34-
35-
Up Arrow (Optional): If focus is on an accordion header, moves focus to the previous accordion header. If focus is on the first accordion header, either does nothing or moves focus to the last accordion header.
36-
37-
Home (Optional): When focus is on an accordion header, moves focus to the first accordion header.
38-
39-
End (Optional): When focus is on an accordion header, moves focus to the last accordion header.
40-
41-
WAI-ARIA Roles, States, and Properties:
42-
43-
The title of each accordion header is contained in an element with role button.
44-
45-
Each accordion header button is wrapped in an element with role heading that has a value set for aria-level that is appropriate for the information architecture of the page.
46-
- If the native host language has an element with an implicit heading and aria-level, such as an HTML heading tag, a native host language element may be used.
47-
48-
- The button element is the only element inside the heading element. That is, if there are other visually persistent elements, they are not included inside the heading element.
49-
50-
If the accordion panel associated with an accordion header is visible, the header button element has aria-expanded set to true. If the panel is not visible, aria-expanded is set to false.
51-
52-
The accordion header button element has aria-controls set to the ID of the element containing the accordion panel content.
53-
54-
If the accordion panel associated with an accordion header is visible, and if the accordion does not permit the panel to be collapsed, the header button element has aria-disabled set to true.
55-
56-
Optionally, each element that serves as a container for panel content has role region and aria-labelledby with a value that refers to the button that controls display of the panel.
57-
- Avoid using the region role in circumstances that create landmark region proliferation, e.g., in an accordion that contains more than approximately 6 panels that can be expanded at the same time.
58-
59-
- Role region is especially helpful to the perception of structure by screen reader users when panels contain heading elements or a nested accordion.
60-
61-
Other Implementations:
62-
63-
Radix:
64-
65-
All of these have a disabled or data-disabled option
66-
67-
Root:
68-
69-
- Horizontal & Vertical Orientation (orientation prop)
70-
- Can change directions (dir prop)
71-
- Change behavior of the accordion to open multiple or only one item
72-
(type="single | multiple" prop)
73-
- Can be controlled or uncontrolled "managed by react state or by the dom"
74-
- I believe this is done with the value prop.
75-
- Can set a default open value with (defaultValue prop)
76-
- Allow all items to close (collapsible prop)
77-
78-
Trigger & Item:
79-
80-
- Data state with open or closed. [data-state]
81-
82-
83-
Also has a Header component that wraps around the trigger. This is because a user might want their accordion headings to be proper headers. Not sure if we will implement this for now.
84-
85-
Offers namespaced CSS properties used for animations.
86-
Example: --radix-accordion-content-height
87-
to animate the height of the content when it opens or closes.
88-
89-
*/

‎packages/kit-headless/src/components/accordion/accordion.spec.tsx‎

Lines changed: 62 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -363,70 +363,70 @@ describe('Dynamic', () => {
363363
itemsLength: number;
364364
}
365365

366-
const DynamicAccordion = component$(
367-
({
368-
itemIndexToDelete = 0,
369-
itemIndexToAdd = 0,
370-
itemsLength
371-
}: DynamicAccordionProps) => {
372-
const itemNames = Array(itemsLength)
373-
.fill(1)
374-
.map((_, index) => `Item ${index + 1}`);
375-
376-
const itemStore = useStore(itemNames);
366+
// const DynamicAccordion = component$(
367+
// ({
368+
// itemIndexToDelete = 0,
369+
// itemIndexToAdd = 0,
370+
// itemsLength
371+
// }: DynamicAccordionProps) => {
372+
// // const itemNames = Array(itemsLength)
373+
// // .fill(1)
374+
// // .map((_, index) => `Item ${index + 1}`);
375+
376+
// const itemStore = useStore([1, 2, 3, 4]);
377+
378+
// return (
379+
// <>
380+
// <AccordionRoot class="dynamic-root">
381+
// {itemStore.map((itemName, index) => {
382+
// return (
383+
// <AccordionItem key={index}>
384+
// <AccordionTrigger data-item-name={itemName} class="dynamic-trigger">
385+
// {' '}
386+
// {itemName} index: {index}
387+
// </AccordionTrigger>
388+
// <AccordionContent>index: {index}</AccordionContent>
389+
// </AccordionItem>
390+
// );
391+
// })}
392+
// </AccordionRoot>
393+
394+
// <div>
395+
// <button
396+
// style={{ color: 'green', marginTop: '1rem' }}
397+
// onClick$={() => {
398+
// itemStore.push(`new added item`);
399+
// }}
400+
// >
401+
// <strong>Add Item</strong>
402+
// </button>
403+
404+
// <button
405+
// style={{ color: 'red', marginTop: '1rem' }}
406+
// onClick$={() => {
407+
// itemStore.splice(0, 1);
408+
// }}
409+
// >
410+
// <strong>Remove Item</strong>
411+
// </button>
412+
// </div>
413+
// </>
414+
// );
415+
// }
416+
// );
377417

378-
return (
379-
<>
380-
<AccordionRoot class="dynamic-root">
381-
{itemStore.map((itemName, index) => {
382-
return (
383-
<AccordionItem key={index}>
384-
<AccordionTrigger class="dynamic-trigger">
385-
{' '}
386-
{itemName} index: {index}
387-
</AccordionTrigger>
388-
<AccordionContent>index: {index}</AccordionContent>
389-
</AccordionItem>
390-
);
391-
})}
392-
</AccordionRoot>
393-
394-
<div>
395-
<button
396-
style={{ color: 'green', marginTop: '1rem' }}
397-
onClick$={() => {
398-
itemStore.splice(itemIndexToAdd, 0, `new added item`);
399-
}}
400-
>
401-
<strong>Add Item</strong>
402-
</button>
403-
404-
<button
405-
style={{ color: 'red', marginTop: '1rem' }}
406-
onClick$={() => {
407-
itemStore.splice(itemIndexToDelete, 1);
408-
}}
409-
>
410-
<strong>Remove Item</strong>
411-
</button>
412-
</div>
413-
</>
414-
);
415-
}
416-
);
417-
418-
it(`GIVEN 3 accordion items
419-
WHEN removing the 3rd one dynamically
420-
THEN only 2 should remain
421-
`, () => {
422-
cy.mount(
423-
<DynamicAccordion itemsLength={3} itemIndexToDelete={2} itemIndexToAdd={0} />
424-
);
418+
// it(`GIVEN 3 accordion items
419+
// WHEN removing the 3rd one dynamically
420+
// THEN only 2 should remain
421+
// `, () => {
422+
// cy.mount(
423+
// <DynamicAccordion itemsLength={3} itemIndexToDelete={2} itemIndexToAdd={0} />
424+
// );
425425

426-
cy.findByRole('button', { name: /remove item/i }).click();
426+
// cy.findByRole('button', { name: /remove item/i }).click();
427427

428-
cy.get('[data-trigger-id]').should('have.length', 2);
429-
});
428+
// cy.get('[data-trigger-id]').should('have.length', 2);
429+
// });
430430

431431
// it(`GIVEN 3 accordion items
432432
// WHEN clicking on the 3rd trigger and adding a new one at the start
@@ -442,7 +442,7 @@ describe('Dynamic', () => {
442442
// it(`GIVEN 4 accordion items
443443
// WHEN clicking on 3rd trigger and removing it
444444
// THEN the 4th trigger's content should be open`, () => {
445-
// cy.mount(<DynamicAccordion itemsLength={4} itemIndexToDelete={3} />);
445+
// cy.mount(<DynamicAccordion itemsLength={4} itemIndexToDelete={0} />);
446446

447447
// cy.findByRole('button', { name: /Trigger Item 3/i }).click();
448448
// cy.findByRole('region').should('contain', 'Content Item 3');

0 commit comments

Comments
 (0)