Fix links in pagination

mayu-live · Sep 29, 2022 · a67aa8d · a67aa8d
1 parent 9aceee1
commit a67aa8d
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 14 deletions.
diff --git a/example/app/pages/pokemon/Pagination.css b/example/app/pages/pokemon/Pagination.css
@@ -50,20 +50,20 @@
   text-align: center;
 }
 
-.page[href]:link,
-.page[href]:visited {
+.page:link,
+.page:visited {
   text-decoration: none;
   color: var(--blue);
 }
 
-.page[href]:active,
-.page[href]:hover {
+.page:active,
+.page:hover {
   color: var(--blue);
   font-weight: bold;
   text-decoration: underline;
 }
 
-.page:not([href]) {
+.page[aria-current="page"] {
   background: var(--blue);
   color: var(--bright);
   font-weight: bold;

diff --git a/example/app/pages/pokemon/Pagination.rux b/example/app/pages/pokemon/Pagination.rux
@@ -27,8 +27,7 @@ def render
 
     <div class={styles[:wrap]}>
       <nav class={styles.buttons} aria-label="pagination">
-        {prev_page_link && <link rel="prev" href={prev_page_link} />}
-        <a href={prev_page_link} class={styles.button}>
+        <a href={prev_page_link} class={styles.button} rel="prev">
           Previous page
         </a>
 
@@ -37,17 +36,16 @@ def render
             current_page: page,
             total_pages: props[:total_pages].succ,
             window_size: props[:window_size] || 7,
-          ).map do |p|
-            href = p == page ? nil : "?page=#{p}"
-
-            <li key={p}>
-              <a class={styles[:page]} href={href}>{p}</a>
+          ).map do |num|
+            <li key={num}>
+              <a class={styles[:page]} href={"?page=#{num}"} aria-current={page == num && "page"}>
+                {num}
+              </a>
             </li>
           end}
         </ul>
 
-        {next_page_link && <link rel="next" href={next_page_link} />}
-        <a href={next_page_link} class={styles.button}>
+        <a href={next_page_link} class={styles.button} rel="next">
           Next page
         </a>
       </nav>