Chore/heading and button components #192
Conversation
…Name' and 'headingClassName' instead.
| @@ -17,10 +18,6 @@ import './main.css'; | |||
| // tslint:disable-next-line no-import-side-effect ordered-imports | |||
| import '../../src/css/fancy-example.css'; | |||
|
|
|||
| const Arrow = (): JSX.Element => ( | |||
There was a problem hiding this comment.
There are still arrows, but they're no longer explicit. Check out fancy-example.css and you'll see that they're now just a pseudo-element on accordion__button.
| @@ -39,240 +54,272 @@ describe('WAI ARIA Spec', () => { | |||
| expect(title).toBe( | |||
| 'React Accessible Accordion - Integration Test Sandbox', | |||
| ); | |||
|
|
|||
| await browser.close(); | |||
There was a problem hiding this comment.
See above - I now do this on afterEach instead (prevents memory leaks when tests fail).
| it('When focus is on the accordion header for a collapsed panel, expands the associated panel. If the implementation allows only one panel to be expanded, and if another panel is expanded, collapses that panel.', async () => { | ||
| const { browser, page, headingsHandles } = await setup(); | ||
| expect(headingsHandles.length).toEqual(3); | ||
| it(`When focus is on the accordion header for a collapsed panel, |
There was a problem hiding this comment.
Refactored all the test strings to be <80cols (but strings haven't actually changed)
|
|
||
| const firstHeadingHandle = headingsHandles[0]; | ||
| const secondHeadingHandle = headingsHandles[1]; | ||
| const firstButtonHandle = buttonsHandles[0]; |
There was a problem hiding this comment.
Using buttons now in most places instead of headings, because that's what the aria-spec actually calls for.
README.md
Outdated
|
|
||
| ### AccordionItemButton | ||
|
|
||
| #### className : `string` [*optional*, default: `'accordion__heading'`] |
There was a problem hiding this comment.
Think you maybe forgot to update the class here?
There was a problem hiding this comment.
Well spotted, cheers.
README.md
Outdated
|
|
||
| #### className : `string` [*optional*, default: `'accordion__heading'`] | ||
|
|
||
| Class(es) to apply to the 'heading' element. |
There was a problem hiding this comment.
Same here, 'button' not heading :)
Splices the 'button' element out of
AccordionItemHeadingand into its ownAccordionItemButtoncomponent.A nice side-effect of this refactor was that the additional 'arrow' div was able to be refactored into a pseudo-element of the button, and as such the user no longer needs to add it explicitly.