Skip to content

Conversation

@colinrotherham
Copy link
Collaborator

This PR upgrades the React components to NHS.UK frontend v10.3

The file upload component, card actions and interruption panel variant are all included

File upload component

Card actions

Interruption panel

@sonarqubecloud
Copy link

Quality Gate Failed Quality Gate failed

Failed conditions
15.0% Duplication on New Code (required ≤ 3%)

See analysis details on SonarQube Cloud

@colinrotherham
Copy link
Collaborator Author

colinrotherham commented Jan 21, 2026

Not sure if you'd be up for reviewing this please @mikeathan-nhs?

I could do with adding some extra bits to the migration guide but the component changes are ready to review

There's only one complication I'd like another pair of eyes on

Heading elements versus props

For accessibility reasons, repetitive card actions repeat the heading in visually hidden text

But due to CardContext and the 'use client' requirement, I found it wasn't possible to retrieve the heading text during a server-side render. So for easy access I've currently proposed moving the heading to a prop:

Before

<Card>
  <Card.Heading>Example heading</Card.Heading>
  {/* … */}
</Card>

After

<Card heading="Example heading">
  {/* … */}
</Card>

Whilst this matches the approach for <FormGroup> where label, legend etc are all props, it turns out we don't need CardContext at all so I might be able to revert this change

What do you think?

Plenty of other heading/title elements still exist:

<Hero.Heading>
<NotificationBanner.Heading>
<NotificationBanner.Title>
<ErrorSummary.Title>
<Panel.Title>
<Tabs.Title>

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant