Help
<button class="asp-help asp-button--toggleable asp-js-toggle-button" type="button" aria-expanded="false" data-toggle-element=".hint-example-1" style="display:none">
<span class="sr-only"></span>
<span aria-hidden="true">?</span>
</button>Nunjucks macro options
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
Some options are required for the macro to work; these are marked as "Required" in the option description.
If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.
| Name | Type | Description |
|---|---|---|
| targetElement | string | Required. The element that this button toggles. Can be any element with a unique class or id. For example, ".hint-example-1" or "#hint-example-2". |
| text | string | Required. The text that is red out by a screen reader following "Show" or "Hide". Default is "help" or "guidance". |
| expanded | boolean | The state of the element that this button toggles. if true, the state of the element that this button toggles is expanded on page load. Default values are 'urgent', false (boolean), true (boolean) or null. |
| closeElements | array or false (boolean) | An array of elements that this button closes when pressed. This can be one or more elements with either a unique class or id. For example, [".hint-example-1", "#hint-example-2"]. Default values are false (boolean) or null. |
{% from "help/macro.njk" import aspHelp %}
{{ aspHelp({
targetElement: ".hint-example-1",
name: "Help"
}) }}
Twig macro options
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
Some options are required for the macro to work; these are marked as "Required" in the option description.
If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.
| Name | Type | Description |
|---|---|---|
| targetElement | string | Required. The element that this button toggles. Can be any element with a unique class or id. For example, ".hint-example-1" or "#hint-example-2". |
| text | string | Required. The text that is red out by a screen reader following "Show" or "Hide". Default is "help" or "guidance". |
| expanded | boolean | The state of the element that this button toggles. if true, the state of the element that this button toggles is expanded on page load. Default values are 'urgent', false (boolean), true (boolean) or null. |
| closeElements | array or false (boolean) | An array of elements that this button closes when pressed. This can be one or more elements with either a unique class or id. For example, [".hint-example-1", "#hint-example-2"]. Default values are false (boolean) or null. |
{% from "help/macro.njk" import aspHelp %}
{{ aspHelp({
targetElement: ".hint-example-1",
name: "Help"
}) }}
Help with expanded content
<button class="asp-help asp-button--toggleable asp-js-toggle-button" type="button" aria-expanded="true" data-toggle-element=".hint-example-1b" style="display:none">
<span class="sr-only"></span>
<span aria-hidden="true">?</span>
</button>Nunjucks macro options
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
Some options are required for the macro to work; these are marked as "Required" in the option description.
If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.
| Name | Type | Description |
|---|---|---|
| targetElement | string | Required. The element that this button toggles. Can be any element with a unique class or id. For example, ".hint-example-1" or "#hint-example-2". |
| text | string | Required. The text that is red out by a screen reader following "Show" or "Hide". Default is "help" or "guidance". |
| expanded | boolean | The state of the element that this button toggles. if true, the state of the element that this button toggles is expanded on page load. Default values are 'urgent', false (boolean), true (boolean) or null. |
| closeElements | array or false (boolean) | An array of elements that this button closes when pressed. This can be one or more elements with either a unique class or id. For example, [".hint-example-1", "#hint-example-2"]. Default values are false (boolean) or null. |
{% from "help/macro.njk" import aspHelp %}
{{ aspHelp({
targetElement: ".hint-example-1b",
expanded: true,
name: "Help"
}) }}
Twig macro options
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
Some options are required for the macro to work; these are marked as "Required" in the option description.
If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.
| Name | Type | Description |
|---|---|---|
| targetElement | string | Required. The element that this button toggles. Can be any element with a unique class or id. For example, ".hint-example-1" or "#hint-example-2". |
| text | string | Required. The text that is red out by a screen reader following "Show" or "Hide". Default is "help" or "guidance". |
| expanded | boolean | The state of the element that this button toggles. if true, the state of the element that this button toggles is expanded on page load. Default values are 'urgent', false (boolean), true (boolean) or null. |
| closeElements | array or false (boolean) | An array of elements that this button closes when pressed. This can be one or more elements with either a unique class or id. For example, [".hint-example-1", "#hint-example-2"]. Default values are false (boolean) or null. |
{% from "help/macro.njk" import aspHelp %}
{{ aspHelp({
targetElement: ".hint-example-1b",
expanded: true,
name: "Help"
}) }}
Help with close other content
<button class="asp-help asp-button--toggleable asp-js-toggle-button" type="button" aria-expanded="false" data-toggle-element="#hint-example-2" data-toggle-hide-elements=".hint-example-1,.hint-example-2" style="display:none">
<span class="sr-only"></span>
<span aria-hidden="true">?</span>
</button>Nunjucks macro options
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
Some options are required for the macro to work; these are marked as "Required" in the option description.
If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.
| Name | Type | Description |
|---|---|---|
| targetElement | string | Required. The element that this button toggles. Can be any element with a unique class or id. For example, ".hint-example-1" or "#hint-example-2". |
| text | string | Required. The text that is red out by a screen reader following "Show" or "Hide". Default is "help" or "guidance". |
| expanded | boolean | The state of the element that this button toggles. if true, the state of the element that this button toggles is expanded on page load. Default values are 'urgent', false (boolean), true (boolean) or null. |
| closeElements | array or false (boolean) | An array of elements that this button closes when pressed. This can be one or more elements with either a unique class or id. For example, [".hint-example-1", "#hint-example-2"]. Default values are false (boolean) or null. |
{% from "help/macro.njk" import aspHelp %}
{{ aspHelp({
targetElement: "#hint-example-2",
closeElements: [".hint-example-1", ".hint-example-2"],
aria: "Hint"
}) }}
Twig macro options
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
Some options are required for the macro to work; these are marked as "Required" in the option description.
If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.
| Name | Type | Description |
|---|---|---|
| targetElement | string | Required. The element that this button toggles. Can be any element with a unique class or id. For example, ".hint-example-1" or "#hint-example-2". |
| text | string | Required. The text that is red out by a screen reader following "Show" or "Hide". Default is "help" or "guidance". |
| expanded | boolean | The state of the element that this button toggles. if true, the state of the element that this button toggles is expanded on page load. Default values are 'urgent', false (boolean), true (boolean) or null. |
| closeElements | array or false (boolean) | An array of elements that this button closes when pressed. This can be one or more elements with either a unique class or id. For example, [".hint-example-1", "#hint-example-2"]. Default values are false (boolean) or null. |
{% from "help/macro.njk" import aspHelp %}
{{ aspHelp({
targetElement: "#hint-example-2",
closeElements: [".hint-example-1", ".hint-example-2"],
aria: "Hint"
}) }}
WIP -- Tied in with JS toggle functionality (This is hardcoded HTML like the cookie banner)
Non JS if the content isn’t hidden it should show
| Development criteria | Status |
|---|---|
| WCAG 2.2 compliant | Not started |
| WCAG 2.1 compliant | Completed |
| HTML / Nunjucks version | Completed |
| Figma version | Not started |
| M365 versions | Not started |
| Documentation | In progress |
Published 26 July 2024
Last updated 10 December 2024