Possible Pagination Example Improvement

[janxious]

There doesn't seem to be a way to submit changes or anything to the Pears example site. I was thinking something like this for pagination:

<nav role="page">
    <ul>
        <li class="page-prev"><a href="#">← Prev</a></li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li class="current">4</li>
        <li class="page-next"><a href="#">Next →</a></li>
    </ul>
</nav>

nav[role=page] ul {
    text-align: center;
    }
nav[role=page] li {
    display: inline;
    margin: 0 4px 0 0;
    }
nav[role=page] a {
    padding: 3px 8px;
    font-size: 14px;
    font-weight: bold;
    border: 1px solid #ddd;
  background: #fff;
    border-radius: 4px;
    }
nav[role=page] a:hover,
nav[role=page] a:focus {
    background: #f0f0f0;
    border-color: #ccc;
    }
nav[role=page] a:active {
    background: #fff;
    border-color: #ddd;
    }
nav[role=page] .current {
    font-weight: bold;
    padding: 3px 3px;
    }

[replete]

I think the idea is that we install this wordpress theme on our own server and start our own pattern library. Dan kindly shared it for this purpose.

Also, there isn't a one-true-way of doing markup, but sharing ideas and patterns is great.

By the way, I'm not sure that role=page is being used correctly. I would suggest role=navigation, which is an ARIA landmark.

[janxious]

:star2: The more you know!

Cargo culting the role thing got me in trouble. :)

Sounds like this is not the appropriate place to share patterns and such. I do feel like it would be cool to see a curated list like this, maybe with alternative implementations of the same thing.

Thanks for the feedback, @replete.