Componentes accesibles: Paginación

Hoy vamos a ver cómo crear una paginación de cero y hacerla accesible y reutilizable. Espero que les sirva y me dejen sus comentarios al final del post!

Github: https://github.com/micaavigliano/accessible-pagination
Proyecto: https://accessible-pagination.vercel.app/

Custom hook to fetch data

const useFetch = <T,>(url: string, currentPage: number = 0, pageSize: number = 20) => {
  const [data, setData] = useState<T | null>(null);
  const [loading, setLoading] = useState<boolean>(true);
  const [error, setError] = useState<boolean>(false);

  useEffect(() => {
    const fetchData = async() => {
      setLoading(true);
      setError(false);

      try {
        const response = await fetch(url);
        if (!response.ok) {
          throw new Error('network response failed')
        }
        const result: T = await response.json() as T;
        setData(result)
      } catch (error) {
        setError(true)
      } finally {
        setLoading(false);
      }
    };

    fetchData()
  }, [url, currentPage, pageSize]);

  return {
    data,
    loading,
    error,
  }
};

1. Vamos a generar un custom hook con un generic type. Esto nos va a permitir especificar el tipo de dato esperado cuando se usa este hook
2. Vamos a esperar 3 parámetros. Uno para url de donde vamos a fetchear la data, currentPage que es la página donde estamos y por default es 0 y pageSize que es el número de items que vamos a tener por página y por default es 20 (pueden cambiarle este valor).
3. En nuestro estado const [data, setData] = useState<T | null>(null); le pasamos el generic type T ya que a medida que lo usemos para diferentes peticiones de data vamos a esperar diferentes tipos de datos.

Paginación

Para que una paginación sea accesible debemos tener en cuenta los siguientes puntos:

• El foco debe moverse por todos los elementos interactivos de la páginación y tener un indicador visible
• para asegurar una buena interacción con los lectores de pantalla debemos utilizar correctamente las regiones, propiedades y estados de manera correcta
• La páginación debe estar agrupada dentro de un tag y contener un aria-label que la identifique como una paginación per se.
• Cada item dentro de la paginación debe contener un aria-setsize y un aria-pointset. Ahora, ¿para qué sirven? Bueno, aria-setsize sirve para calcular el total de items dentro de la lista de la paginación. El lector de pantalla lo anunciará de la siguiente manera:

aria-pointset sirve para calcular la posición del item dentro de la totalidad de items en la páginación. El lector de pantalla lo anunciará de la siguiente manera:

• Cada item debe tener un aria-label para poder identificar a qué página vamos a ir si presionamos sobre ese botón.
• Tener botones para ir al siguiente/previo elemento y cada uno de estos botones debe tener su aria-label correspondiente
• Si nuestra paginación contiene una ellipsis, la misma debe tener correctamente marcada con un aria-label
• Cada vez que vamos a una nueva página, el screen reader debe anunciar en qué página estamos y cuántos items nuevos hay de la siguiente manera.

Para poder llegar a esto vamos a codearlo de la siguiente manera:

const [statusMessage, setStatusMessage] = useState<string>("");

useEffect(() => {
    window.scrollTo({ top: 0, behavior: 'smooth' });
    if (!loading) {
      setStatusMessage(`Page ${currentPage} loaded. Displaying ${data?.near_earth_objects.length || 0} items.`);
    }
  }, [currentPage, loading]);

Cuando la página deje de cargar, vamos a setear un nuevo mensaje con nuestra currentPage y la longitud del nuevo array que estamos cargando.

Ahora sí! Pasemos a ver cómo esta estructurado el código en el archivo pagination.tsx

El componente va a requerir de cinco props

interface PaginationProps {
  currentPage: number;
  totalPages: number;
  nextPage: () => void;
  prevPage: () => void;
  goToPage: (page: number) => void;
}

• currentPage se va a referir a la página actual. Esta misma la vamos a manejar con estamos en el componente donde deseemos utilizar la paginación de la siguiente manera: const [currentPage, setCurrentPage] = useState<number>(1);
• totalPages se refiere al total de items a mostrar que contiene la API
• nextPage esta función nos permitirá ir a la siguiente página y actualizar nuestro estado currentPage de la siguiente manera:

const handlePageChange = (newPage: number) => {
    setCurrentPage(newPage); 
  };

  const nextPage = () => {
    if (currentPage < totalPages) {
      handlePageChange(currentPage + 1);
    }
  };

• prevPage esta función nos permitirá ir a la página previa a nuestra página actual y actualizar nuestro estado currentPage

const prevPage = () => {
    if (currentPage > 1) {
      handlePageChange(currentPage - 1);
    }
  };

• goToPage esta función va a necesitar un parámetro numérico y es la función que cada item va a tener para poder ir a la página deseada. Vamos a hacerla funcionar de la siguiente manera:

const handlePageChange = (newPage: number) => {
    setCurrentPage(newPage); 
};

Para que nuestra paginación cobre vida nos falta un paso más, ¡crear el array que vamos a iterar en nuestra lista! Para eso debemos seguir los siguientes pasos:

1. Crear una función, en este caso la llamaré getPageNumbers
2. Crear variables para el primer y el último item del listado.
3. Crea una variable para la elipsis del lado izquierdo. Por decisión propia, mi elipsis se va a ubicar luego del cuarto elemento de la lista.
4. Crear una variable para la elipsis del lado derecho. Por decisión propia, mi elipsis se va a ubicar previo a tres items en la lista.
5. Crear una función que nos devuelva un array donde estén centrados siempre 5 items, la página actual, dos items previos y dos items subsiguientes. En caso de necesitamos, vamos a excluir a la primera y última página const pagesAroundCurrent = [currentPage - 2, currentPage - 1, currentPage, currentPage + 1, currentPage + 2].filter(page => page > firstPage && page < lastPage);
6. Para nuestra última variable, vamos a crear un array que contenga todas las variables previamente creadas.
7. Por último, vamos a filtrar los elementos null y devolver el array.

Este array es el que vamos a recorrer para obtener el listado de items en nuestra paginación de la siguiente manera:

<ol className='flex gap-3'>
          {pageNumbers.map((number) => {
            if (number === 'left-ellipsis' || number === 'right-ellipsis') {
              return (
                <span key={number} className='relative top-5' aria-label='ellipsis'>
                  ...
                </span>
              );
            }
            return (
              <li aria-setsize={totalPages} aria-posinset={typeof number === 'number' ? number : undefined} key={`page-${number}`}>
                <button
                  onClick={() => goToPage(Number(number))}
                  className={currentPage === Number(number) ? 'underline underline-offset-3 border-zinc-300' : ''}
                  aria-label={`go to page ${number}`}
                  aria-current={currentPage === Number(number) && 'page'}
                >
                  {number}
                </button>
              </li>
            );
          })}
        </ol>

Y hasta acá cómo realizar una paginación reutilizable y accesible! Personalmente, aprendí a realizar una páginación de cero a los golpes porque tuve que implementarla en un live coding, espero que mi experiencia le sea de ayuda para su carrera y puedan implementar y ¡hasta mejorarla!

Saludos,
Mica<3