Terra-core: Terra.should.beAccessible() failures

[cwalten]

Issue Description

Our project recently moved to WebdriverI/O following the terra-toolkit upgrade. With that, we are wanting to use the beAccessible helper service, but it is failing on some Terra Core components.

Issue Type

• [ ] New Feature
• [ ] Enhancement
• [ ] Bug
• [x] Other

Expected Behavior

The Terra components should be able to pass the beAccessible service in terra-toolkit

Current Behavior

The following 3 failures I believe are linked back to implementation details on the Terra side:

• No aria-label on Search Field's input element. search-input was suggested in #1619 but will need translations.
• No aria-label or alt attribute on the img tag for Demographics Banner
• No aria-label for the ... button in Collapsible Menu Button

[BenBoersma]

I haven't had much luck recreating the described issue for Demographics Banner. Can you give an example of how you're using it?

[bjankord]

@BenBoersma I tested the axe browser extension on https://engineering.cerner.com/terra-core/#/raw/tests/terra-demographics-banner/demographics-banner/populated-demographics-banner and I too wasn't able to reproduce the issue with the demographics banner. I believe this has been resolved in a release of terra-image.

[bjankord]

The collapsible menu issue has been resolved in https://github.com/cerner/terra-core/pull/1456

[bjankord]

There was some prior discussion on what to do with the search field and its aria-label for for the input and button here but we never landed on anything.

I'd recommend we use the string, Search, for the aria-label on the input and the string, Submit search, on the aria-label for the button. We should have translations for the string, Search. We'll need to get translations for the string, Submit search.

I think this is the last remaining issue that needs to be resolved to close this issue out.

[BenBoersma]

There was an offline discussion about the search-field aria-label, where the consensus was to add a new prop to terra-search-field called inputAttributes that would pass down custom props to the Input component to use. This way the aria-label wouldn't be constrained to a generic label and the search-field could be labeled as something like "Personnel search".

[bjankord]

This has now been resolved.