accessible-bootstrap3-rails 0.1.3 → 0.1.4
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +58 -5
- data/accessible-bootstrap3-package.json +8 -8
- data/gem-instructions.md +58 -5
- data/lib/accessible/bootstrap3/rails.rb +1 -0
- data/lib/accessible/bootstrap3/rails/railtie.rb +13 -0
- data/lib/accessible/bootstrap3/rails/view_helper.rb +17 -0
- data/package.json +1 -1
- data/vendor/assets/javascripts/accessible-bootstrap3/index.js +4 -0
- metadata +4 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 52857fb329541dbe468e9db7315672801d9349be
|
4
|
+
data.tar.gz: 63835b60b3f44c98c5857e5a0a10718ca566af63
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 6678ef35160766dd6719b8024f2ffea08952b44205a7943af16ecfa0cc4fcc0a597aa3013356d3d7de180d81f69fd07b2287bcdbee80175f434f670b39c00aa8
|
7
|
+
data.tar.gz: ced1c7f876e0ceac9aa8e41138ce6606854c8a07143a027668ebc218922e3927777b35698d059aac92a21d7028a854333cca42ab678e0bcfad2e17e5374990ee
|
data/README.md
CHANGED
@@ -1,6 +1,13 @@
|
|
1
1
|
# Accessible::Bootstrap3::Rails
|
2
2
|
|
3
|
-
#### A gem to bring npm package bootstrap3
|
3
|
+
#### A gem to bring the npm package, accessible-bootstrap3, into your rails project.
|
4
|
+
This gem will do it's best to keep the version number in alignment with the accessible-bootstrap3 package version.
|
5
|
+
Any changes made the this gem that aren't fallowing a change from the npm package will be denoted with a slight version bump. Then on the next npm package version update we will bring them back into alignment. The versioning may look something like this when they diverge.
|
6
|
+
* accessible-bootstrap3
|
7
|
+
`"version": "0.1.5"`
|
8
|
+
* accessible-bootstrap3-rails
|
9
|
+
`"version": "0.1.51"`
|
10
|
+
|
4
11
|
|
5
12
|
## Installation
|
6
13
|
|
@@ -10,7 +17,7 @@ Add this line to your application's Gemfile:
|
|
10
17
|
gem 'accessible-bootstrap3-rails'
|
11
18
|
```
|
12
19
|
|
13
|
-
And then
|
20
|
+
And then run.
|
14
21
|
|
15
22
|
$ bundle
|
16
23
|
|
@@ -24,14 +31,60 @@ Add it and the jQuery dependency to your `application.js`:
|
|
24
31
|
```
|
25
32
|
//= require accessible-bootstrap3/index
|
26
33
|
```
|
27
|
-
|
34
|
+
If you're already using **'jquery >=1.9.1 < 2.0.0'** you can leave out the next line
|
28
35
|
|
29
36
|
`//= require jquery/dist/jquery.min.js`
|
30
37
|
|
31
|
-
|
38
|
+
### Rails View Helpers
|
39
|
+
|
40
|
+
This Gem ships with a couple view helpers. The first helps with implementing the skip navigation
|
41
|
+
feature that comes with accessible-bootstrap3. The second is an method to wrap abbreviations in
|
42
|
+
`<abbr>` tags with proper titles. This way screen readers will properly announce the abbreviations one letter at a time.
|
43
|
+
|
44
|
+
#### page_header helper
|
45
|
+
1) To make use of this feature add the skip navigation link in your application.html.haml
|
46
|
+
right at the top of the view template like so.
|
47
|
+
|
48
|
+
````
|
49
|
+
%body
|
50
|
+
.container
|
51
|
+
= link_to "Skip Navigation", "#heading", id: "skip-nav"
|
52
|
+
```
|
53
|
+
2) Add the content_for? block at the top of the page under your navigation.
|
54
|
+
|
55
|
+
```
|
56
|
+
- if content_for?(:page_header)
|
57
|
+
%h1#heading
|
58
|
+
= yield :page_header
|
59
|
+
````
|
60
|
+
|
61
|
+
3) In each of your view templates that will render inside off the application.html.haml you can then utilize the **page_header** method to set your page heading like so.
|
62
|
+
* The page headers are automatically processed with the wrap_abbrevations method that is described bellow.
|
63
|
+
|
64
|
+
```
|
65
|
+
## index.html.haml
|
66
|
+
|
67
|
+
- page_header "The Heading of Your Choosing (SAAS). Homepage."
|
68
|
+
|
69
|
+
%div.landing-page
|
70
|
+
%div
|
71
|
+
%p ...your sites content...
|
72
|
+
```
|
73
|
+
Now on any page that has a **page_header** you will be able to use the skip navigation link to move passed the navigation and focus directly onto the page_header.
|
74
|
+
|
75
|
+
#### wrap_abbrevations helper
|
76
|
+
1) Any strings that may contain abbreviations can be processed by the **wrap_abbreviations**
|
77
|
+
method like so.
|
78
|
+
```ruby
|
79
|
+
wrap_abbreviations("NASA homepage.")
|
80
|
+
## returns "<abbr title='N A S A'>NASA</abbr> homepage"
|
81
|
+
```
|
82
|
+
* This method searches the string for groups of uppercase letter characters in groups of two or more and wraps them with the `<abbr>` tag and title. It works on strings with multiple abbreviations and is really useful for dynamically generated strings coming from the database. All the strings are returned with html_safe method already called on them so be careful when using this with dynamic content.
|
83
|
+
|
32
84
|
|
33
|
-
|
85
|
+
## Usage specs as specified in accessible-bootstrap3 npm package.
|
34
86
|
|
87
|
+
> https://www.npmjs.com/package/accessible-bootstrap3
|
35
88
|
# bootstrap3-accessibility-patches
|
36
89
|
|
37
90
|
A package for making your bootstrap3 web app more accessible.
|
@@ -13,14 +13,14 @@
|
|
13
13
|
]
|
14
14
|
],
|
15
15
|
"_from": "accessible-bootstrap3@latest",
|
16
|
-
"_id": "accessible-bootstrap3@0.1.
|
16
|
+
"_id": "accessible-bootstrap3@0.1.4",
|
17
17
|
"_inCache": true,
|
18
18
|
"_installable": true,
|
19
19
|
"_location": "/accessible-bootstrap3",
|
20
20
|
"_nodeVersion": "5.10.0",
|
21
21
|
"_npmOperationalInternal": {
|
22
22
|
"host": "packages-12-west.internal.npmjs.com",
|
23
|
-
"tmp": "tmp/accessible-bootstrap3-0.1.
|
23
|
+
"tmp": "tmp/accessible-bootstrap3-0.1.4.tgz_1466028275296_0.4808651462662965"
|
24
24
|
},
|
25
25
|
"_npmUser": {
|
26
26
|
"email": "the-team@reax.io",
|
@@ -39,8 +39,8 @@
|
|
39
39
|
"_requiredBy": [
|
40
40
|
"/"
|
41
41
|
],
|
42
|
-
"_resolved": "https://registry.npmjs.org/accessible-bootstrap3/-/accessible-bootstrap3-0.1.
|
43
|
-
"_shasum": "
|
42
|
+
"_resolved": "https://registry.npmjs.org/accessible-bootstrap3/-/accessible-bootstrap3-0.1.4.tgz",
|
43
|
+
"_shasum": "e8e23918f9a71647707429916f581ce585fcbab8",
|
44
44
|
"_shrinkwrap": null,
|
45
45
|
"_spec": "accessible-bootstrap3@latest",
|
46
46
|
"_where": "/Users/brandonhoward/Desktop/code/reax_code/accessible-bootstrap3-rails",
|
@@ -59,13 +59,13 @@
|
|
59
59
|
"devDependencies": {},
|
60
60
|
"directories": {},
|
61
61
|
"dist": {
|
62
|
-
"shasum": "
|
63
|
-
"tarball": "https://registry.npmjs.org/accessible-bootstrap3/-/accessible-bootstrap3-0.1.
|
62
|
+
"shasum": "e8e23918f9a71647707429916f581ce585fcbab8",
|
63
|
+
"tarball": "https://registry.npmjs.org/accessible-bootstrap3/-/accessible-bootstrap3-0.1.4.tgz"
|
64
64
|
},
|
65
65
|
"engines": {
|
66
66
|
"node": ">=4.2.4"
|
67
67
|
},
|
68
|
-
"gitHead": "
|
68
|
+
"gitHead": "78acce28e2df90c9a478e0b69ec77a6c67b098ec",
|
69
69
|
"homepage": "https://github.com/ReaxDev/accessible-bootstrap3#readme",
|
70
70
|
"license": "MIT",
|
71
71
|
"main": "index.js",
|
@@ -89,5 +89,5 @@
|
|
89
89
|
"scripts": {
|
90
90
|
"test": "echo \"Error: no test specified\" && exit 1"
|
91
91
|
},
|
92
|
-
"version": "0.1.
|
92
|
+
"version": "0.1.4"
|
93
93
|
}
|
data/gem-instructions.md
CHANGED
@@ -1,6 +1,13 @@
|
|
1
1
|
# Accessible::Bootstrap3::Rails
|
2
2
|
|
3
|
-
#### A gem to bring npm package bootstrap3
|
3
|
+
#### A gem to bring the npm package, accessible-bootstrap3, into your rails project.
|
4
|
+
This gem will do it's best to keep the version number in alignment with the accessible-bootstrap3 package version.
|
5
|
+
Any changes made the this gem that aren't fallowing a change from the npm package will be denoted with a slight version bump. Then on the next npm package version update we will bring them back into alignment. The versioning may look something like this when they diverge.
|
6
|
+
* accessible-bootstrap3
|
7
|
+
`"version": "0.1.5"`
|
8
|
+
* accessible-bootstrap3-rails
|
9
|
+
`"version": "0.1.51"`
|
10
|
+
|
4
11
|
|
5
12
|
## Installation
|
6
13
|
|
@@ -10,7 +17,7 @@ Add this line to your application's Gemfile:
|
|
10
17
|
gem 'accessible-bootstrap3-rails'
|
11
18
|
```
|
12
19
|
|
13
|
-
And then
|
20
|
+
And then run.
|
14
21
|
|
15
22
|
$ bundle
|
16
23
|
|
@@ -24,11 +31,57 @@ Add it and the jQuery dependency to your `application.js`:
|
|
24
31
|
```
|
25
32
|
//= require accessible-bootstrap3/index
|
26
33
|
```
|
27
|
-
|
34
|
+
If you're already using **'jquery >=1.9.1 < 2.0.0'** you can leave out the next line
|
28
35
|
|
29
36
|
`//= require jquery/dist/jquery.min.js`
|
30
37
|
|
31
|
-
|
38
|
+
### Rails View Helpers
|
39
|
+
|
40
|
+
This Gem ships with a couple view helpers. The first helps with implementing the skip navigation
|
41
|
+
feature that comes with accessible-bootstrap3. The second is an method to wrap abbreviations in
|
42
|
+
`<abbr>` tags with proper titles. This way screen readers will properly announce the abbreviations one letter at a time.
|
43
|
+
|
44
|
+
#### page_header helper
|
45
|
+
1) To make use of this feature add the skip navigation link in your application.html.haml
|
46
|
+
right at the top of the view template like so.
|
47
|
+
|
48
|
+
````
|
49
|
+
%body
|
50
|
+
.container
|
51
|
+
= link_to "Skip Navigation", "#heading", id: "skip-nav"
|
52
|
+
```
|
53
|
+
2) Add the content_for? block at the top of the page under your navigation.
|
54
|
+
|
55
|
+
```
|
56
|
+
- if content_for?(:page_header)
|
57
|
+
%h1#heading
|
58
|
+
= yield :page_header
|
59
|
+
````
|
60
|
+
|
61
|
+
3) In each of your view templates that will render inside off the application.html.haml you can then utilize the **page_header** method to set your page heading like so.
|
62
|
+
* The page headers are automatically processed with the wrap_abbrevations method that is described bellow.
|
63
|
+
|
64
|
+
```
|
65
|
+
## index.html.haml
|
66
|
+
|
67
|
+
- page_header "The Heading of Your Choosing (SAAS). Homepage."
|
68
|
+
|
69
|
+
%div.landing-page
|
70
|
+
%div
|
71
|
+
%p ...your sites content...
|
72
|
+
```
|
73
|
+
Now on any page that has a **page_header** you will be able to use the skip navigation link to move passed the navigation and focus directly onto the page_header.
|
74
|
+
|
75
|
+
#### wrap_abbrevations helper
|
76
|
+
1) Any strings that may contain abbreviations can be processed by the **wrap_abbreviations**
|
77
|
+
method like so.
|
78
|
+
```ruby
|
79
|
+
wrap_abbreviations("NASA homepage.")
|
80
|
+
## returns "<abbr title='N A S A'>NASA</abbr> homepage"
|
81
|
+
```
|
82
|
+
* This method searches the string for groups of uppercase letter characters in groups of two or more and wraps them with the `<abbr>` tag and title. It works on strings with multiple abbreviations and is really useful for dynamically generated strings coming from the database. All the strings are returned with html_safe method already called on them so be careful when using this with dynamic content.
|
83
|
+
|
32
84
|
|
33
|
-
|
85
|
+
## Usage specs as specified in accessible-bootstrap3 npm package.
|
34
86
|
|
87
|
+
> https://www.npmjs.com/package/accessible-bootstrap3
|
@@ -0,0 +1,13 @@
|
|
1
|
+
require_relative 'view_helper'
|
2
|
+
|
3
|
+
module Accessible
|
4
|
+
module Bootstrap3
|
5
|
+
module Rails
|
6
|
+
class Railtie < ::Rails::Railtie
|
7
|
+
initializer "accessible.bootstrap3.rails.view_helpers" do
|
8
|
+
ActionView::Base.send :include, ViewHelpers
|
9
|
+
end
|
10
|
+
end
|
11
|
+
end
|
12
|
+
end
|
13
|
+
end
|
@@ -0,0 +1,17 @@
|
|
1
|
+
module Accessible
|
2
|
+
module Bootstrap3
|
3
|
+
module Rails
|
4
|
+
module ViewHelpers
|
5
|
+
def wrap_abbreviations(string)
|
6
|
+
string.enum_for(:scan, /([A-Z]{2,})/).reduce(string) do |acc, _|
|
7
|
+
acc.gsub $1, "<abbr title='#{$1.chars.to_a.join(' ')}'>#{$1}</abbr>"
|
8
|
+
end.html_safe
|
9
|
+
end
|
10
|
+
|
11
|
+
def page_header(header)
|
12
|
+
content_for(:page_header) {wrap_abbreviations(header)}
|
13
|
+
end
|
14
|
+
end
|
15
|
+
end
|
16
|
+
end
|
17
|
+
end
|
data/package.json
CHANGED
@@ -7,6 +7,10 @@ $(document).ready(function() {
|
|
7
7
|
return event.keyCode || event.which;
|
8
8
|
}
|
9
9
|
|
10
|
+
///// Make sure all submenu links are focusable
|
11
|
+
$(".trigger").each(function() {
|
12
|
+
$(this).attr("tabindex", false);
|
13
|
+
});
|
10
14
|
//////////////////////////////////////////////////////////////////
|
11
15
|
// This code removes the open class from a .dropdown menu,
|
12
16
|
// or adds {"display": "none"} css to .sub-menu menu
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: accessible-bootstrap3-rails
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.1.
|
4
|
+
version: 0.1.4
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- brayhoward
|
8
8
|
autorequire:
|
9
9
|
bindir: exe
|
10
10
|
cert_chain: []
|
11
|
-
date: 2016-06-
|
11
|
+
date: 2016-06-15 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: bundler
|
@@ -71,7 +71,9 @@ files:
|
|
71
71
|
- copy.sh
|
72
72
|
- gem-instructions.md
|
73
73
|
- lib/accessible/bootstrap3/rails.rb
|
74
|
+
- lib/accessible/bootstrap3/rails/railtie.rb
|
74
75
|
- lib/accessible/bootstrap3/rails/version.rb
|
76
|
+
- lib/accessible/bootstrap3/rails/view_helper.rb
|
75
77
|
- package.json
|
76
78
|
- vendor/assets/javascripts/accessible-bootstrap3/index.js
|
77
79
|
- vendor/assets/javascripts/jquery/jquery.js
|