fix(storefront)BCTHEME-224: change role for sort by select (#1837)

Co-authored-by: BC-tymurbiedukhin <[email protected]>
bigcommerce · Oct 2, 2020 · 9bd1431 · 9bd1431
1 parent c2bd63e
commit 9bd1431
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,7 @@
 # Changelog
 
 ## Draft
+- Fixed announcement of SortBy Select to listbox from button via screen reader. [#1837](https://github.com/bigcommerce/cornerstone/pull/1837)
 - Fixed missing top outline on chosen filter's focused. [#1829](https://github.com/bigcommerce/cornerstone/pull/1829)
 - Added immediate keyboard focus on write-a-review modal. [#1835](https://github.com/bigcommerce/cornerstone/pull/1835)
 - Fixed VoiceOver focus is not sync with keyboard focus on Faceted Search.[#1826](https://github.com/bigcommerce/cornerstone/pull/1826)

diff --git a/templates/components/amp/products/options/set-select.html b/templates/components/amp/products/options/set-select.html
@@ -7,7 +7,12 @@
         {{/if}}
     </label>
 
-    <select class="form-select form-select--small" name="attribute[{{this.id}}]" id="attribute_{{id}}" {{#if required}}required{{/if}}>
+    <select 
+        class="form-select form-select--small" 
+        name="attribute[{{this.id}}]" 
+        id="attribute_{{id}}"
+        role="listbox"
+        {{#if required}}required{{/if}}>
         <option value="">{{lang 'products.choose_options'}}</option>
         {{#each this.values}}
             <option data-product-attribute-value="{{id}}" value="{{id}}" {{#if selected}}selected{{/if}}>{{label}}</option>

diff --git a/templates/components/category/sort-box.html b/templates/components/category/sort-box.html
@@ -1,7 +1,7 @@
 <fieldset class="form-fieldset actionBar-section">
     <div class="form-field">
         <label class="form-label" for="sort">{{lang 'common.sorter.sort_by'}}</label>
-        <select class="form-select form-select--small" name="sort" id="sort">
+        <select class="form-select form-select--small " name="sort" id="sort" role="listbox">
             <option value="featured" {{#if sort '==' 'featured'}}selected{{/if}}>{{lang 'common.sorter.featured'}}</option>
             <option value="newest" {{#if sort '==' 'newest'}}selected{{/if}}>{{lang 'common.sorter.newest'}}</option>
             <option value="bestselling" {{#if sort '==' 'bestselling'}}selected{{/if}}>{{lang 'common.sorter.top_sellers'}}</option>