Modification - Update of the suffix and prefix directives

[elenagarrone]

Type of request
Modification

Component, pattern, template, helper or foundation?
Helper

Nature of request
I want to propose the modification of the suffix and prefix directives from the code base.
This would be a breaking change, mainly because we need to make sure that the projects have descriptive labels in place.

The reason for the modification has arisen from the investigation of the issue: #1069

At the moment, the only function of the suffix and prefix directives is to add an id to the element that uses the directive.
The id is then linked to the text input via the aria-describedby attribute.

Note: suffix and prefix directives are only used by the text input.

The fact that the elements with the directives are connected to the text input causes confusion; for example the below scenario shouldn't read the close search buttons until the user tabs on them:

From the article linked in the issue above:

---

Proposed changes:

We should:

• modify both the directives so that:
  • they don't add an id to the element using the directive
  • they add an aria-hidden="true" to the element using the directive (the only exclusion is if the element is a button as we want the label to be read when the user tabs to it)
• update the input component so that it doesn't link the directives to the input via aria-descriedby
• add documentation around the fact that labels should be descriptive