feat(numeral-date): update component to render as a fieldset element

[nuria1110]

Proposed behaviour

Updates NumeralDate's HTML to be rendered as a <fieldset> element.

Current behaviour

NumeralDate is rendered as a number of input elements within <div> wrappers, which has no semantic meaning.

Checklist

• Commits follow our style guide
• Related issues linked in commit messages if required
• Screenshots are included in the PR if useful
• All themes are supported if required
• Unit tests added or updated if required
• Playwright automation tests added or updated if required
• Storybook added or updated if required
• Translations added or updated (including creating or amending translation keys table in storybook) if required
• Typescript d.ts file added or updated if required
• Related docs have been updated if required

QA

• Tested in provided StackBlitz sandbox/Storybook
• Add new Playwright test coverage if required
• Carbon implementation matches Design System/designs
• UI Tests GitHub check reviewed if required

Additional context

Testing instructions

• Ensure existing props work as expected when used with new and legacy validation patterns.
• There should be no significant visual differences, some small pixel changes to be expected.

[nuria1110]

The legendHelp prop never rendered a tooltip and is only ever used to render the "Hint Text" within a fieldset with the new validation pattern. Updated the docs to reflect this.

[Parsium]

Good spot! 👍🏼

[edleeks87]

Comment: I wonder if this should be a label element so that when a user clicks on it the relevant input is focused

[edleeks87]

suggestion (non-blocking): It looks like some of the composition here is the same as above, I wonder if it would be possible to store some of this in a variable and pass it to the relevant wrappers depending on the status of the validation flag.

const computedInputs = (...)

  if (!validationRedesignOptIn) {
   return (
     <TooltipProvider helpAriaLabel={helpAriaLabel}>
        <StyledFieldset
          ...
          >
          {computedInputs()}
        </StyledFieldset>
     </TooltipProvider>
   )
 }
 
 return (
    <StyledFieldset
       ...
     >
        {computedInputs()}
    </StyledFieldset>

[Parsium]

Great work on this @nuria1110 👍🏼

[harpalsingh]

Reviewed this with a code look for semantic as well as testing voiceover in Safari, passing a11y review too.

[carbonci]

🎉 This PR is included in version 144.10.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀