LG-7766: Update hint text and label for memorable date component

[svalexander]

🎫 Ticket

Lg-7766

🛠 Summary of changes

This pr updates the hint text for the memorable date component. It updates the hint text for each of the inputs (month, day and year) by removing the reference to the hint under the label. It replaces that hint with more specific hints for each input. Also updated the label for the component so it matches other components on the form page.

📜 Testing Plan

Provide a checklist of steps to confirm the changes.

• Navigate to the form page
• Use a screen reader to navigate through the page
• Verify hint under date of birth label is read
• Verify hint text for month is "example: 4"
• Verify hint text for day is "example: 28"
• Verify hint text for year is "example: 1986"

[aduth]

It would be good if we could have some spec coverage for this. The Capybara finders should be able to locate a field by its accessible computed name which would be useful to be able to find the field with the expected label "Month Example: 4", though I'm not sure how well it works with multiple distinct labels for the same field like what we're implementing here.

[aduth]

A page can potentially have more than one instance of this component, so I think we should use unique_id like with the describedby to avoid any risk of duplicate IDs.

Suggested change

	labelledby: 'month_hint_id',
	labelledby: "memorable-date-month-hint-#{unique_id}",

[aduth]

Would assigning aria-labelledby to just the hint risk that the user would not be informed that this is the "Month" field?

[svalexander]

it makes sense to add the id for sure. I did add it in but having trouble with the span - using the inspect tool I see the id in the span still says "unique_id" rather than the id that should have been generated.

[svalexander]

oh wait, i got it working now. I was missing this syntax: <%={id} %>

[aduth]

I mentioned at #7365 (comment), but I might worry how a screen reader would handle the fact that we use both <label for="..."> + aria-labelledby to label each field. Maybe for extra assurance, do you think it'd help to create an ID for the label and then set aria-labelledby to point to both the label element and the hint text?

Suggested change

	labelledby: "memorable-date-month-hint-#{unique_id}",
	labelledby: [
	"memorable-date-month-label-#{unique_id}",
	"memorable-date-month-hint-#{unique_id}",
	],

[aduth]

Testing this in Safari + VoiceOver, the "Month" label is currently not read when focusing the field.

month-field.mov

[svalexander]

ahh i think i misunderstood the comment the 1st time, updated so it has the label id. that was definitely keeping the label from being associated with the input field.

[aduth]

Can we add a spec which tests that the hint is included in the field label?

[aduth]

LGTM 👍