Accessibly indicate a current (active) link in Middleman
Switch branches/tags
Nothing to show
Clone or download
mike-burns A file extension must have word characters at the end
A file ending in a trailing period is unexpected and therefore not
something we should handle. We should truncate trailing extensions
otherwise.
Latest commit 878b372 Mar 17, 2017

README.md

middleman-aria_current

A Middleman extension for indicating a current (active) link using aria-current.

If you're new to aria-current, Léonie Watson wrote a wonderful article detailing its usage.

Installation

  1. Add middleman-aria_current to your Gemfile:

    gem "middleman-aria_current"
  2. Install the gem:

    bundle install
  3. Activate the extension in config.rb:

    activate :aria_current

Usage

middleman-aria_current provides a current_link_to helper, which wraps the built-in link_to helper. It checks the URL of the current visited page and outputs an aria-current attribute if it matches the URL in the link.

As an example, below is a typical website navigation where we use current_link_to for each link (using ERB):

<nav>
  <%= current_link_to "Home", "/" %>
  <%= current_link_to "About", "/about" %>
</nav>

Now, when you visit /about, the link for that page will be given the aria-current attribute:

<nav>
  <a href="/">Home</a>
  <a href="/about" aria-current="page">About</a>
</nav>

By default, current_link_to will output the page value for aria-current. You can also pass it one of aria-current’s other accepted values: step, location, date, time, true, or false:

<%= current_link_to "Step 1", "/step-1", aria_current: "step" %>
<%= current_link_to "Step 2", "/step-2", aria_current: "step" %>
<%= current_link_to "Step 3", "/step-3", aria_current: "step" %>

Provided that you are currently visiting /step-2, the output will be:

<a href="/step-1">Step 1</a>
<a href="/step-2" aria-current="step">Step 2</a>
<a href="/step-3">Step 3</a>

For styling current links, you can use a CSS attribute selector:

[aria-current]:not([aria-current="false"]) {
  font-weight: bold;
}

Note that we exclude styling the link if aria-current has a value of false. This is because false is a valid and useful value for denoting a link that does not represent the current item within a set.

Contributing

See the contributing document. Thank you, contributors!

License

middleman-aria_current is copyright © 2017 Tyson Gach and thoughtbot, inc. It is free software, and may be redistributed under the terms specified in the LICENSE file.

About

thoughtbot

middleman-aria_current is maintained and funded by thoughtbot, inc. The names and logos for thoughtbot are trademarks of thoughtbot, inc.

We love open source software! See our other projects or hire us to help build your product.