@searchstax-inc/searchstudio-ux-js 0.6.5 → 0.6.39

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" role="button"></button>
             </div>
         </div>
         `,
@@ -225,7 +225,7 @@ example of result widget initialization with various options
       mainTemplate: {
       template: `
             <div class="searchstax-search-results-container">
-                <div class="searchstax-search-results" id="searchstax-search-results"></div>
+                <div class="searchstax-search-results" id="searchstax-search-results" aria-live="polite"></div>
             </div>
             `,
         searchResultsContainerId: "searchstax-search-results",
@@ -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}}
             `
       }
@@ -318,7 +316,7 @@ example of result widget initialization with infinite scroll enabled. This will
       mainTemplate: {
       template: `
             <div class="searchstax-search-results-container">
-                <div class="searchstax-search-results" id="searchstax-search-results"></div>
+                <div class="searchstax-search-results" id="searchstax-search-results" aria-live="polite"></div>
             </div>
             `,
         searchResultsContainerId: "searchstax-search-results",
@@ -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>
       `,
@@ -534,7 +530,7 @@ example of facets widget initialization with various options
             </div>
             <div class="searchstax-facet-title-arrow active"></div>
         </div>
-        <div class="searchstax-facet-values-container"></div>
+        <div class="searchstax-facet-values-container" aria-live="polite"></div>
       </div>
       `,
             facetListTitleContainerClass: `searchstax-facet-title-container`,
@@ -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>
@@ -604,7 +600,7 @@ searchstax.addSearchFeedbackWidget("search-feedback-container", {
       main: {
           template: `
         {{#searchExecuted}}
-            <div class="searchstax-feedback-container">
+            <h4 class="searchstax-feedback-container">
               {{#hasResults}}
                   Showing <b>{{startResultIndex}} - {{endResultIndex}}</b> of <b>{{totalResults}}</b> results {{#searchTerm}} for "<b>{{searchTerm}}</b>" {{/searchTerm}}
                   <div class="searchstax-feedback-container-suggested">
@@ -613,7 +609,7 @@ searchstax.addSearchFeedbackWidget("search-feedback-container", {
                     {{/autoCorrectedQuery}}
                   </div>
                 {{/hasResults}}
-            </div>
+            </h4>
         {{/searchExecuted}}
         `,
           originalQueryClass: `searchstax-feedback-original-query`
@@ -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}}">