fix(storefront): BCTHEME-1094 Make screen reader say all errors on ac…

[huntario]

…count edit page

Watching - #2235 - before moving forward

What?

Makes screen reader read error messages when submitting customer edit account page

Requirements

• CHANGELOG.md entry added (required for code changes only)

Tickets / Documentation

https://bigcommercecloud.atlassian.net/browse/BCTHEME-1094

Screenshots (if appropriate)

BEFORE

before-BCTHEME-1094.mp4

AFTER

after-BCTHEME-1094.mp4

[huntario]

Will rely on - #2230 - for updates to some fields such as the email and password fields.

[mattcoy-arcticleaf]

@huntario @BC-krasnoshapka @bc-yevhenii-buliuk , would it not be better to just use the pre-existing form components instead of having separate code for the edit-account page?

[huntario]

Thanks for taking a look at this @mattcoy-arcticleaf - It does make use of some of the form components here

{{#each forms.edit_account.fields}}
    {{{dynamicComponent 'components/common/forms'}}}
{{/each}}

These are the password, email, and any custom signup fields found in the control panel under - Settings > (Advanced ) Account Signup Form.

The hard coded fields correspond to some of the fields found under Customers > View > (click specific customer record). Perhaps these fields could be included with the dynamicComponent helper in the future for better reusability but would require refactoring backend code as well. This change was targeted specifically at helping screen readers read form errors on the edit account page.

[mattcoy-arcticleaf]

@huntario ,

I have added these in our own theme. Happy to submit a PR with the code change, but basically just calling the components themselves, rather than re-building the form elements again manually. I also made some attributes a component since I noticed they were repeated across every single form element file.

Example:
{{> components/common/forms/text required=true id="account_firstname" name="account_firstname" label=(lang 'account.settings.first_name') value=forms.edit_account.first_name}}