[ic-date-input/picker]: Add 'hideHelperText' prop

[jd239]

Summary

By default, the date input/picker displays helper text'. This ticket is to create a prop which removes the helper text.

💬 Description

By default, the date input/picker displays helper text'. Some designs may not require help text as the placeholders for picker/input present the required format. If custom helper text is required, there is no need to remove the helper text. The solution is to create a simple 'hideHelperText' prop to hide it.

In terms of a11y, the format is announced by screen readers so there should not be an issue. The announcement is made via labelledby so it may be better to add 'sr-only' class to the helper text instead of removing the element from the DOM.

💰 Use value

Add extra flexibility to the visual for input/picker as some designs may not use helper text for form controla.

📝 Acceptance Criteria

If relevant, describe in full detail the different interactions and edge cases that the component or patterns needs to fulfil.

Given as a developer When I set 'hideHelperText' prop to true
Then the helper text should disappear visually but still be read out by screen readers

✏ Designs

N/A

 🧾 Guidance

N/A

Additional info

The helper text within the doc returns 'undefined' as the custom helper text value. This needs to be changed to 'Use format '. This is a small update which can be added to this ticket.

[MI6-255]

Community member asked for this to be added

[MI6-255]

Community member comment: I see the AC is set to 'When I set 'hideHelperText' prop to true; Then the helper text should disappear visually but still be read out by screen readers'. Can make sure that the helperText line will be removed & not just replaced with spaces, so that there isn't a gap between the label & the datePicker component