Add details script #610
Add details script #610
Conversation
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-review-pr-610
Remove the script that creates an additional element for the details arrow and rely on CSS to create the arrow. IE8 doesn't know :: or currentColor so we fallback on : and inherit respectively.
alex-ju
force-pushed
the
add-details-shim
branch
from
a2a8a61
to
0bb8809
Compare
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-review-pr-610
| expect(summaryRole).toBe('button') | ||
| }) | ||
|
|
||
| it('should set the element controlled by the summary using aria-controls', async () => { |
There was a problem hiding this comment.
It would be good to have a test for a details element that already has an existing ID, to ensure the existing ID is used instead.
There was a problem hiding this comment.
Add the id attribute to the details component, but what we're generating via JavaScript and using in ARIA attributes are the <summary> and <div> container ids; for which one can't pass any attributes at the moment - so a test won't be relevant in this cases.
| expect(summaryAriaExpanded).toBe('false') | ||
| }) | ||
|
|
||
| it('should add a unique id to the hidden content in order to be controlled by the summary', async () => { |
There was a problem hiding this comment.
It would be good to have a test for a details element that already has an existing ID, to ensure the existing ID is not overriden.
| expect(hiddenContainerAriaHidden).toBe('true') | ||
| }) | ||
|
|
||
| it('should indicate the open state of the content', async () => { |
There was a problem hiding this comment.
It would be good to have a test for a details element that is open when the page loads.
There was a problem hiding this comment.
(That would also need a test that aria-hidden is false)
There was a problem hiding this comment.
Added
- the
openattribute to the details component - an example where the details component is expanded by default
- the associated tests for the expanded/opened by default example
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-review-pr-610
alex-ju
force-pushed
the
add-details-shim
branch
from
ad1c19a
to
47a469c
Compare
This PR:
detailselement it is not natively supported by the browserManual tests
Browsers
IE8
IE9
IE10
IE11
Firefox 58 with custom colours
AT testing
Notes:
With
details.jsit announces collapsed button/expanded button.Without
details.js:Notes:
With
details.json IE11/Firefox52 announces button collapsed/expanded.Notes:
With
details.json Firefox52/IE11 announces button collapsed/expanded.Automated tests
Trello card