Pagination component

[buddy-harlow]

Location: https://www.bixal.com/blog

• When listening to the pagination component with a screen reader, there is redundant link text being announced. (See NVDA Speech viewer screen shot as follows)
• I expect the pagination page links to announce as "Page 1 link" "Page 2 link"

Suggestion

I recommend we adopt USWDS Pagination component's visual styling and code as it is more intuitive.

[buddy-harlow]

@mpbixal Do you think the closing of #268 will also fix this issue?

[mattsqd]

@mpbixal Do you think the closing of #268 will also fix this issue?

I don't think so, #268 just included the CSS, it did not change the dom. For example here is the USWDS paging component:

and here is ours:

Our classes our the same, the difference is that USWDS uses aria-label and we use title. And the values for those are different.
So I assume, we need to use aria-label and switch to just Page 1. Also, check the other title values, like 'current page' and 'next page'.

I'm not sure if the link in:

I expect the pagination page links to announce as "Page 1 link" "Page 2 link"

is actually in the aria-label as well, or if screen readers just announce the HREF value after they read the aria-label.

[mejiaj]

@buddy-harlow @mattsqd was the USWDS pagination package added? I'd prefer to grab components 1-by-1 to save on compiled CSS.

When we launched we only had USWDS Core (tokens, functions, mixins).

[mattsqd]

@mejiaj Yeah, I believe we turned just on that one component with this PR https://github.com/Bixal/bixal-site-drupal/pull/269/files.
Now we just need to tinker with the dom a little bit, I believe.