refactor(v2): update HTML markup of pagination for better 11y (#2495)

This commit is contained in:
Alexey Pyltsyn 2020-04-02 05:43:34 +03:00 committed by GitHub
parent 686c8ae27d
commit d1326cdee8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 12 additions and 12 deletions

View file

@ -16,20 +16,20 @@ function BlogPostPaginator(props) {
<div className="pagination-nav__item"> <div className="pagination-nav__item">
{prevItem && ( {prevItem && (
<Link className="pagination-nav__link" to={prevItem.permalink}> <Link className="pagination-nav__link" to={prevItem.permalink}>
<h5 className="pagination-nav__link--sublabel">Previous Post</h5> <div className="pagination-nav__link--sublabel">Previous Post</div>
<h4 className="pagination-nav__link--label"> <div className="pagination-nav__link--label">
&laquo; {prevItem.title} &laquo; {prevItem.title}
</h4> </div>
</Link> </Link>
)} )}
</div> </div>
<div className="pagination-nav__item pagination-nav__item--next"> <div className="pagination-nav__item pagination-nav__item--next">
{nextItem && ( {nextItem && (
<Link className="pagination-nav__link" to={nextItem.permalink}> <Link className="pagination-nav__link" to={nextItem.permalink}>
<h5 className="pagination-nav__link--sublabel">Next Post</h5> <div className="pagination-nav__link--sublabel">Next Post</div>
<h4 className="pagination-nav__link--label"> <div className="pagination-nav__link--label">
{nextItem.title} &raquo; {nextItem.title} &raquo;
</h4> </div>
</Link> </Link>
)} )}
</div> </div>

View file

@ -18,20 +18,20 @@ function DocPaginator(props) {
<Link <Link
className="pagination-nav__link" className="pagination-nav__link"
to={metadata.previous.permalink}> to={metadata.previous.permalink}>
<h5 className="pagination-nav__link--sublabel">Previous</h5> <div className="pagination-nav__link--sublabel">Previous</div>
<h4 className="pagination-nav__link--label"> <div className="pagination-nav__link--label">
&laquo; {metadata.previous.title} &laquo; {metadata.previous.title}
</h4> </div>
</Link> </Link>
)} )}
</div> </div>
<div className="pagination-nav__item pagination-nav__item--next"> <div className="pagination-nav__item pagination-nav__item--next">
{metadata.next && ( {metadata.next && (
<Link className="pagination-nav__link" to={metadata.next.permalink}> <Link className="pagination-nav__link" to={metadata.next.permalink}>
<h5 className="pagination-nav__link--sublabel">Next</h5> <div className="pagination-nav__link--sublabel">Next</div>
<h4 className="pagination-nav__link--label"> <div className="pagination-nav__link--label">
{metadata.next.title} &raquo; {metadata.next.title} &raquo;
</h4> </div>
</Link> </Link>
)} )}
</div> </div>