Skip to content

feat(add another)!: improvements and accessibility fixes for updated component#2151

Open
Chris Pymm (chrispymm) wants to merge 26 commits intomainfrom
add-another
Open

feat(add another)!: improvements and accessibility fixes for updated component#2151
Chris Pymm (chrispymm) wants to merge 26 commits intomainfrom
add-another

Conversation

@chrispymm
Copy link
Contributor

BREAKING CHANGE:

  • Allow unique indexes for fieldset legends, remove buttons and field labels
  • Move templating into a nunjucks macro
  • Pass in item template HTML to the macro for generating new items to prevent unwanted markup being duplicated (e.g. error messages)

@chrispymm Chris Pymm (chrispymm) requested a review from a team as a code owner January 22, 2026 06:43
@chrispymm Chris Pymm (chrispymm) added the preview:request Deploy PR to a preview url label Jan 22, 2026
@github-actions
Copy link

🚀 Deployed to preview environment! If this is the first deploy, you may have to wait a few minutes for your preview site to be ready on the following URL:

https://moj-frontend-pr-2151.apps.live.cloud-platform.service.justice.gov.uk

Username: preview, Password: moj

@github-actions github-actions bot added preview:active and removed preview:request Deploy PR to a preview url labels Jan 22, 2026
@github-actions
Copy link

🚀 Deployed to preview environment! If this is the first deploy, you may have to wait a few minutes for your preview site to be ready on the following URL:

https://moj-frontend-pr-2151.apps.live.cloud-platform.service.justice.gov.uk

Username: preview, Password: moj

3 similar comments
@github-actions
Copy link

🚀 Deployed to preview environment! If this is the first deploy, you may have to wait a few minutes for your preview site to be ready on the following URL:

https://moj-frontend-pr-2151.apps.live.cloud-platform.service.justice.gov.uk

Username: preview, Password: moj

@github-actions
Copy link

🚀 Deployed to preview environment! If this is the first deploy, you may have to wait a few minutes for your preview site to be ready on the following URL:

https://moj-frontend-pr-2151.apps.live.cloud-platform.service.justice.gov.uk

Username: preview, Password: moj

@github-actions
Copy link

🚀 Deployed to preview environment! If this is the first deploy, you may have to wait a few minutes for your preview site to be ready on the following URL:

https://moj-frontend-pr-2151.apps.live.cloud-platform.service.justice.gov.uk

Username: preview, Password: moj

@chrispymm Chris Pymm (chrispymm) linked an issue Feb 19, 2026 that may be closed by this pull request
7 tasks
@github-actions
Copy link

🚀 Deployed to preview environment! If this is the first deploy, you may have to wait a few minutes for your preview site to be ready on the following URL:

https://moj-frontend-pr-2151.apps.live.cloud-platform.service.justice.gov.uk

Username: preview, Password: moj

@github-actions
Copy link

🚀 Deployed to preview environment! If this is the first deploy, you may have to wait a few minutes for your preview site to be ready on the following URL:

https://moj-frontend-pr-2151.apps.live.cloud-platform.service.justice.gov.uk

Username: preview, Password: moj

2 similar comments
@github-actions
Copy link

🚀 Deployed to preview environment! If this is the first deploy, you may have to wait a few minutes for your preview site to be ready on the following URL:

https://moj-frontend-pr-2151.apps.live.cloud-platform.service.justice.gov.uk

Username: preview, Password: moj

@github-actions
Copy link

🚀 Deployed to preview environment! If this is the first deploy, you may have to wait a few minutes for your preview site to be ready on the following URL:

https://moj-frontend-pr-2151.apps.live.cloud-platform.service.justice.gov.uk

Username: preview, Password: moj

const $legend = $fieldset.querySelector('legend')

if ($legend && $legend instanceof HTMLLegendElement) {
$legend.innerHTML = `${labelText}<span class="govuk-visually-hidden">for ${this.config.itemLabel.toLowerCase()} ${index + 1}</span>`

Check failure

Code scanning / CodeQL

DOM text reinterpreted as HTML High

DOM text
is reinterpreted as HTML without escaping meta-characters.
@github-actions
Copy link

github-actions bot commented Mar 2, 2026

🚀 Deployed to preview environment! If this is the first deploy, you may have to wait a few minutes for your preview site to be ready on the following URL:

https://moj-frontend-pr-2151.apps.live.cloud-platform.service.justice.gov.uk

Username: preview, Password: moj

@github-actions
Copy link

github-actions bot commented Mar 2, 2026

🚀 Deployed to preview environment! If this is the first deploy, you may have to wait a few minutes for your preview site to be ready on the following URL:

https://moj-frontend-pr-2151.apps.live.cloud-platform.service.justice.gov.uk

Username: preview, Password: moj

@github-actions
Copy link

github-actions bot commented Mar 4, 2026

🚀 Deployed to preview environment! If this is the first deploy, you may have to wait a few minutes for your preview site to be ready on the following URL:

https://moj-frontend-pr-2151.apps.live.cloud-platform.service.justice.gov.uk

Username: preview, Password: moj

@github-actions
Copy link

github-actions bot commented Mar 6, 2026

🚀 Deployed to preview environment! If this is the first deploy, you may have to wait a few minutes for your preview site to be ready on the following URL:

https://moj-frontend-pr-2151.apps.live.cloud-platform.service.justice.gov.uk

Username: preview, Password: moj

This change refactors the macro for the component to remove the itemTemplate from being public and
keep it internal to the component.  Instead of passing all items as one chunk of html, users will
passs in an array of items which the component will wrap with the item fieldset.  This PR also no
longer relies on the user setting content in an html template, but creates it own <template> element
from the first item on intialization.
…r inline variant

Refactor the params passed into the item template. Lean harder on GOV.UK conventions. Item now
accepts a `fieldset` option which matches the standard GOV.UK fieldset.

Update error handling of the inline layout option.  This functions
essentially the same as the GOV.UK date field as the structure is the
same - a fieldset with nested input fields.  This allows the error
message to span the horizontally laid out fields and not disrupt the
layout.
@github-actions
Copy link

github-actions bot commented Mar 9, 2026

🚀 Deployed to preview environment! If this is the first deploy, you may have to wait a few minutes for your preview site to be ready on the following URL:

https://moj-frontend-pr-2151.apps.live.cloud-platform.service.justice.gov.uk

Username: preview, Password: moj

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Build component in HTML and Nunjucks

1 participant