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

Add middleman-aria_current to your Gemfile:
```
gem "middleman-aria_current"
```
Install the gem:
```
bundle install
```
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

About

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.