Copy text

Using ‘data-copy-element’

{{ aspExample({ code: "<div class=\"asp-summary-list-container\">
<dl class=\"asp-summary-list\">
<dt class=\"asp-summary-list__key\">
Reference Number
</dt>
<dd class=\"asp-summary-list__value\">
<span class=\"js-copy-text\">1234567890</span>
</dd>
<dd class=\"asp-summary-list__actions\">
<button class=\"asp-copy asp-js-copy-button\" data-copy-element=\".js-copy-text\" style=\"display:none\">
<span class=\"asp-js-copy-button__span\">Copy</span>
<span class=\"sr-only\">Reference Number</span>
</button>
</dd>
</dl>
</div>", nunjucks: "", json: "", title: "", example: "", id: "6961308db2367" }) }}

Copy HTML

Using ‘data-copy-html’

{{ aspExample({ code: "<div class=\"asp-summary-list-container\">
<dl class=\"asp-summary-list\">
<dt class=\"asp-summary-list__key\">
HTML
</dt>
<dd class=\"asp-summary-list__value\">
<span class=\"js-copy-html\"><span>1234567890</span></span>
</dd>
<dd class=\"asp-summary-list__actions\">
<button class=\"asp-copy asp-js-copy-button\" data-copy-html=\".js-copy-html\" style=\"display:none\">
<span class=\"asp-js-copy-button__span\">Copy</span>
<span class=\"sr only\">HTML</span>
</button>
</dd>
</dl>
</div>", nunjucks: "", json: "", title: "", example: "", id: "6961308db2367" }) }}

WIP
– When clicked, “Copy” turns into “Copied”:–
— until focus is lost from the button
— for 5 seconds
— aria-polite is read out to a screen reader as “Copied X”
– No JS fallback = button does not show.

Status of development

The below criteria all need to be met for a component to be considered as fully developed for use within the ASP Digital Design System.

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

Make a change to the Design System

Suggest an edit to this system, or any of the components in it, by submitting a Design System change request.