carbon
carbon copied to clipboard
Sage
Placeholder consistency in the search component.
Desired behaviour
Use the same design for the placeholder
Current behaviour
The style of the placeholder is different.
Suggested Solution
If a placeholder cannot be used due to accessibility requirements, how can we clearly communicate what input is expected? In some situations, having a designated area could prove beneficial. To achieve this, using a more prominent text hue would suffice.
CodeSandbox or Storybook URL
No response
Anything else we should know?
No response
Confidentiality
- [X] I confirm there is no confidential or commercially sensitive information included.
Hi @DavidBouffort would you be able to provide some more information on this please? Would you like search to have some sort of hint text above? Similar to what you can do on components like Password or Select?
Luke has requested that a ticket be opened for this matter regarding the placeholder UI. It is important to maintain consistency by utilizing a uniform look and feel. According to the accessibility team, the use of placeholders is not recommended as they may not be accessible. Nevertheless, providing descriptive text within a field can be helpful for indicating what actions or information are required. We have this need for dropdown components, lookup and search.
Hi @DavidBouffort 👋🏼 Looking at the Design System docs, it seems two variants of the component are supported, one which has the search button with a label:
and the other with a search button without a label:
I agree having a label on the search button itself is preferable (over using placeholder text inside the input box) for accessibility reasons. @ljemmo should the placeholder continue to be supported within DS and Carbon for this reason?
@DavidBouffort it seems we don't support adding a label onto the search button in Carbon which DS clearly does, so we will add a ticket to address this.
