Skip to content

Commit

Permalink
Add missing IDs to form elements
Browse files Browse the repository at this point in the history
  • Loading branch information
@ahosgood
ahosgood committed Apr 2, 2024
1 parent 6d70825 commit de49c1d
Show file tree
Hide file tree
Showing 7 changed files with 21 additions and 20 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Fixed

- Fixed column margin removal classes
- Added missing IDs to some form elements so they can be linked top from the error summary

### Security

Expand Down
2 changes: 1 addition & 1 deletion src/nationalarchives/components/checkboxes/checkboxes.njk
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{%- macro tnaCheckboxesElement(params, extraAttributes) -%}
<div class="tna-checkboxes{% if params.small or params.inline %} tna-checkboxes--small{% endif %}{% if params.inline %} tna-checkboxes--inline{% endif %}">
<div class="tna-checkboxes{% if params.small or params.inline %} tna-checkboxes--small{% endif %}{% if params.inline %} tna-checkboxes--inline{% endif %}" id="{{ params.id }}">
{%- for item in params.items %}
<div class="tna-checkboxes__item">
<input type="checkbox" id="{{ params.id }}-{{ item.value }}" value="{{ item.value }}" name="{{ params.name }}"{% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}{% for attribute, value in extraAttributes %} {{ attribute }}="{{ value }}"{% endfor %}{% if item.checked %} checked{% endif %}>
Expand Down
12 changes: 6 additions & 6 deletions src/nationalarchives/components/checkboxes/fixtures.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
}
]
},
"html": "<div class=\"tna-form__group \"><fieldset class=\"tna-form__fieldset\"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Categories</h4></legend><div class=\"tna-checkboxes\"><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-alpha\" value=\"alpha\" name=\"categories\"><label for=\"categories-alpha\" class=\"tna-checkboxes__item-label\">Alpha</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-beta\" value=\"beta\" name=\"categories\"><label for=\"categories-beta\" class=\"tna-checkboxes__item-label\">Beta</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-gamma\" value=\"gamma\" name=\"categories\"><label for=\"categories-gamma\" class=\"tna-checkboxes__item-label\">Gamma</label></div></div></fieldset></div>"
"html": "<div class=\"tna-form__group \"><fieldset class=\"tna-form__fieldset\"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Categories</h4></legend><div class=\"tna-checkboxes\" id=\"categories\"><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-alpha\" value=\"alpha\" name=\"categories\"><label for=\"categories-alpha\" class=\"tna-checkboxes__item-label\">Alpha</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-beta\" value=\"beta\" name=\"categories\"><label for=\"categories-beta\" class=\"tna-checkboxes__item-label\">Beta</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-gamma\" value=\"gamma\" name=\"categories\"><label for=\"categories-gamma\" class=\"tna-checkboxes__item-label\">Gamma</label></div></div></fieldset></div>"
},
{
"name": "small checkboxes",
Expand Down Expand Up @@ -78,7 +78,7 @@
],
"small": true
},
"html": "<div class=\"tna-form__group \"><fieldset class=\"tna-form__fieldset\"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Categories</h4></legend><div class=\"tna-checkboxes tna-checkboxes--small\"><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-ADM\" value=\"ADM\" name=\"categories\"><label for=\"categories-ADM\" class=\"tna-checkboxes__item-label\">Admiralty, Navy, Royal Marines, and Coastguard</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-AIR\" value=\"AIR\" name=\"categories\"><label for=\"categories-AIR\" class=\"tna-checkboxes__item-label\">Air Ministry and Royal Air Force records</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-BT\" value=\"BT\" name=\"categories\"><label for=\"categories-BT\" class=\"tna-checkboxes__item-label\">Board of Trade and successors</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-C\" value=\"C\" name=\"categories\"><label for=\"categories-C\" class=\"tna-checkboxes__item-label\">Chancery, the Wardrobe, Royal Household, Exchequer and various commissions</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-CO\" value=\"CO\" name=\"categories\"><label for=\"categories-CO\" class=\"tna-checkboxes__item-label\">Colonial Office, Commonwealth and Foreign and Commonwealth Offices</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-E\" value=\"E\" name=\"categories\"><label for=\"categories-E\" class=\"tna-checkboxes__item-label\">Exchequer, Office of First Fruits and Tenths, and the Court of Augmentations</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-FO\" value=\"FO\" name=\"categories\"><label for=\"categories-FO\" class=\"tna-checkboxes__item-label\">Foreign Office</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-HO\" value=\"HO\" name=\"categories\"><label for=\"categories-HO\" class=\"tna-checkboxes__item-label\">Home Office</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-PROB\" value=\"PROB\" name=\"categories\"><label for=\"categories-PROB\" class=\"tna-checkboxes__item-label\">Prerogative Court of Canterbury</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-WO\" value=\"WO\" name=\"categories\"><label for=\"categories-WO\" class=\"tna-checkboxes__item-label\">War Office, Armed Forces, Judge Advocate General, and related bodies</label></div></div></fieldset></div>"
"html": "<div class=\"tna-form__group \"><fieldset class=\"tna-form__fieldset\"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Categories</h4></legend><div class=\"tna-checkboxes tna-checkboxes--small\" id=\"categories\"><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-ADM\" value=\"ADM\" name=\"categories\"><label for=\"categories-ADM\" class=\"tna-checkboxes__item-label\">Admiralty, Navy, Royal Marines, and Coastguard</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-AIR\" value=\"AIR\" name=\"categories\"><label for=\"categories-AIR\" class=\"tna-checkboxes__item-label\">Air Ministry and Royal Air Force records</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-BT\" value=\"BT\" name=\"categories\"><label for=\"categories-BT\" class=\"tna-checkboxes__item-label\">Board of Trade and successors</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-C\" value=\"C\" name=\"categories\"><label for=\"categories-C\" class=\"tna-checkboxes__item-label\">Chancery, the Wardrobe, Royal Household, Exchequer and various commissions</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-CO\" value=\"CO\" name=\"categories\"><label for=\"categories-CO\" class=\"tna-checkboxes__item-label\">Colonial Office, Commonwealth and Foreign and Commonwealth Offices</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-E\" value=\"E\" name=\"categories\"><label for=\"categories-E\" class=\"tna-checkboxes__item-label\">Exchequer, Office of First Fruits and Tenths, and the Court of Augmentations</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-FO\" value=\"FO\" name=\"categories\"><label for=\"categories-FO\" class=\"tna-checkboxes__item-label\">Foreign Office</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-HO\" value=\"HO\" name=\"categories\"><label for=\"categories-HO\" class=\"tna-checkboxes__item-label\">Home Office</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-PROB\" value=\"PROB\" name=\"categories\"><label for=\"categories-PROB\" class=\"tna-checkboxes__item-label\">Prerogative Court of Canterbury</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-WO\" value=\"WO\" name=\"categories\"><label for=\"categories-WO\" class=\"tna-checkboxes__item-label\">War Office, Armed Forces, Judge Advocate General, and related bodies</label></div></div></fieldset></div>"
},
{
"name": "checkboxes with a preselected value",
Expand All @@ -104,7 +104,7 @@
}
]
},
"html": "<div class=\"tna-form__group \"><fieldset class=\"tna-form__fieldset\"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Categories</h4></legend><div class=\"tna-checkboxes\"><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-alpha\" value=\"alpha\" name=\"categories\"><label for=\"categories-alpha\" class=\"tna-checkboxes__item-label\">Alpha</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-beta\" value=\"beta\" name=\"categories\" checked><label for=\"categories-beta\" class=\"tna-checkboxes__item-label\">Beta</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-gamma\" value=\"gamma\" name=\"categories\"><label for=\"categories-gamma\" class=\"tna-checkboxes__item-label\">Gamma</label></div></div></fieldset></div>"
"html": "<div class=\"tna-form__group \"><fieldset class=\"tna-form__fieldset\"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Categories</h4></legend><div class=\"tna-checkboxes\" id=\"categories\"><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-alpha\" value=\"alpha\" name=\"categories\"><label for=\"categories-alpha\" class=\"tna-checkboxes__item-label\">Alpha</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-beta\" value=\"beta\" name=\"categories\" checked><label for=\"categories-beta\" class=\"tna-checkboxes__item-label\">Beta</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-gamma\" value=\"gamma\" name=\"categories\"><label for=\"categories-gamma\" class=\"tna-checkboxes__item-label\">Gamma</label></div></div></fieldset></div>"
},
{
"name": "checkboxes with a hint",
Expand All @@ -130,7 +130,7 @@
}
]
},
"html": "<div class=\"tna-form__group \"><fieldset class=\"tna-form__fieldset\" aria-describedby=\"categories-hint \"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Categories</h4></legend><p id=\"categories-hint\" class=\"tna-form__hint\">Select all that apply.</p><div class=\"tna-checkboxes\"><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-alpha\" value=\"alpha\" name=\"categories\"><label for=\"categories-alpha\" class=\"tna-checkboxes__item-label\">Alpha</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-beta\" value=\"beta\" name=\"categories\"><label for=\"categories-beta\" class=\"tna-checkboxes__item-label\">Beta</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-gamma\" value=\"gamma\" name=\"categories\"><label for=\"categories-gamma\" class=\"tna-checkboxes__item-label\">Gamma</label></div></div></fieldset></div>"
"html": "<div class=\"tna-form__group \"><fieldset class=\"tna-form__fieldset\" aria-describedby=\"categories-hint \"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Categories</h4></legend><p id=\"categories-hint\" class=\"tna-form__hint\">Select all that apply.</p><div class=\"tna-checkboxes\" id=\"categories\"><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-alpha\" value=\"alpha\" name=\"categories\"><label for=\"categories-alpha\" class=\"tna-checkboxes__item-label\">Alpha</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-beta\" value=\"beta\" name=\"categories\"><label for=\"categories-beta\" class=\"tna-checkboxes__item-label\">Beta</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-gamma\" value=\"gamma\" name=\"categories\"><label for=\"categories-gamma\" class=\"tna-checkboxes__item-label\">Gamma</label></div></div></fieldset></div>"
},
{
"name": "checkboxes with an error",
Expand Down Expand Up @@ -158,7 +158,7 @@
}
]
},
"html": "<div class=\"tna-form__group tna-form__group--error \"><fieldset class=\"tna-form__fieldset\" aria-describedby=\" categories-error\"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Categories</h4></legend><p id=\"categories-error\" class=\"tna-form__error-message\"><span class=\"tna-!--visually-hidden\">Error:</span> You must select a category</p><div class=\"tna-checkboxes\"><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-alpha\" value=\"alpha\" name=\"categories\"><label for=\"categories-alpha\" class=\"tna-checkboxes__item-label\">Alpha</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-beta\" value=\"beta\" name=\"categories\"><label for=\"categories-beta\" class=\"tna-checkboxes__item-label\">Beta</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-gamma\" value=\"gamma\" name=\"categories\"><label for=\"categories-gamma\" class=\"tna-checkboxes__item-label\">Gamma</label></div></div></fieldset></div>"
"html": "<div class=\"tna-form__group tna-form__group--error \"><fieldset class=\"tna-form__fieldset\" aria-describedby=\" categories-error\"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Categories</h4></legend><p id=\"categories-error\" class=\"tna-form__error-message\"><span class=\"tna-!--visually-hidden\">Error:</span> You must select a category</p><div class=\"tna-checkboxes\" id=\"categories\"><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-alpha\" value=\"alpha\" name=\"categories\"><label for=\"categories-alpha\" class=\"tna-checkboxes__item-label\">Alpha</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-beta\" value=\"beta\" name=\"categories\"><label for=\"categories-beta\" class=\"tna-checkboxes__item-label\">Beta</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-gamma\" value=\"gamma\" name=\"categories\"><label for=\"categories-gamma\" class=\"tna-checkboxes__item-label\">Gamma</label></div></div></fieldset></div>"
},
{
"name": "inline checkboxes",
Expand All @@ -184,7 +184,7 @@
],
"inline": true
},
"html": "<div class=\"tna-form__group tna-form__group--inline\"><fieldset class=\"tna-form__fieldset\"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--xs\">Categories</h4></legend><div class=\"tna-checkboxes tna-checkboxes--small tna-checkboxes--inline\"><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-alpha\" value=\"alpha\" name=\"categories\"><label for=\"categories-alpha\" class=\"tna-checkboxes__item-label\">Alpha</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-beta\" value=\"beta\" name=\"categories\"><label for=\"categories-beta\" class=\"tna-checkboxes__item-label\">Beta</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-gamma\" value=\"gamma\" name=\"categories\"><label for=\"categories-gamma\" class=\"tna-checkboxes__item-label\">Gamma</label></div></div></fieldset></div>"
"html": "<div class=\"tna-form__group tna-form__group--inline\"><fieldset class=\"tna-form__fieldset\"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--xs\">Categories</h4></legend><div class=\"tna-checkboxes tna-checkboxes--small tna-checkboxes--inline\" id=\"categories\"><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-alpha\" value=\"alpha\" name=\"categories\"><label for=\"categories-alpha\" class=\"tna-checkboxes__item-label\">Alpha</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-beta\" value=\"beta\" name=\"categories\"><label for=\"categories-beta\" class=\"tna-checkboxes__item-label\">Beta</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-gamma\" value=\"gamma\" name=\"categories\"><label for=\"categories-gamma\" class=\"tna-checkboxes__item-label\">Gamma</label></div></div></fieldset></div>"
}
]
}
Loading

0 comments on commit de49c1d

Please sign in to comment.