Accessibility problems in pager design

I'd like to expand the scope of this issue, to the accessibility of the pagination component as a whole. There are more problems here than text contrast.

The current design fails WCAG SC 1.4.1 "Use of Color". It's a level A success criterion, so I'm raising the issue priority to major.

1. The current page is indicated by colour differences alone.
2. Distinguishing links vs. non-links relies on colour as the sole signifier.

The pager's focus indicator fails WCAG SC 1.4.11 Non-text contrast (level AA). It needs a contrast of 3:1 but #53B0EB only provides a contrast of 2.39:1 against white.

The links are 52px square. This satisfies WCAG SC 2.5.5 Target Size (level AAA) - GOOD.

Question: can we remove the faded out non-functional buttons that indicate that we're the first item? They do not exist in Claro.

• They're not buttons; the pager is navigation, and uses links.
• They don't indicate that. The actual indicator that we're on the first page is the numeral 1 (or whichever; the first page is just one case). It also has visibly-hidden text which says "current page", for screen reader users. The visual design needs to indicate the number of the current page, using something other than a colour difference. (Claro's pager draws a circle around the current page number.)
• It isn't just Claro which omits them; no other core theme shows first/previous list items on the first page.

I'd get rid of them. They don't say anything essential. It could also make it easier to satisfy WCAG Use of Color because:

• There would no longer be a need to differentiate the linked next/last icons from non-linked first/previous icons.
• The current page would then also happen to be the only non-link item. So both of the use-of-color problems above could be solved together.

Added the problems from #2 to the issue summary. Left the proposed resolution open.

Pager desktop:

Pager mobile:

I also have changed focus border-color --color--blue-70 by --color--gray-10 to match WCAG contrast standards
Also ellipsis was added (it is actually default ellipsis of any full-pager in any drupal theme)

Also about that part of code:

--- a/css/src/layout/layout-content-narrow.css
+++ b/css/src/layout/layout-content-narrow.css
@@ -40,6 +40,10 @@
     .layout--content-medium &,
     .layout--pass--content-medium > * & {
       grid-column: 1 / 9;
+
+      &.pager {
+        grid-column: 1 / 11;
+      }

We need that grid-column for pagers, but idk if it is right way to fix grid for pager here.

We also can use --color--blue-20 for border on focus, it gives contrast 4.91:1 against white

I like the direction in comments #10-15. Nice work.

I also think that blue will be a better colour than black for the focus indicator; links have a blue focus indicator elsewhere.

For the arrow icons, I'd treat them as the same colour as the numbers. I don't see any benefit to using different colours for those; they are both links, and have the same behaviour.

Looks good to me @mherchel