Accessible Components: Pagination

Today we are going to see how to create a pagination from scratch and make it accessible and reusable. I hope it helps you and leave me your comments at the end of the post!

Github: https://github.com/micaavigliano/accessible-pagination
Project: 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. We are going to generate a custom hook with a generic type. This will allow us to specify the type of data expected when using this hook
2. Let's wait for 3 parameters. One for url where we are going to fetch the data, currentPage which is the page where we are and by default it is 0 and pageSize which is the number of items that We are going to have it per page and by default it is 20 (you can change this value).
3. In our state const [data, setData] = useState(null); We pass it the generic type T since as we use it for different data requests we will expect different types of data.

Pagination

For a page to be accessible we must take into account the following points:

• The focus must move through all the interactive elements of the page and have a visible indicator
• to ensure good interaction with screen readers we must use regions, properties and states correctly
• The page must be grouped within a tag and contain an aria-label that identifies it as a page per se.
• Each item within the pagination must contain an aria-setsize and an aria-pointset. Now, what are they for? Well, aria-setsize is used to calculate the total number of items within the pagination list. The screen reader will announce it as follows:

aria-pointset is used to calculate the position of the item within all the items on the page. The screen reader will announce it as follows:

• Each item must have an aria-label to be able to identify which page we are going to go to if we click on that button.
• Have buttons to go to the next/previous element and each of these buttons must have its corresponding aria-label
• If our pagination contains an ellipsis, it must be correctly marked with an aria-label
• Every time we go to a new page, the screen reader must announce which page we are on and how many new items there are as follows.

In order to get to this we are going to code it as follows:

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,
  }
};

When the page stops loading, we will set a new message with our currentPage and the length of the new array we are loading.

Now yes! Let's see how the code is structured in the file pagination.tsx

The component will require five props

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]);

• currentPage will refer to the current page. We are going to handle this by being in the component where we want to use pagination as follows: const [currentPage, setCurrentPage] = useState(1);
• totalPages refers to the total number of items to be displayed that the API
contains.
• nextPage this function will allow us to go to the next page and update our currentPage state as follows:

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

• prevPage this function will allow us to go to the page previous to our current page and update our currentPage state

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

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

• goToPage this function will need a numerical parameter and it is the function that each item will have to be able to go to the desired page. Let's make it work as follows:

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

For our pagination to come to life we ​​need one more step, creating the array that we are going to iterate in our list! For that we must follow the following steps:

1. Create a function, in this case I will call it getPageNumbers
2. Create variables for the first and last item in the list.
3. Create a variable for the ellipsis on the left side. By my own decision, my ellipsis is going to be located after the fourth element of the list.
4. Create a variable for the ellipsis on the right side. By my own decision, my ellipsis will be placed before three items in the list.
5. Create a function that returns an array where 5 items are always centered, the current page, two previous items and two subsequent items. If we need, we will exclude the first and last page const pagesAroundCurrent = [currentPage - 2, currentPage - 1, currentPage, currentPage 1, currentPage 2].filter(page => page > firstPage && page < lastPage);
6. For our last variable, we are going to create an array that contains all the previously created variables.
7. Finally, we are going to filter out the null elements and return the array.

This array is the one we are going to go through to obtain the list of items in our page as follows:

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,
  }
};

And here's how to make a reusable and accessible pagination! Personally, I learned how to create a page from scratch because I had to implement it in live coding. I hope that my experience will be helpful for your career and that you can implement and even improve it!

Greetings,
Mica<3

The above is the detailed content of Accessible Components: Pagination. For more information, please follow other related articles on the PHP Chinese website!