Rows per page in the default pagination component does not have a label

[markhowardt4]

Issue Check list

• [x] Agree to the Code of Conduct
• [x] Read the README
• [x] You are using React 16.8.0+
• [x] You installed styled-components
• [x] Include relevant code or preferably a code sandbox

Describe the bug

When pagination is enabled and the default component is used accessibility tools complain that the page drop down does not have a label

axe-core returns the following:

To solve this violation, you need to:
Fix at least one (1) of these issues:
    aria-label attribute does not exist or is empty
    aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
    Form element does not have an implicit (wrapped) <label>
    Form element does not have an explicit <label>
    Element has no title attribute or the title attribute is empty

To Reproduce

Steps to reproduce the behavior:

1. Enable pagination and have more than 10 items, (https://jbetancur.github.io/react-data-table-component/?path=/story/pagination--basic)
2. Use the axe-core browser plugin for firefox
3. Analyze the page
4. Notice the above error regarding the lack of a label on the form element

Expected behavior

Every form element should have a label or aria-label

Code Sandbox, Screenshots, or Relevant Code

Instead of RowLabel being a span tag here: https://github.com/jbetancur/react-data-table-component/blob/b9e6b888beb5c49b7655f7c6e637fb3ea858a327/src/DataTable/Pagination.js#L130 if it could be refactored to be a form label.

Versions (please complete the following information)

• React (RDT requires 16.8.0+) 16.13.1
• Styled Components 5.1.0
• OS: Linux
• Browser Firefox

Additional context

I can override the component, but the default component is perfect other than that one issue. If you are happy I can make the suggested change and open a PR?

[jbetancur]

Good catch! Go for it 😄