Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/thoughtbot/middleman-aria_current
Accessibly indicate a current (active) link in Middleman
https://github.com/thoughtbot/middleman-aria_current
a11y accessibility aria middleman middleman-extension
Last synced: 3 months ago
JSON representation
Accessibly indicate a current (active) link in Middleman
- Host: GitHub
- URL: https://github.com/thoughtbot/middleman-aria_current
- Owner: thoughtbot
- License: mit
- Created: 2017-03-17T18:35:50.000Z (almost 8 years ago)
- Default Branch: main
- Last Pushed: 2021-09-24T16:05:34.000Z (over 3 years ago)
- Last Synced: 2024-10-13T11:43:15.299Z (4 months ago)
- Topics: a11y, accessibility, aria, middleman, middleman-extension
- Language: Ruby
- Homepage:
- Size: 18.6 KB
- Stars: 8
- Watchers: 3
- Forks: 4
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
# middleman-aria_current
A [Middleman] extension for indicating a current (active) link using
[`aria-current`][spec].
If you're new to `aria-current`, [Léonie Watson wrote a _wonderful_ article
detailing its usage][article].
[Middleman]: https://middlemanapp.com/
[spec]: https://www.w3.org/TR/wai-aria-1.1/#aria-current
[article]: http://tink.uk/using-the-aria-current-attribute/
# Installation
1. Add middleman-aria_current to your `Gemfile`:
```bash
gem "middleman-aria_current"
```
1. Install the gem:
```bash
bundle install
```
1. Activate the extension in `config.rb`:
```ruby
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):
```erb
<%= current_link_to "Home", "/" %>
<%= current_link_to "About", "/about" %>
```
Now, when you visit `/about`, the link for that page will be given the
`aria-current` attribute:
```html
```
---
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`:
```erb
<%= 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:
```html
Step 1
Step 2
Step 3
```
---
For styling current links, you can use a [CSS attribute selector][selector_mdn]:
```css
[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.
[selector_mdn]: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
## Contributing
See the [contributing document].
Thank you, [contributors]!
[contributing document]: CONTRIBUTING.md
[contributors]: https://github.com/thoughtbot/middleman-aria_current/graphs/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.
[LICENSE]: LICENSE.md
## 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][community]
or [hire us][hire] to help build your product.
[community]: https://thoughtbot.com/community?utm_source=github
[hire]: https://thoughtbot.com/hire-us?utm_source=github