Convert list elements to button elements for stats tabs in order to e…

…nable keyboard navigation (#2526)
plausible · Jan 5, 2023 · f949278 · f949278
1 parent 89da676
commit f949278
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 18 deletions.
diff --git a/assets/js/dashboard/stats/devices/index.js b/assets/js/dashboard/stats/devices/index.js
@@ -160,21 +160,21 @@ export default class Devices extends React.Component {
 
     if (isActive) {
       return (
-        <li
+        <button
           className="inline-block h-5 font-bold text-indigo-700 active-prop-heading dark:text-indigo-500"
         >
           {name}
-        </li>
+        </button>
       )
     }
 
     return (
-      <li
+      <button
         className="cursor-pointer hover:text-indigo-600"
         onClick={this.setMode(mode)}
       >
         {name}
-      </li>
+      </button>
     )
   }
 
@@ -188,11 +188,11 @@ export default class Devices extends React.Component {
         >
           <div className="flex justify-between w-full">
             <h3 className="font-bold dark:text-gray-100">Devices</h3>
-            <ul className="flex text-xs font-medium text-gray-500 dark:text-gray-400 space-x-2">
+            <div className="flex text-xs font-medium text-gray-500 dark:text-gray-400 space-x-2">
               { this.renderPill('Size', 'size') }
               { this.renderPill('Browser', 'browser') }
               { this.renderPill('OS', 'os') }
-            </ul>
+            </div>
           </div>
           { this.renderContent() }
         </div>

diff --git a/assets/js/dashboard/stats/locations/index.js b/assets/js/dashboard/stats/locations/index.js
@@ -147,21 +147,21 @@ export default class Locations extends React.Component {
 
     if (isActive) {
       return (
-        <li
+        <button
           className="inline-block h-5 text-indigo-700 dark:text-indigo-500 font-bold active-prop-heading"
         >
           {name}
-        </li>
+        </button>
       )
     }
 
     return (
-      <li
+      <button
         className="hover:text-indigo-600 cursor-pointer"
         onClick={this.setMode(mode)}
       >
         {name}
-      </li>
+      </button>
     )
   }
 
@@ -177,12 +177,12 @@ export default class Locations extends React.Component {
             <h3 className="font-bold dark:text-gray-100">
               {labelFor[this.state.mode] || 'Locations'}
             </h3>
-            <ul className="flex font-medium text-xs text-gray-500 dark:text-gray-400 space-x-2">
+            <div className="flex font-medium text-xs text-gray-500 dark:text-gray-400 space-x-2">
               { this.renderPill('Map', 'map') }
               { this.renderPill('Countries', 'countries') }
               { this.renderPill('Regions', 'regions') }
               { this.renderPill('Cities', 'cities') }
-            </ul>
+            </div>
           </div>
           { this.renderContent() }
         </div>

diff --git a/assets/js/dashboard/stats/pages/index.js b/assets/js/dashboard/stats/pages/index.js
@@ -116,21 +116,21 @@ export default class Pages extends React.Component {
 
     if (isActive) {
       return (
-        <li
+        <button
           className="inline-block h-5 text-indigo-700 dark:text-indigo-500 font-bold active-prop-heading"
         >
           {name}
-        </li>
+        </button>
       )
     }
 
     return (
-      <li
+      <button
         className="hover:text-indigo-600 cursor-pointer"
         onClick={this.setMode(mode)}
       >
         {name}
-      </li>
+      </button>
     )
   }
 
@@ -147,11 +147,11 @@ export default class Pages extends React.Component {
             <h3 className="font-bold dark:text-gray-100">
               {labelFor[this.state.mode] || 'Page Visits'}
             </h3>
-            <ul className="flex font-medium text-xs text-gray-500 dark:text-gray-400 space-x-2">
+            <div className="flex font-medium text-xs text-gray-500 dark:text-gray-400 space-x-2">
               { this.renderPill('Top Pages', 'pages') }
               { this.renderPill('Entry Pages', 'entry-pages') }
               { this.renderPill('Exit Pages', 'exit-pages') }
-            </ul>
+            </div>
           </div>
           {/* Main Contents */}
           { this.renderContent() }