feat: Improve Accessibility of the Searchbar Component

[amymarsh4work]

Feature Request

Ionic version:
[x] 4.x

Description
Improve the overall accessibility for the searchbar component. The searchbar currently isn't recognizable to screen readers and considered a 'generic component'. Also, buttons are lacking descriptive text and relying on icons to convey meaning. The search input is lacking the required label.

Preferred Solution
Add recommended role (ARIA search landmark) to the component, following WAI-ARIA authoring best practices. The search landmark identifies the search area within the page and facilitates keyboard navigation. Add aria-labels to buttons and search input. Hide icons from screen-readers if they are unnecessary and confusing.

NOTE: I intend to submit a PR for this. :)

Alternatives
I considered not suggesting that we hide the 'close' and 'arrow-back' icons when I saw they contained an aria-label element. But then recalled a situation where these were called into question. The 'close' icon used to reset the search form, in particular, left our accessibility testers confused. They even created an issue for our in-house developer team to try to change it. The presence of aria-label attributes on the ion-icons shows good intentions, but seem to more accurately describe the image itself rather than the functionality, in this case.

Repro Steps
I can reproduce the problem by forking the Ionic repo, running npm install, npm start, navigating to the searchbar component and opening the test/basic/index.html. From there, I can confirm these accessibility issues using some well-known developer tools and extensions. Here are the results, at a high-level:
Chrome Lighthouse Accessibility Audit: 65%
WAVE web accessibility evaluation tool: 49 errors
axe for Chrome: 28 violations

Additional Context
Supporting Documentation & Guidelines:
https://www.w3.org/TR/wai-aria-practices-1.1/examples/landmarks/search.html
https://developers.google.com/web/tools/lighthouse/audits/button-name
https://dequeuniversity.com/rules/axe/3.3/button-name (note: user impact rating is labeled 'critical')
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-hidden_attribute

Related Issues
These show interest in the same feature, but appear to have had challenges during the Ionic Framework transition from v3 - v4 and never made it in:
ionic-team/ionic-v3#393
#12048

[brandyscarney]

Thank you for the issue and the PR! This will be added in the 4.7.0 release. Let me know if there is still something missing and I can reopen this. 🙂

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.