ACCESS: Add aria-sort attributes to search results table (#130)

partially addresses #130
dwhieb · Jul 15, 2024 · cc38b07 · cc38b07
1 parent 2832ad2
commit cc38b07
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 18 deletions.
diff --git a/pages/Search/Search.hbs b/pages/Search/Search.hbs
@@ -44,6 +44,8 @@
         {{> Search/components/pagination/pagination }}
       {{/if}}
 
+      {{log sort }}
+
       <div aria-labelledby=results-caption class='results-wrapper scroll-shadow' role=region tabindex=0>
         <table class=results>
           <caption class=visually-hidden id=results-caption><h2>Search Results</h2></caption>
@@ -53,20 +55,25 @@
               <th class='c partial-width-bb' colspan=5 scope=col>Sources<br><span class='help-text th-note'>(Original Orthographies)</span></th>{{!-- Token Fields --}}
             </tr>
             <tr>
+
               {{!-- Component Fields --}}
-              <th scope=col>Language</th>
-              <th scope=col>Form</th>
-              <th scope=col>UR</th>
-              <th scope=col>Proto-Algonquian</th>
-              <th scope=col>Definition</th>
-              <th scope=col>Type</th>
-              <th scope=col>Subcategory</th>
-              {{! -- Token Fields --}}
+              {{#with sort }}
+              <th {{#if language }}    aria-sort='{{ language }}'    {{/if}} scope=col>Language</th>
+              <th {{#if form }}        aria-sort='{{ form }}'        {{/if}} scope=col>Form</th>
+              <th {{#if UR }}          aria-sort='{{ UR }}'          {{/if}} scope=col>UR</th>
+              <th {{#if PA }}          aria-sort='{{ PA }}'          {{/if}} scope=col>Proto-Algonquian</th>
+              <th {{#if definition }}  aria-sort='{{ definition }}'  {{/if}} scope=col>Definition</th>
+              <th {{#if type }}        aria-sort='{{ type }}'        {{/if}} scope=col>Type</th>
+              <th {{#if subcategory }} aria-sort='{{ subcategory }}' {{/if}} scope=col>Subcategory</th>
+              {{/with}}
+
+              {{!-- Token Fields --}}
               <th scope=col>Forms</th>
               <th scope=col>URs</th>
               <th scope=col>Proto-Algonquian</th>
               <th scope=col>Glosses</th>
               <th scope=col>Bibliography</th>
+
             </tr>
           </thead>
           <tbody>

diff --git a/pages/Search/Search.js b/pages/Search/Search.js
@@ -33,6 +33,7 @@ export function Search(req, res) {
     limit = 100,
     offset = 0,
     q,
+    sort = ``,
   } = req.query
 
   // Search
@@ -43,28 +44,28 @@ export function Search(req, res) {
 
   // Sort
 
-  if (req.query.sort) {
-
-    const sortDirectives = req.query.sort
-    .split(`,`)
-    .map(directive => ({
-      ascending: !directive.startsWith(`-`),
-      field:     directive.replace(/^-/v, ``),
-    }))
+  sort = sort
+  .split(`,`)
+  .filter(Boolean)
+  .map(directive => ({
+    ascending: !directive.startsWith(`-`),
+    field:     directive.replace(/^-/v, ``),
+  }))
 
+  if (sort.length) {
     allResults.sort((a, b) => {
 
-      const comparisons = sortDirectives.map(({ ascending, field }) => {
+      const comparisons = sort.map(({ ascending, field }) => {
         const comparison = (a[field] || ``).localeCompare(b[field] || ``)
         return ascending ? comparison : comparison * -1
       })
 
       return comparisons.reduce((state, comparison) => state ? state : comparison, 0)
 
     })
-
   }
 
+
   // Pagination
 
   limit  = Number(limit)
@@ -140,6 +141,10 @@ export function Search(req, res) {
       startIndex: (offset + 1).toLocaleString(),
     },
     results,
+    sort: sort.reduce((hash, { ascending, field }) => {
+      hash[field] = ascending ? `ascending` : `descending`
+      return hash
+    }, {}),
     totalResults: allResults.length.toLocaleString(),
   })
 

diff --git a/pages/Search/Search.test.js b/pages/Search/Search.test.js
@@ -154,6 +154,9 @@ describe(`Search`, function() {
     it(`single-column sort`, function() {
 
       cy.visit(`/search?sort=-form&q=`)
+
+      cy.contains(`th`, `Form`).first().should(`have.attr`, `aria-sort`)
+
       cy.get(`.results td`).first().should(`have.text`, `Arapaho`)
       .next()
       .should(`have.text`, `θooxoneeʔ-`)