Begin of the insertionFIx a number of additional accessibility issues and inconsistencies between the `PaginationHelper` (Rails) and `TablePaginationComponent` (ng) implementations.

\----

End of the insertion Similarities and differences in implementations:

## Pagination Items (`<ul>` in `nav.op-pagination--pages`)

Begin of the insertion<figure class="table op-uc-figure_align-center op-uc-figure"><table class="op-uc-table"><thead class="op-uc-table--head"><tr class="op-uc-table--row"><th class="op-uc-table--cell op-uc-table--cell_head"><p class="op-uc-p">Aspect</p></th><th class="op-uc-table--cell op-uc-table--cell_head"><p class="op-uc-p">ng</p></th><th class="op-uc-table--cell op-uc-table--cell_head"><p class="op-uc-p">Rails</p></th></tr></thead><tbody><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><strong>Previous/Next</strong></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">&lt;button&gt;</code> elements</p></td><td class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">&lt;a&gt;</code>End of the insertion Begin of the deletion | Aspect | ng | Rails |
| ----------------- | --------------------------------------------------------------------- | -------------------------------------------------------------------------- |
| **Previous/Next** | `<button>` elements | `<a>`End of the deletion links with Begin of the insertion<code class="op-uc-code">href</code></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><strong>Page numbers</strong></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">&lt;button&gt;</code>End of the insertion Begin of the deletion `href` |
| **Page numbers** | `<button>`End of the deletion or Begin of the insertion<code class="op-uc-code">&lt;em&gt;</code></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">&lt;a&gt;</code>End of the insertion Begin of the deletion `<em>` | `<a>`End of the deletion or Begin of the insertion<code class="op-uc-code">&lt;em&gt;</code></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><strong>Range display</strong></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">&lt;li class="op-pagination--range"&gt;&lt;span&gt;(121End of the insertion Begin of the deletion `<em>` |
| **Range display** | `<li class="op-pagination--range"><span>(121End of the deletion - Begin of the insertion140/5519)&lt;/span&gt;&lt;/li&gt;</code></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">&lt;li class="op-pagination--range"&gt;(21End of the insertion Begin of the deletion 140/5519)</span></li>` | `<li class="op-pagination--range">(21End of the deletion - Begin of the insertion40/50)&lt;/li&gt;</code>End of the insertion Begin of the deletion 40/50)</li>`End of the deletion — no Begin of the insertion<code class="op-uc-code">&lt;span&gt;</code> wrapper</p></td></tr></tbody></table></figure>End of the insertion Begin of the deletion `<span>` wrapper |End of the deletion

## Items per page (`div.op-pagination--options`)

Begin of the insertion<figure class="table op-uc-figure_align-center op-uc-figure"><table class="op-uc-table"><thead class="op-uc-table--head"><tr class="op-uc-table--row"><th class="op-uc-table--cell op-uc-table--cell_head"><p class="op-uc-p">Aspect</p></th><th class="op-uc-table--cell op-uc-table--cell_head"><p class="op-uc-p">ng</p></th><th class="op-uc-table--cell op-uc-table--cell_head"><p class="op-uc-p">Rails</p></th></tr></thead><tbody><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><strong>Container</strong></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">&lt;ul&gt;</code>End of the insertion Begin of the deletion | Aspect | ng | Rails |
| ----------------- | ------------------------------------------------------------------------ | ------------------------------------------------------------------- |
| **Container** | `<ul>`End of the deletion with Begin of the insertion<code class="op-uc-code">role="presentation"</code></p></td><td class="op-uc-table--cell"><p class="op-uc-p">Same</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><strong>Label</strong></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">&lt;liEnd of the insertion Begin of the deletion `role="presentation"` | Same |
| **Label** | `<liEnd of the deletion class="op-pagination--label" aria-label="Per Begin of the insertionpage:"&gt;Per page:&lt;/li&gt;</code></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">&lt;li class="op-pagination--label"&gt;Per page:&lt;/li&gt;</code>End of the insertion Begin of the deletion page:">Per page:</li>` | `<li class="op-pagination--label">Per page:</li>`End of the deletion (no Begin of the insertion<code class="op-uc-code">aria-label</code>)</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><strong>Selected item</strong></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">&lt;li&gt;</code>End of the insertion Begin of the deletion `aria-label`) |
| **Selected item** | `<li>`End of the deletion with Begin of the insertion<code class="op-uc-code">&lt;span&gt;</code></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">&lt;li&gt;</code>End of the insertion Begin of the deletion `<span>` | `<li>`End of the deletion with Begin of the insertion<code class="op-uc-code">&lt;span&gt;</code>End of the insertion Begin of the deletion `<span>`End of the deletion — Begin of the insertionsame</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><strong>Other options</strong></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">&lt;button&gt;</code></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">&lt;a&gt;</code>End of the insertion Begin of the deletion same |
| **Other options** | `<button>` | `<a>`End of the deletion with Begin of the insertion<code class="op-uc-code">href</code>End of the insertion Begin of the deletion `href`End of the deletion and Begin of the insertion<code class="op-uc-code">target="_top"</code></p></td></tr></tbody></table></figure>End of the insertion Begin of the deletion `target="_top"` |End of the deletion

## Attributes

Begin of the insertion<figure class="table op-uc-figure_align-center op-uc-figure"><table class="op-uc-table"><thead class="op-uc-table--head"><tr class="op-uc-table--row"><th class="op-uc-table--cell op-uc-table--cell_head"><p class="op-uc-p">Element</p></th><th class="op-uc-table--cell op-uc-table--cell_head"><p class="op-uc-p">ng</p></th><th class="op-uc-table--cell op-uc-table--cell_head"><p class="op-uc-p">Rails</p></th></tr></thead><tbody><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><strong>Navigation links</strong></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">type="button"</code>, <code class="op-uc-code">rel="prev/next"</code>, <code class="op-uc-code">aria-label</code>End of the insertion Begin of the deletion | Element | ng | Rails |
| -------------------- | -------------------------------------------------------------- | ----------------------------------------------------------------------- |
| **Navigation links** | `type="button"`, `rel="prev/next"`, `aria-label`End of the deletion on Begin of the insertion<code class="op-uc-code">&lt;button&gt;</code></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">href</code>End of the insertion Begin of the deletion `<button>` | `href`End of the deletion attribute present, Begin of the insertion<code class="op-uc-code">data-turbo-stream="true"</code>, <code class="op-uc-code">rel="prev/next"</code></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><strong>Icons (</strong><code class="op-uc-code"><strong>&lt;svg&gt;</strong></code><strong>)</strong></p></td><td class="op-uc-table--cell"><p class="op-uc-p">Uses <code class="op-uc-code">&lt;svg&gt;</code>End of the insertion Begin of the deletion `data-turbo-stream="true"`, `rel="prev/next"` |
| **Icons (`<svg>`)** | Uses `<svg>`End of the deletion inside Begin of the insertion<code class="op-uc-code">&lt;button&gt;</code></p></td><td class="op-uc-table--cell"><p class="op-uc-p">Uses <code class="op-uc-code">&lt;svg&gt;</code>End of the insertion Begin of the deletion `<button>` | Uses `<svg>`End of the deletion inside Begin of the insertion<code class="op-uc-code">&lt;a&gt;</code></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><strong>Range</strong></p></td><td class="op-uc-table--cell"><p class="op-uc-p">Uses <code class="op-uc-code">&amp;nbsp;</code>End of the insertion Begin of the deletion `<a>` |
| **Range** | Uses `&nbsp;`End of the deletion for Begin of the insertionspacing</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Plain text</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><strong>PerEnd of the insertion Begin of the deletion spacing | Plain text |
| **PerEnd of the deletion page Begin of the insertionlinks</strong></p></td><td class="op-uc-table--cell"><p class="op-uc-p">Uses <code class="op-uc-code">&lt;button&gt;</code></p></td><td class="op-uc-table--cell"><p class="op-uc-p">Uses <code class="op-uc-code">&lt;a href="..."&gt;</code>End of the insertion Begin of the deletion links** | Uses `<button>` | Uses `<a href="...">`End of the deletion with Begin of the insertion<code class="op-uc-code">target="_top"</code></p></td></tr></tbody></table></figure>End of the insertion Begin of the deletion `target="_top"` |

End of the deletion