Version 1.17.0 (#1867)

### Fixes
- Change search bar icons used within button component from `div`s to `span`s (#1857).
  - Note, any styling that is applied by targeting `div`s or `span`s directly may be impacted by this change. This could result in previously applied styles no longer being applied to these icons, or other styles inadvertently being applied to the icons

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yext/answers-search-ui",
-  "version": "1.16.7",
+  "version": "1.17.0",
   "description": "Javascript Search Programming Interface",
   "main": "dist/answers-umd.js",
   "repository": {

src/ui/sass/modules/_SearchBar.scss

@@ -280,13 +280,18 @@ $searchbar-button-text-color-active: var(--yxt-searchbar-button-text-color-base)
 
   &-buttonImage .Icon svg, .Icon-image
   {
+    display: block;
     width: 2em;
     height: 2em;
   }
 
   &-instructions {
     display: none;
   }
+
+  &-CustomLoadingImage {
+    display: block;
+  }
 }
 
 // If custom icons are supplied, the SVGs simply alternate opacity

src/ui/templates/icons/builtInIcon.hbs

@@ -1,3 +1,3 @@
-<div class="Icon Icon--{{iconName}} {{classNames}}" aria-hidden="true">
+<span class="Icon Icon--{{iconName}} {{classNames}}" aria-hidden="true">
   {{icon iconName complexContentsParams}}
-</div>
+</span>

src/ui/templates/icons/icon.hbs

@@ -1,7 +1,7 @@
-<div class="Icon Icon--{{name}} {{classNames}}" aria-hidden="true">
+<span class="Icon Icon--{{name}} {{classNames}}" aria-hidden="true">
   {{#if iconUrl}}
     <img src="{{iconUrl}}" alt="" class="Icon-image">
   {{else}}
     {{icon iconName complexContentsParams}}
   {{/if}}
-</div>
+</span>

src/ui/templates/icons/iconPartial.hbs

@@ -1,7 +1,7 @@
-<div class="Icon Icon--{{#if iconName}}{{iconName}}{{else}}custom{{/if}} {{classNames}}" aria-hidden="true">
+<span class="Icon Icon--{{#if iconName}}{{iconName}}{{else}}custom{{/if}} {{classNames}}" aria-hidden="true">
   {{#if iconUrl}}
     <img src="{{iconUrl}}" alt="" class="Icon-image">
   {{else}}
     {{icon iconName complexContentsParams}}
   {{/if}}
-</div>
+</span>

src/ui/templates/icons/searchBarIcon.hbs

@@ -1,41 +1,41 @@
 {{#if showLoadingIndicator}}
   {{#if customLoadingIconUrl}}
-    <div class="yxt-SearchBar-CustomLoadingImage js-yxt-SearchBar-LoadingIndicator js-yxt-SearchBar-Icon yxt-SearchBar-Icon--inactive">
+    <span class="yxt-SearchBar-CustomLoadingImage js-yxt-SearchBar-LoadingIndicator js-yxt-SearchBar-Icon yxt-SearchBar-Icon--inactive">
       {{> icons/iconPartial iconUrl=customLoadingIconUrl}}
-    </div>
+    </span>
   {{else}}
-    <div class="yxt-SearchBar-AnimatedIcon js-yxt-SearchBar-LoadingIndicator yxt-SearchBar-LoadingIndicator js-yxt-SearchBar-Icon 
+    <span class="yxt-SearchBar-AnimatedIcon js-yxt-SearchBar-LoadingIndicator yxt-SearchBar-LoadingIndicator js-yxt-SearchBar-Icon 
       yxt-SearchBar-Icon--inactive Icon--lg">
       <svg class= "yxt-SearchBar-LoadingIndicator-AnimatedIcon" viewBox="0 0 72 72">
         <circle class="yxt-SearchBar-LoadingIndicator-Circle" cx="36" cy="36" r="33" stroke="black" stroke-width="3" fill="none"/>
       </svg>
-    </div>
+    </span>
   {{/if}}
 {{/if}}
 
 {{#if submitIcon}}
-  <div class="yxt-SearchBar-buttonImage js-yxt-SearchBar-buttonImage js-yxt-SearchBar-Icon">
+  <span class="yxt-SearchBar-buttonImage js-yxt-SearchBar-buttonImage js-yxt-SearchBar-Icon">
     {{> icons/builtInIcon iconName=submitIcon}}
-  </div>
+  </span>
 {{else if _config.customIconUrl}}
-  <div class="yxt-SearchBar-buttonImage js-yxt-SearchBar-buttonImage js-yxt-SearchBar-Icon">
+  <span class="yxt-SearchBar-buttonImage js-yxt-SearchBar-buttonImage js-yxt-SearchBar-Icon">
     {{> icons/iconPartial iconUrl=_config.customIconUrl}}
-  </div>
+  </span>
 {{else}}
-  <div class="yxt-SearchBar-AnimatedIcon js-yxt-AnimatedForward js-yxt-SearchBar-Icon
+  <span class="yxt-SearchBar-AnimatedIcon js-yxt-AnimatedForward js-yxt-SearchBar-Icon
     {{#unless autoFocus}} yxt-SearchBar-Icon--inactive{{/unless}}">
     {{> icons/builtInIcon
       iconName='yext_animated_forward'
       classNames='yxt-SearchBar-MagnifyingGlass--static Icon--lg'
       complexContentsParams=forwardIconOpts.complexContentsParams
     }}
-  </div>
-  <div class="yxt-SearchBar-AnimatedIcon js-yxt-AnimatedReverse js-yxt-SearchBar-Icon
+  </span>
+  <span class="yxt-SearchBar-AnimatedIcon js-yxt-AnimatedReverse js-yxt-SearchBar-Icon
     {{#if autoFocus}} yxt-SearchBar-Icon--inactive{{/if}}">
     {{> icons/builtInIcon
       iconName='yext_animated_reverse'
       classNames='yxt-SearchBar-Yext--static Icon--lg'
       complexContentsParams=forwardIconOpts.complexContentsParams
     }}
-  </div>
+  </span>
 {{/if}}

src/ui/templates/icons/voiceSearchIcon.hbs

@@ -14,4 +14,4 @@
     {{/if}}
   </div>
   <span class="yxt-SearchBar-voiceSearchText sr-only"></span>
-</div>
+</div>