Accessible sort control. (#7254)

dart-lang · Dec 13, 2023 · 69b9af1 · 69b9af1
1 parent df074fb
commit 69b9af1
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 36 deletions.
diff --git a/app/lib/frontend/templates/views/shared/sort_control.dart b/app/lib/frontend/templates/views/shared/sort_control.dart
@@ -17,13 +17,16 @@ d.Node sortControlNode({
         attributes: {'title': selected.tooltip},
         children: [
           d.text('Sort by '),
-          d.span(classes: ['sort-control-selected'], text: selected.label),
+          d.button(
+            classes: ['sort-control-selected'],
+            text: selected.label,
+          ),
         ],
       ),
       d.div(
         classes: ['sort-control-popup'],
         children: options.map(
-          (o) => d.div(
+          (o) => d.button(
             classes: [
               'sort-control-option',
               if (o == selected) 'selected',

diff --git a/app/test/frontend/golden/pkg_index_page.html b/app/test/frontend/golden/pkg_index_page.html
@@ -396,16 +396,16 @@ <h3 class="search-form-section-header foldable-button">
             <div class="sort-control hoverable">
               <div class="info-identifier" title="Packages are sorted by the combination of the text match, their overall score and their specificity to the selected platform.">
                 Sort by
-                <span class="sort-control-selected">search relevance</span>
+                <button class="sort-control-selected">search relevance</button>
               </div>
               <div class="sort-control-popup">
-                <div class="sort-control-option selected" data-value="search_relevance">search relevance</div>
-                <div class="sort-control-option" data-value="top">overall score</div>
-                <div class="sort-control-option" data-value="updated">recently updated</div>
-                <div class="sort-control-option" data-value="created">newest package</div>
-                <div class="sort-control-option" data-value="like">most likes</div>
-                <div class="sort-control-option" data-value="points">most pub points</div>
-                <div class="sort-control-option" data-value="popularity">popularity</div>
+                <button class="sort-control-option selected" data-value="search_relevance">search relevance</button>
+                <button class="sort-control-option" data-value="top">overall score</button>
+                <button class="sort-control-option" data-value="updated">recently updated</button>
+                <button class="sort-control-option" data-value="created">newest package</button>
+                <button class="sort-control-option" data-value="like">most likes</button>
+                <button class="sort-control-option" data-value="points">most pub points</button>
+                <button class="sort-control-option" data-value="popularity">popularity</button>
               </div>
             </div>
           </div>

diff --git a/app/test/frontend/golden/publisher_packages_page.html b/app/test/frontend/golden/publisher_packages_page.html
@@ -167,16 +167,16 @@ <h1 class="title">example.com</h1>
                     <div class="sort-control hoverable">
                       <div class="info-identifier" title="Packages are sorted by the combination of their overall score and their specificity to the selected platform.">
                         Sort by
-                        <span class="sort-control-selected">listing relevance</span>
+                        <button class="sort-control-selected">listing relevance</button>
                       </div>
                       <div class="sort-control-popup">
-                        <div class="sort-control-option selected" data-value="listing_relevance">listing relevance</div>
-                        <div class="sort-control-option" data-value="top">overall score</div>
-                        <div class="sort-control-option" data-value="updated">recently updated</div>
-                        <div class="sort-control-option" data-value="created">newest package</div>
-                        <div class="sort-control-option" data-value="like">most likes</div>
-                        <div class="sort-control-option" data-value="points">most pub points</div>
-                        <div class="sort-control-option" data-value="popularity">popularity</div>
+                        <button class="sort-control-option selected" data-value="listing_relevance">listing relevance</button>
+                        <button class="sort-control-option" data-value="top">overall score</button>
+                        <button class="sort-control-option" data-value="updated">recently updated</button>
+                        <button class="sort-control-option" data-value="created">newest package</button>
+                        <button class="sort-control-option" data-value="like">most likes</button>
+                        <button class="sort-control-option" data-value="points">most pub points</button>
+                        <button class="sort-control-option" data-value="popularity">popularity</button>
                       </div>
                     </div>
                   </div>

diff --git a/app/test/frontend/golden/publisher_unlisted_packages_page.html b/app/test/frontend/golden/publisher_unlisted_packages_page.html
@@ -167,16 +167,16 @@ <h1 class="title">example.com</h1>
                     <div class="sort-control hoverable">
                       <div class="info-identifier" title="Packages are sorted by the combination of their overall score and their specificity to the selected platform.">
                         Sort by
-                        <span class="sort-control-selected">listing relevance</span>
+                        <button class="sort-control-selected">listing relevance</button>
                       </div>
                       <div class="sort-control-popup">
-                        <div class="sort-control-option selected" data-value="listing_relevance">listing relevance</div>
-                        <div class="sort-control-option" data-value="top">overall score</div>
-                        <div class="sort-control-option" data-value="updated">recently updated</div>
-                        <div class="sort-control-option" data-value="created">newest package</div>
-                        <div class="sort-control-option" data-value="like">most likes</div>
-                        <div class="sort-control-option" data-value="points">most pub points</div>
-                        <div class="sort-control-option" data-value="popularity">popularity</div>
+                        <button class="sort-control-option selected" data-value="listing_relevance">listing relevance</button>
+                        <button class="sort-control-option" data-value="top">overall score</button>
+                        <button class="sort-control-option" data-value="updated">recently updated</button>
+                        <button class="sort-control-option" data-value="created">newest package</button>
+                        <button class="sort-control-option" data-value="like">most likes</button>
+                        <button class="sort-control-option" data-value="points">most pub points</button>
+                        <button class="sort-control-option" data-value="popularity">popularity</button>
                       </div>
                     </div>
                   </div>

diff --git a/app/test/frontend/golden/search_page.html b/app/test/frontend/golden/search_page.html
@@ -397,16 +397,16 @@ <h3 class="search-form-section-header foldable-button">
             <div class="sort-control hoverable">
               <div class="info-identifier" title="Packages are sorted by the overall score.">
                 Sort by
-                <span class="sort-control-selected">overall score</span>
+                <button class="sort-control-selected">overall score</button>
               </div>
               <div class="sort-control-popup">
-                <div class="sort-control-option" data-value="search_relevance">search relevance</div>
-                <div class="sort-control-option selected" data-value="top">overall score</div>
-                <div class="sort-control-option" data-value="updated">recently updated</div>
-                <div class="sort-control-option" data-value="created">newest package</div>
-                <div class="sort-control-option" data-value="like">most likes</div>
-                <div class="sort-control-option" data-value="points">most pub points</div>
-                <div class="sort-control-option" data-value="popularity">popularity</div>
+                <button class="sort-control-option" data-value="search_relevance">search relevance</button>
+                <button class="sort-control-option selected" data-value="top">overall score</button>
+                <button class="sort-control-option" data-value="updated">recently updated</button>
+                <button class="sort-control-option" data-value="created">newest package</button>
+                <button class="sort-control-option" data-value="like">most likes</button>
+                <button class="sort-control-option" data-value="points">most pub points</button>
+                <button class="sort-control-option" data-value="popularity">popularity</button>
               </div>
             </div>
           </div>

diff --git a/pkg/web_css/lib/src/_list.scss b/pkg/web_css/lib/src/_list.scss
@@ -19,8 +19,15 @@
     white-space: nowrap;
 
     .sort-control-selected {
+      display: inline-block;
+      background: transparent;
       color: #1967d2;
+      font-size: 14px;
       font-weight: 400;
+      padding: 0;
+      text-align: left;
+      text-transform: uppercase;
+      white-space: nowrap;
 
       @media (max-width: $device-mobile-max-width) {
         display: none;
@@ -51,9 +58,12 @@
     z-index: $z-index-nav-mask;
 
     .sort-control-option {
+      display: block;
+      width: 100%;
       background: #ffffff;
       font-size: 14px;
-      padding: 8px 12px;
+      padding: 12px 12px;
+      text-align: left;
 
       &:hover {
         background: #fafafa;
@@ -65,7 +75,8 @@
     }
   }
 
-  &.hover {
+  &.hover,
+  &:focus-within {
     .sort-control-popup {
       display: block;
     }