add errorIconLabel prop to FormField to ensure icon has a text alternative

[jorycunningham]

Description

Our form field errors have an error icon that currently has no text equivalent. This PR adds a prop to provide a text alternative.

• add an errorIconLabel prop to FormField which creates an aria-label wrapper around the error icon
• update Form Field Permutations page to use new prop
• Add tests to ensure the prop renders an aria-label around the icon

How has this been tested?

Tested manually, ran Axe Core against permutation page, visual regression test

To test, check the Form Fields permutation page with a screen reader and observe that there is now a text equivalent associated with the error icon

Documentation changes

[Do the changes include any API documentation changes?]

• [X] Yes, this change contains documentation changes.
• [ ] No.

Related Links

fixes AWSUI-18945

Review checklist

The following items are to be evaluated by the author(s) and the reviewer(s).

Correctness

• [X] Changes are backward-compatible if not indicated, see CONTRIBUTING.md.
• [X] Changes do not include unsupported browser features, see CONTRIBUTING.md.
• [X] Changes were manually tested for accessibility, see accessibility guidelines.

Security

• [ ] If the code handles URLs: all URLs are validated through the checkSafeUrl function.

Testing

• [ ] Changes are covered with new/existing unit tests?
• [X] Changes are covered with new/existing integration tests?

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

[timogasda]

To fix unit test errors with the documentation snapshots, you need to run npm run build and update the snapshots. Something like: npx jest --watch -c jest.unit.config.js src/__tests__/documenter.test.ts and then press u to update.

[codecov[bot]]

Codecov Report

Merging #202 (ef44ee2) into main (8d6b4ae) will increase coverage by 0.00%. The diff coverage is 100.00%.

@@           Coverage Diff           @@
##             main     #202   +/-   ##
=======================================
  Coverage   92.66%   92.66%           
=======================================
  Files         559      559           
  Lines       15751    15754    +3     
  Branches     4306     4308    +2     
=======================================
+ Hits        14595    14598    +3     
  Misses       1075     1075           
  Partials       81       81           

Impacted Files	Coverage Δ
src/form-field/internal.tsx	100.00% <100.00%> (ø)
src/tag-editor/index.tsx	90.81% <100.00%> (+0.09%)	:arrow_up:
src/test-utils/dom/form-field/index.ts	100.00% <100.00%> (ø)

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

[jorycunningham]

I've renamed the prop errorIconAriaLabel and moved it into i18nStrings per @timogasda

[YueyingLu]

@jorycunningham could you also check the test failures?

[YueyingLu]

@jorycunningham it is necessary to add errorIconAriaLabel to fix a11y failures, as you did for Flashbar.

[jorycunningham]

@jorycunningham it is necessary to add errorIconAriaLabel to fix a11y failures, as you did for Flashbar.

@YueyingLu yes. In this case it is an instance of the error icon in the tag editor page, I need to update the i18n interface for tag editor for the new prop, then provide it.

[YueyingLu]

@jorycunningham thank you for updating. We still have test failures. My hunch is we moved the id. Could you check it?