JS Version 0.13.1 Release - Search Bar

Product/Library Releases & New Features
1

A few new search bar features! :partying_face:

Animated Search Icon

With version 0.13.1, you’ll now get a default animated icon, that transitions from the Yext logo to the default search icon

Accessibility

We’ve added better support for WCAG best practices. The search bar now passes WAVE (a WCAG automated testing tool).

There have been no changes to the search bar configuration, you’ll get the above functionality just by upgrading to this version of the JS Library. Let us know if you have any questions on how to use the search bar in version 13.1!

2

With this release, there is an issue around the search bar border on mobile. Here’s some recommended styling that you can add to your answers.scss in order to fix it:

.yxt-SearchBar
{
  &-container
  {
    @include bplte(sm) {
      border-radius: .4rem;
      border: .0625rem solid #dcdcdc;
    }
  }
}
3

Hi @roser - is it expected that clients will also get our search bar border issue on mobile when they go to implement on a white background? Should we proactively provide styling guidance if so?

4

Hey @roser!

My client asked a question that I think will be solved by this update - but I was wondering if you could provide more color around what an “aria-label” is, and how this update potentially addresses the below concern around aria-labels.

I do see a "<label class="yxt-SearchBar-label" for="query" id="query-firstlabel">Search (client domain)" tag, it looks like that doesn’t meet WCAG 2.0 standards - the input form specifically needs an aria-label tag or a title tag.

5

Hi Jessie!

Our friends at MDN have some good reference docs on ARIA. To quote them,

Accessible Rich Internet Applications (ARIA) is a set of attributes that define ways to make web content and web applications (especially those developed with JavaScript) more accessible to people with disabilities.

It supplements HTML so that interactions and widgets commonly used in applications can be passed to assistive technologies when there is not otherwise a mechanism.

It’s not clear from the HTML markup alone what the search bar element does. As the client pointed out, an aria-label is needed to make its functionality explicit to assistive technologies. Per w3c’s docs on Techniques for WCAG 2.0,

Elements can be given the attribute aria-label to provide an accessible name for situations when there is no visible label due to a chosen design approach or layout but the context and visual appearance of the control make its purpose clear.

The search bar does not have a visible label or title, therefore an aria-label is used.

The label defaults to “Conduct a search”, but can be overridden with the labelText. When the search bar is initialized on the main domain, this can be added alongside all the other config options, like placeholderText and redirectUrl.

Here’s some additional reading on aria-label if you’re interested!
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute

Thanks! :rose:

1 Like
6

Hi Sam, yes I’d recommend the styling guidance be provided proactively to anyone integrating with a white background.

7

Thank you Rose!! This is so helpful.