@searchstax-inc/searchstudio-ux-js 0.6.3 → 0.6.19

package/README.md

@@ -191,8 +191,8 @@ example of input widget initialization with various options
         template: `
         <div class="searchstax-search-input-container">
             <div class="searchstax-search-input-wrapper">
-                <input type="text" id="searchstax-search-input" class="searchstax-search-input" placeholder="SEARCH FOR..." />
-                <button class="searchstax-spinner-icon" id="searchstax-search-input-action-button"></button>
+                <input type="text" id="searchstax-search-input" class="searchstax-search-input" placeholder="SEARCH FOR..." aria-label="Search" />
+                <button class="searchstax-spinner-icon" id="searchstax-search-input-action-button" aria-label="search"></button>
             </div>
         </div>
         `,
@@ -233,14 +233,11 @@ example of result widget initialization with various options
       searchResultTemplate: {
         template: `
             <div class="searchstax-search-result {{#thumbnail}} has-thumbnail {{/thumbnail}}">
+            <a href="{{url}}" data-searchstax-unique-result-id="{{uniqueId}}" class="searchstax-result-item-link searchstax-result-item-link-wrapping" tabindex="0">
                 {{#promoted}}
                     <div class="searchstax-search-result-promoted"></div>
                 {{/promoted}}
 
-                {{#url}}
-                    <a href="{{url}}" data-searchstax-unique-result-id="{{uniqueId}}" class="searchstax-result-item-link"></a>
-                {{/url}}
-
                 {{#ribbon}}
                     <div class="searchstax-search-result-ribbon">
                     {{ribbon}}
@@ -278,6 +275,7 @@ example of result widget initialization with various options
                         </p>
                     {{/isImage}}
                 {{/unmappedFields}}
+                </a>
             </div>
             `,
         searchResultUniqueIdAttribute: "data-searchstax-unique-result-id"
@@ -289,13 +287,13 @@ example of result widget initialization with various options
                 Showing <strong>no results</strong> for <strong>"{{ searchTerm }}"</strong>
                 <br>
                 {{#spellingSuggestion}}
-                    <span>&nbsp;Did you mean <a href="#" class="searchstax-suggestion-term">{{ spellingSuggestion }}</a>?</span>
+                    <span>&nbsp;Did you mean <a href="#" class="searchstax-suggestion-term" onclick="searchCallback('{{ spellingSuggestion }}')">{{ spellingSuggestion }}</a>?</span>
                 {{/spellingSuggestion}}
             </div>
-            <div>
-                <p>Try searching for search related terms or topics. We offer a wide variety of content to help you get the information you need.</p>
-                <p>Lost? Click on the ‘X” in the Search Box to reset your search.</p>
-            </div>
+            <ul class="searchstax-no-results-list">
+                <li>Try searching for search related terms or topics. We offer a wide variety of content to help you get the information you need.</li>
+                <li>Lost? Click on the ‘X” in the Search Box to reset your search.</li>
+            </ul>
           {{/searchExecuted}}
             `
       }
@@ -326,14 +324,11 @@ example of result widget initialization with infinite scroll enabled. This will
       searchResultTemplate: {
         template: `
             <div class="searchstax-search-result {{#thumbnail}} has-thumbnail {{/thumbnail}}">
+            <a href="{{url}}" data-searchstax-unique-result-id="{{uniqueId}}" class="searchstax-result-item-link searchstax-result-item-link-wrapping" tabindex="0">
                 {{#promoted}}
                     <div class="searchstax-search-result-promoted"></div>
                 {{/promoted}}
 
-                {{#url}}
-                    <a href="{{url}}" data-searchstax-unique-result-id="{{uniqueId}}" class="searchstax-result-item-link"></a>
-                {{/url}}
-
                 {{#ribbon}}
                     <div class="searchstax-search-result-ribbon">
                     {{ribbon}}
@@ -371,6 +366,7 @@ example of result widget initialization with infinite scroll enabled. This will
                         </p>
                     {{/isImage}}
                 {{/unmappedFields}}
+                </a>
             </div>
             `,
         searchResultUniqueIdAttribute: "data-searchstax-unique-result-id"
@@ -382,13 +378,13 @@ example of result widget initialization with infinite scroll enabled. This will
                 Showing <strong>no results</strong> for <strong>"{{ searchTerm }}"</strong>
                 <br>
                 {{#spellingSuggestion}}
-                    <span>&nbsp;Did you mean <a href="#" class="searchstax-suggestion-term">{{ spellingSuggestion }}</a>?</span>
+                    <span>&nbsp;Did you mean <a href="#" class="searchstax-suggestion-term" onclick="searchCallback('{{ spellingSuggestion }}')">{{ spellingSuggestion }}</a>?</span>
                 {{/spellingSuggestion}}
             </div>
-            <div>
-                <p>Try searching for search related terms or topics. We offer a wide variety of content to help you get the information you need.</p>
-                <p>Lost? Click on the ‘X” in the Search Box to reset your search.</p>
-            </div>
+            <ul class="searchstax-no-results-list">
+                <li>Try searching for search related terms or topics. We offer a wide variety of content to help you get the information you need.</li>
+                <li>Lost? Click on the ‘X” in the Search Box to reset your search.</li>
+            </ul>
           {{/searchExecuted}}
             `
       }
@@ -427,11 +423,11 @@ example of pagination widget initialization with various options
       {{#results.length}}
         <div class="searchstax-pagination-container">
           <div class="searchstax-pagination-content">
-            <a class="searchstax-pagination-previous {{#isFirstPage}}disabled{{/isFirstPage}}" id="searchstax-pagination-previous">< Previous</a>
+            <a class="searchstax-pagination-previous {{#isFirstPage}}disabled{{/isFirstPage}}" id="searchstax-pagination-previous" tabindex="0">< Previous</a>
             <div class="searchstax-pagination-details">
               {{startResultIndex}} - {{endResultIndex}} of {{totalResults}}
             </div>
-              <a class="searchstax-pagination-next {{#isLastPage}}disabled{{/isLastPage}}" id="searchstax-pagination-next">Next ></a>
+              <a class="searchstax-pagination-next {{#isLastPage}}disabled{{/isLastPage}}" id="searchstax-pagination-next" tabindex="0">Next ></a>
           </div>
         </div>
       {{/results.length}}
@@ -444,11 +440,11 @@ example of pagination widget initialization with various options
       {{#results.length}}
         <div class="searchstax-pagination-container">
           <div class="searchstax-pagination-content">
-            <a class="searchstax-pagination-previous {{#isFirstPage}}disabled{{/isFirstPage}}" id="searchstax-pagination-previous">< Previous</a>
+            <a class="searchstax-pagination-previous {{#isFirstPage}}disabled{{/isFirstPage}}" id="searchstax-pagination-previous" tabindex="0">< Previous</a>
             <div class="searchstax-pagination-details">
               {{startResultIndex}} - {{endResultIndex}} of {{totalResults}}
             </div>
-              <a class="searchstax-pagination-next {{#isLastPage}}disabled{{/isLastPage}}" id="searchstax-pagination-next">Next ></a>
+              <a class="searchstax-pagination-next {{#isLastPage}}disabled{{/isLastPage}}" id="searchstax-pagination-next" tabindex="0">Next ></a>
           </div>
         </div>
       {{/results.length}}
@@ -516,10 +512,10 @@ example of facets widget initialization with various options
             template: `
       <div class="searchstax-facet-show-more-container">
       {{#showingAllFacets}}
-        <div class="searchstax-facet-show-less-button searchstax-facet-show-button">less</div>
+        <div class="searchstax-facet-show-less-button searchstax-facet-show-button" tabindex="0">less</div>
       {{/showingAllFacets}}
       {{^showingAllFacets}}
-        <div class="searchstax-facet-show-more-button  searchstax-facet-show-button">more {{onShowMoreLessClick}}</div>
+        <div class="searchstax-facet-show-more-button  searchstax-facet-show-button" tabindex="0">more {{onShowMoreLessClick}}</div>
       {{/showingAllFacets}}
     </div>
       `,
@@ -553,7 +549,7 @@ example of facets widget initialization with various options
         facetItemTemplate: {
             template: `
       <div class="searchstax-facet-input">
-        <input type="checkbox" class="searchstax-facet-input-checkbox" {{#disabled}}disabled{{/disabled}} {{#isChecked}}checked{{/isChecked}}/>
+        <input type="checkbox" class="searchstax-facet-input-checkbox" {{#disabled}}disabled{{/disabled}} {{#isChecked}}checked{{/isChecked}} aria-label="{{value}} {{count}}" tabindex="0"/>
       </div>
       <div class="searchstax-facet-value-label">{{value}}</div>
       <div class="searchstax-facet-value-count">({{count}})</div>
@@ -662,7 +658,7 @@ searchstax.addRelatedSearchesWidget("searchstax-related-searches-container", {
       },
       relatedSearch: {
           template: `
-        <span class="searchstax-related-search searchstax-related-search-item">
+        <span class="searchstax-related-search searchstax-related-search-item" tabindex="0">
             {{ related_search }}{{^last}}<span>,</span>{{/last}}
         </span>
         `,
@@ -751,7 +747,7 @@ searchstax.addSearchSortingWidget("search-sorting-container", {
       {{#searchExecuted}}
         {{#hasResultsOrExternalPromotions}}
         <div class="searchstax-sorting-container">
-            <label class="searchstax-sorting-label" for="sort-by">Sort By</label>
+            <label class="searchstax-sorting-label" for="searchstax-search-order-select">Sort By</label>
             <select id="searchstax-search-order-select" class="searchstax-search-order-select" >
             {{#sortOptions}}
                 <option value="{{key}}">