Search guidance considerations and areas of concerns

[mbgower]

This omnibus issue for Search component combines design and implementation considerations, as well as problems with specific guidance on the Carbon website. It is the result of an accessibility review of:

• the Search component
• the Search pattern
• the Figma design tool's search samples

A separate issue with a bug in the current implementation of Carbon's search component is at https://github.com/carbon-design-system/carbon/issues/12360

This issue is a summary of the more significant considerations, but the Usage, Style and pattern documents contain exports of those Carbon pages with comments specific to content, which should all be reviewed.

Key challenges to resolve:

• the search component only covers the search input, not the multiple search types and their own interactions and results
  • search suggestions and typeahead behaviour (which varies across Carbon)
  • search outcomes and status (e.g., "25 results found", "no results found")
  • results navigation (in a filtered table, on a page of search results)
• within the search component itself, there are multiple variants which look identical in a design tool and on the page (as documented on the accessibility tab) until the user interacts with them. Each variant should have visual affordances so it is clear how which to implement without designer annotations.
• no documentation of UI Shell Header search functionality (small list of results under typeahead)
• the generic "search" aria-label for the input and the search landmark result in verbose screen reader output & the generic "search" aria-label means that pages with multiple search mechanisms automatically fail rules
  • suggested solution to this is for Carbon to 1) adopt placeholder text as the input's name. 2) consider removing search role on search in UI Shell header (and potentially everywhere)
• the search pattern topic is not cross-referenced from the search component. At the least it should. Preferable would be to move information to the component. Note that there are a LOT of comments in the review of the Search pattern.
• Recommendation: the search output/results interactions/designer, etc., be documented, including accessibility considerations. I can provide a lot of input when you're ready to tackle this.
• Search component Usage page does not follow standard template
• appearance of "x" to clear input is improperly shown in Carbon and Figma even when no text is entered in the input. Needs to be corrected
• Figma, like some of the usage and style guidance, fails to distinguish between the focus and populated input. The X should only be there once a character is entered in the input. Focus itself, is only comprised of the focus indicator. Note that because they populate the input, what they show isn't wrong. It just is missing one state.
• Note: looked at the filter pattern and it does not cover ANY of the filter-like behaviour of a data table search. So this is another gap that needs to be considered.

[mbgower]

I should also mention that I have a document started that covers a few of the additional search considerations (mainly drawing them from the search pattern). It is very skeletal, but when Carbon begins addressing the search component, I can contribute additional material for accessibility.

[mbgower]

Here's a screenshot from the w3 presentation at the Carbon Summit that included info on them using search results

Juan Encalada asked "What is the IBMer search experience?" There are a bunch of features of search results shown here, all of which could be addressed by Carbon -- even if only in the Search pattern. Many have accessibility considerations.