From ed2883da8b827c1f6276efcd3d36cd2f58d9064b Mon Sep 17 00:00:00 2001 From: Gemma Leigh Date: Wed, 9 Sep 2015 15:27:00 +0100 Subject: [PATCH] Add an introduction to the details summary page - Add an intro paragraph describing the purpose of the page - Link to a support table from Can I Use? to show browser support - Link to the polyfill used by GOV.UK elements on Github - Describe the ARIA attributes set by the polyfill - Add subheadings to separate each example --- views/examples/example_details_summary.html | 100 ++++++++++++-------- 1 file changed, 63 insertions(+), 37 deletions(-) diff --git a/views/examples/example_details_summary.html b/views/examples/example_details_summary.html index c26bfd10c..4d51e401b 100644 --- a/views/examples/example_details_summary.html +++ b/views/examples/example_details_summary.html @@ -12,53 +12,79 @@

Example: Details summary

-

- Support for HTML5's <details> and <summary> -

- -
- - -
+
+
-
- - Where to find your driving licence number - -

- Your driving licence number can be found in section 5
- of your driving licence photocard. + This example page demonstrates conditionally revealing information, using the HTML5 details and summary elements, they are described here.

-
-
-
- - Where to find your driving licence number - -

- Your driving licence number can be found in section 5
- of your driving licence photocard. + These elements are only supported by a few modern browsers at the moment so you'll need a JavaScript polyfill to make them work in other browsers. Here's the polyfill used by GOV.UK elements.

-
-
-
- - Where to find your driving licence number - -

- Your driving licence number can be found in section 5
- of your driving licence photocard. + The polyfill uses the aria-controls attribute on the controlling element to associate it with the section it shows/hides. This is combined with the aria-expanded attribute on the section to inform the accessibility API of the changes to the document. +

+ +

Example 1: Summary content is visible, details content is hidden

+ +
+ + +
+ +
+ + Where to find your driving licence number + +
+

+ Your driving licence number can be found in section 5
+ of your driving licence photocard. +

+
+
+ +

Example 2: Summary content is visible, details content is visible

+

+ The inital state is set to be open, by setting the boolean open attribute. +

+ +
+ + Where to find your driving licence number + +
+

+ Your driving licence number can be found in section 5
+ of your driving licence photocard. +

+
+
+ +

Example 3: Summary content is visible, details content is visible

+

+ The inital state is set to be open, by setting the value of the open attribute to open.

+ +
+ + Where to find your driving licence number + +
+

+ Your driving licence number can be found in section 5
+ of your driving licence photocard. +

+
+
+
-
+
{{/content}}