Simple Social Icons - Version 1.0.14

Version Description

  • Accessibility improvements: change icon color on focus as well as on hover, add text description for assistive technologies
Download this release

Release Info

Developer nathanrice
Plugin Icon 128x128 Simple Social Icons
Version 1.0.14
Comparing to
See all releases

Code changes from version 1.0.13 to 1.0.14

Files changed (6) hide show
  1. README.md +7 -0
  2. css/style.css +11 -1
  3. languages/simple-social-icons.pot +98 -34
  4. package.json +1 -1
  5. readme.txt +4 -1
  6. simple-social-icons.php +25 -19
README.md CHANGED
@@ -4,6 +4,7 @@ Contributors:
4
  * [Nathan Rice](https://github.com/nathanrice)
5
  * [StudioPress](https://github.com/studiopress)
6
  * [Brian Gardner](https://github.com/bgardner)
 
7
 
8
  ### Description
9
 
@@ -103,3 +104,9 @@ NOTE - The rights to each pictogram in the social extension are either trademark
103
 
104
  1.0.12
105
  * Prevent ModSecurity blocking fonts from loading
 
 
 
 
 
 
4
  * [Nathan Rice](https://github.com/nathanrice)
5
  * [StudioPress](https://github.com/studiopress)
6
  * [Brian Gardner](https://github.com/bgardner)
7
+ * [Shannon Hale](https://github.com/shannonsans)
8
 
9
  ### Description
10
 
104
 
105
  1.0.12
106
  * Prevent ModSecurity blocking fonts from loading
107
+
108
+ 1.0.13
109
+ * Add textdomain loader
110
+
111
+ 1.0.14
112
+ * Accessibility improvements: change icon color on focus as well as on hover, add text description for assistive technologies
css/style.css CHANGED
@@ -38,7 +38,6 @@
38
  font-variant: normal !important;
39
  font-weight: normal !important;
40
  line-height: 1em;
41
- speak: none;
42
  text-align: center;
43
  text-decoration: none !important;
44
  text-transform: none !important;
@@ -55,3 +54,14 @@
55
  display: inline-block;
56
  float: none;
57
  }
 
 
 
 
 
 
 
 
 
 
 
38
  font-variant: normal !important;
39
  font-weight: normal !important;
40
  line-height: 1em;
 
41
  text-align: center;
42
  text-decoration: none !important;
43
  text-transform: none !important;
54
  display: inline-block;
55
  float: none;
56
  }
57
+
58
+ .simple-social-icons .screen-reader-text {
59
+ position: absolute;
60
+ width: 1px;
61
+ height: 1px;
62
+ padding: 0;
63
+ margin: -1px;
64
+ overflow: hidden;
65
+ clip: rect(0, 0, 0, 0);
66
+ border: 0;
67
+ }
languages/simple-social-icons.pot CHANGED
@@ -2,9 +2,9 @@
2
  # This file is distributed under the GNU General Public License v2.0 (or later).
3
  msgid ""
4
  msgstr ""
5
- "Project-Id-Version: Simple Social Icons 1.0.9\n"
6
  "Report-Msgid-Bugs-To: StudioPress <translations@studiopress.com>\n"
7
- "POT-Creation-Date: 2015-09-29 22:00:46+00:00\n"
8
  "MIME-Version: 1.0\n"
9
  "Content-Type: text/plain; charset=utf-8\n"
10
  "Content-Transfer-Encoding: 8bit\n"
@@ -24,71 +24,135 @@ msgstr ""
24
  "X-Poedit-SearchPath-0: .\n"
25
  "X-Textdomain-Support: yes\n"
26
 
27
- #: simple-social-icons.php:113
28
  msgid "Bloglovin URI"
29
  msgstr ""
30
 
31
- #: simple-social-icons.php:117
 
 
 
 
32
  msgid "Dribbble URI"
33
  msgstr ""
34
 
35
- #: simple-social-icons.php:121
 
 
 
 
36
  msgid "Email URI"
37
  msgstr ""
38
 
39
- #: simple-social-icons.php:125
 
 
 
 
40
  msgid "Facebook URI"
41
  msgstr ""
42
 
43
- #: simple-social-icons.php:129
 
 
 
 
44
  msgid "Flickr URI"
45
  msgstr ""
46
 
47
- #: simple-social-icons.php:133
 
 
 
 
48
  msgid "GitHub URI"
49
  msgstr ""
50
 
51
- #: simple-social-icons.php:137
 
 
 
 
52
  msgid "Google+ URI"
53
  msgstr ""
54
 
55
- #: simple-social-icons.php:141
 
 
 
 
56
  msgid "Instagram URI"
57
  msgstr ""
58
 
59
- #: simple-social-icons.php:145
 
 
 
 
60
  msgid "Linkedin URI"
61
  msgstr ""
62
 
63
- #: simple-social-icons.php:149
 
 
 
 
64
  msgid "Pinterest URI"
65
  msgstr ""
66
 
67
- #: simple-social-icons.php:153
 
 
 
 
68
  msgid "RSS URI"
69
  msgstr ""
70
 
71
- #: simple-social-icons.php:157
 
 
 
 
72
  msgid "StumbleUpon URI"
73
  msgstr ""
74
 
75
- #: simple-social-icons.php:161
 
 
 
 
76
  msgid "Tumblr URI"
77
  msgstr ""
78
 
79
- #: simple-social-icons.php:165
 
 
 
 
80
  msgid "Twitter URI"
81
  msgstr ""
82
 
83
- #: simple-social-icons.php:169
 
 
 
 
84
  msgid "Vimeo URI"
85
  msgstr ""
86
 
87
- #: simple-social-icons.php:173
 
 
 
 
88
  msgid "YouTube URI"
89
  msgstr ""
90
 
91
- #: simple-social-icons.php:180
 
 
 
 
92
  msgid "Displays select social icons."
93
  msgstr ""
94
 
@@ -96,63 +160,63 @@ msgstr ""
96
  msgid "Simple Social Icons"
97
  msgstr ""
98
 
99
- #: simple-social-icons.php:265
100
  msgid "Title:"
101
  msgstr ""
102
 
103
- #: simple-social-icons.php:267
104
  msgid "Open links in new window?"
105
  msgstr ""
106
 
107
- #: simple-social-icons.php:269
108
  msgid "Icon Size"
109
  msgstr ""
110
 
111
- #: simple-social-icons.php:271
112
  msgid "Icon Border Radius:"
113
  msgstr ""
114
 
115
- #: simple-social-icons.php:273
116
  msgid "Border Width:"
117
  msgstr ""
118
 
119
- #: simple-social-icons.php:276
120
  msgid "Alignment"
121
  msgstr ""
122
 
123
- #: simple-social-icons.php:278
124
  msgid "Align Left"
125
  msgstr ""
126
 
127
- #: simple-social-icons.php:279
128
  msgid "Align Center"
129
  msgstr ""
130
 
131
- #: simple-social-icons.php:280
132
  msgid "Align Right"
133
  msgstr ""
134
 
135
- #: simple-social-icons.php:286
136
  msgid "Icon Font Color:"
137
  msgstr ""
138
 
139
- #: simple-social-icons.php:288
140
  msgid "Icon Font Hover Color:"
141
  msgstr ""
142
 
143
- #: simple-social-icons.php:290
144
  msgid "Background Color:"
145
  msgstr ""
146
 
147
- #: simple-social-icons.php:292
148
  msgid "Background Hover Color:"
149
  msgstr ""
150
 
151
- #: simple-social-icons.php:294
152
  msgid "Border Color:"
153
  msgstr ""
154
 
155
- #: simple-social-icons.php:296
156
  msgid "Border Hover Color:"
157
  msgstr ""
158
 
2
  # This file is distributed under the GNU General Public License v2.0 (or later).
3
  msgid ""
4
  msgstr ""
5
+ "Project-Id-Version: Simple Social Icons 1.0.14\n"
6
  "Report-Msgid-Bugs-To: StudioPress <translations@studiopress.com>\n"
7
+ "POT-Creation-Date: 2015-11-17 16:53:57+00:00\n"
8
  "MIME-Version: 1.0\n"
9
  "Content-Type: text/plain; charset=utf-8\n"
10
  "Content-Transfer-Encoding: 8bit\n"
24
  "X-Poedit-SearchPath-0: .\n"
25
  "X-Textdomain-Support: yes\n"
26
 
27
+ #: simple-social-icons.php:124
28
  msgid "Bloglovin URI"
29
  msgstr ""
30
 
31
+ #: simple-social-icons.php:125
32
+ msgid "Bloglovin"
33
+ msgstr ""
34
+
35
+ #: simple-social-icons.php:128
36
  msgid "Dribbble URI"
37
  msgstr ""
38
 
39
+ #: simple-social-icons.php:129
40
+ msgid "Dribbble"
41
+ msgstr ""
42
+
43
+ #: simple-social-icons.php:132
44
  msgid "Email URI"
45
  msgstr ""
46
 
47
+ #: simple-social-icons.php:133
48
+ msgid "Email"
49
+ msgstr ""
50
+
51
+ #: simple-social-icons.php:136
52
  msgid "Facebook URI"
53
  msgstr ""
54
 
55
+ #: simple-social-icons.php:137
56
+ msgid "Facebook"
57
+ msgstr ""
58
+
59
+ #: simple-social-icons.php:140
60
  msgid "Flickr URI"
61
  msgstr ""
62
 
63
+ #: simple-social-icons.php:141
64
+ msgid "Flickr"
65
+ msgstr ""
66
+
67
+ #: simple-social-icons.php:144
68
  msgid "GitHub URI"
69
  msgstr ""
70
 
71
+ #: simple-social-icons.php:145
72
+ msgid "GitHub"
73
+ msgstr ""
74
+
75
+ #: simple-social-icons.php:148
76
  msgid "Google+ URI"
77
  msgstr ""
78
 
79
+ #: simple-social-icons.php:149
80
+ msgid "Google+"
81
+ msgstr ""
82
+
83
+ #: simple-social-icons.php:152
84
  msgid "Instagram URI"
85
  msgstr ""
86
 
87
+ #: simple-social-icons.php:153
88
+ msgid "Instagram"
89
+ msgstr ""
90
+
91
+ #: simple-social-icons.php:156
92
  msgid "Linkedin URI"
93
  msgstr ""
94
 
95
+ #: simple-social-icons.php:157
96
+ msgid "Linkedin"
97
+ msgstr ""
98
+
99
+ #: simple-social-icons.php:160
100
  msgid "Pinterest URI"
101
  msgstr ""
102
 
103
+ #: simple-social-icons.php:161
104
+ msgid "Pinterest"
105
+ msgstr ""
106
+
107
+ #: simple-social-icons.php:164
108
  msgid "RSS URI"
109
  msgstr ""
110
 
111
+ #: simple-social-icons.php:165
112
+ msgid "RSS"
113
+ msgstr ""
114
+
115
+ #: simple-social-icons.php:168
116
  msgid "StumbleUpon URI"
117
  msgstr ""
118
 
119
+ #: simple-social-icons.php:169
120
+ msgid "StumbleUpon"
121
+ msgstr ""
122
+
123
+ #: simple-social-icons.php:172
124
  msgid "Tumblr URI"
125
  msgstr ""
126
 
127
+ #: simple-social-icons.php:173
128
+ msgid "Tumblr"
129
+ msgstr ""
130
+
131
+ #: simple-social-icons.php:176
132
  msgid "Twitter URI"
133
  msgstr ""
134
 
135
+ #: simple-social-icons.php:177
136
+ msgid "Twitter"
137
+ msgstr ""
138
+
139
+ #: simple-social-icons.php:180
140
  msgid "Vimeo URI"
141
  msgstr ""
142
 
143
+ #: simple-social-icons.php:181
144
+ msgid "Vimeo"
145
+ msgstr ""
146
+
147
+ #: simple-social-icons.php:184
148
  msgid "YouTube URI"
149
  msgstr ""
150
 
151
+ #: simple-social-icons.php:185
152
+ msgid "YouTube"
153
+ msgstr ""
154
+
155
+ #: simple-social-icons.php:191
156
  msgid "Displays select social icons."
157
  msgstr ""
158
 
160
  msgid "Simple Social Icons"
161
  msgstr ""
162
 
163
+ #: simple-social-icons.php:276
164
  msgid "Title:"
165
  msgstr ""
166
 
167
+ #: simple-social-icons.php:278
168
  msgid "Open links in new window?"
169
  msgstr ""
170
 
171
+ #: simple-social-icons.php:280
172
  msgid "Icon Size"
173
  msgstr ""
174
 
175
+ #: simple-social-icons.php:282
176
  msgid "Icon Border Radius:"
177
  msgstr ""
178
 
179
+ #: simple-social-icons.php:284
180
  msgid "Border Width:"
181
  msgstr ""
182
 
183
+ #: simple-social-icons.php:287
184
  msgid "Alignment"
185
  msgstr ""
186
 
187
+ #: simple-social-icons.php:289
188
  msgid "Align Left"
189
  msgstr ""
190
 
191
+ #: simple-social-icons.php:290
192
  msgid "Align Center"
193
  msgstr ""
194
 
195
+ #: simple-social-icons.php:291
196
  msgid "Align Right"
197
  msgstr ""
198
 
199
+ #: simple-social-icons.php:297
200
  msgid "Icon Font Color:"
201
  msgstr ""
202
 
203
+ #: simple-social-icons.php:299
204
  msgid "Icon Font Hover Color:"
205
  msgstr ""
206
 
207
+ #: simple-social-icons.php:301
208
  msgid "Background Color:"
209
  msgstr ""
210
 
211
+ #: simple-social-icons.php:303
212
  msgid "Background Hover Color:"
213
  msgstr ""
214
 
215
+ #: simple-social-icons.php:305
216
  msgid "Border Color:"
217
  msgstr ""
218
 
219
+ #: simple-social-icons.php:307
220
  msgid "Border Hover Color:"
221
  msgstr ""
222
 
package.json CHANGED
@@ -29,7 +29,7 @@
29
  "description": "A simple, CSS and icon font driven social icons widget.",
30
  "author": "StudioPress",
31
  "authoruri": "http://www.studiopress.com/",
32
- "version": "1.0.13",
33
  "license": "GPL-2.0+",
34
  "licenseuri": "http://www.gnu.org/licenses/gpl-2.0.html",
35
  "textdomain": "simple-social-icons"
29
  "description": "A simple, CSS and icon font driven social icons widget.",
30
  "author": "StudioPress",
31
  "authoruri": "http://www.studiopress.com/",
32
+ "version": "1.0.14",
33
  "license": "GPL-2.0+",
34
  "licenseuri": "http://www.gnu.org/licenses/gpl-2.0.html",
35
  "textdomain": "simple-social-icons"
readme.txt CHANGED
@@ -1,5 +1,5 @@
1
  === Plugin Name ===
2
- Contributors: nathanrice, studiopress, bgardner
3
  Tags: social media, social networking, social profiles
4
  Requires at least: 4.0
5
  Tested up to: 4.3.1
@@ -47,6 +47,9 @@ NOTE - The rights to each pictogram in the social extension are either trademark
47
 
48
  == Changelog ==
49
 
 
 
 
50
  = 1.0.13 =
51
  * Add textdomain loader
52
 
1
  === Plugin Name ===
2
+ Contributors: nathanrice, studiopress, bgardner, shannonsans
3
  Tags: social media, social networking, social profiles
4
  Requires at least: 4.0
5
  Tested up to: 4.3.1
47
 
48
  == Changelog ==
49
 
50
+ = 1.0.14 =
51
+ * Accessibility improvements: change icon color on focus as well as on hover, add text description for assistive technologies
52
+
53
  = 1.0.13 =
54
  * Add textdomain loader
55
 
simple-social-icons.php CHANGED
@@ -6,7 +6,7 @@ Description: A simple, CSS and icon font driven social icons widget.
6
  Author: Nathan Rice
7
  Author URI: http://www.nathanrice.net/
8
 
9
- Version: 1.0.13
10
 
11
  Text Domain: simple-social-icons
12
  Domain Path: /languages
@@ -122,67 +122,67 @@ class Simple_Social_Icons_Widget extends WP_Widget {
122
  $this->profiles = apply_filters( 'simple_social_default_profiles', array(
123
  'bloglovin' => array(
124
  'label' => __( 'Bloglovin URI', 'simple-social-icons' ),
125
- 'pattern' => '<li class="social-bloglovin"><a href="%s" %s>' . $this->glyphs['bloglovin'] . '</a></li>',
126
  ),
127
  'dribbble' => array(
128
  'label' => __( 'Dribbble URI', 'simple-social-icons' ),
129
- 'pattern' => '<li class="social-dribbble"><a href="%s" %s>' . $this->glyphs['dribbble'] . '</a></li>',
130
  ),
131
  'email' => array(
132
  'label' => __( 'Email URI', 'simple-social-icons' ),
133
- 'pattern' => '<li class="social-email"><a href="%s" %s>' . $this->glyphs['email'] . '</a></li>',
134
  ),
135
  'facebook' => array(
136
  'label' => __( 'Facebook URI', 'simple-social-icons' ),
137
- 'pattern' => '<li class="social-facebook"><a href="%s" %s>' . $this->glyphs['facebook'] . '</a></li>',
138
  ),
139
  'flickr' => array(
140
  'label' => __( 'Flickr URI', 'simple-social-icons' ),
141
- 'pattern' => '<li class="social-flickr"><a href="%s" %s>' . $this->glyphs['flickr'] . '</a></li>',
142
  ),
143
  'github' => array(
144
  'label' => __( 'GitHub URI', 'simple-social-icons' ),
145
- 'pattern' => '<li class="social-github"><a href="%s" %s>' . $this->glyphs['github'] . '</a></li>',
146
  ),
147
  'gplus' => array(
148
  'label' => __( 'Google+ URI', 'simple-social-icons' ),
149
- 'pattern' => '<li class="social-gplus"><a href="%s" %s>' . $this->glyphs['gplus'] . '</a></li>',
150
  ),
151
  'instagram' => array(
152
  'label' => __( 'Instagram URI', 'simple-social-icons' ),
153
- 'pattern' => '<li class="social-instagram"><a href="%s" %s>' . $this->glyphs['instagram'] . '</a></li>',
154
  ),
155
  'linkedin' => array(
156
  'label' => __( 'Linkedin URI', 'simple-social-icons' ),
157
- 'pattern' => '<li class="social-linkedin"><a href="%s" %s>' . $this->glyphs['linkedin'] . '</a></li>',
158
  ),
159
  'pinterest' => array(
160
  'label' => __( 'Pinterest URI', 'simple-social-icons' ),
161
- 'pattern' => '<li class="social-pinterest"><a href="%s" %s>' . $this->glyphs['pinterest'] . '</a></li>',
162
  ),
163
  'rss' => array(
164
  'label' => __( 'RSS URI', 'simple-social-icons' ),
165
- 'pattern' => '<li class="social-rss"><a href="%s" %s>' . $this->glyphs['rss'] . '</a></li>',
166
  ),
167
  'stumbleupon' => array(
168
  'label' => __( 'StumbleUpon URI', 'simple-social-icons' ),
169
- 'pattern' => '<li class="social-stumbleupon"><a href="%s" %s>' . $this->glyphs['stumbleupon'] . '</a></li>',
170
  ),
171
  'tumblr' => array(
172
  'label' => __( 'Tumblr URI', 'simple-social-icons' ),
173
- 'pattern' => '<li class="social-tumblr"><a href="%s" %s>' . $this->glyphs['tumblr'] . '</a></li>',
174
  ),
175
  'twitter' => array(
176
  'label' => __( 'Twitter URI', 'simple-social-icons' ),
177
- 'pattern' => '<li class="social-twitter"><a href="%s" %s>' . $this->glyphs['twitter'] . '</a></li>',
178
  ),
179
  'vimeo' => array(
180
  'label' => __( 'Vimeo URI', 'simple-social-icons' ),
181
- 'pattern' => '<li class="social-vimeo"><a href="%s" %s>' . $this->glyphs['vimeo'] . '</a></li>',
182
  ),
183
  'youtube' => array(
184
  'label' => __( 'YouTube URI', 'simple-social-icons' ),
185
- 'pattern' => '<li class="social-youtube"><a href="%s" %s>' . $this->glyphs['youtube'] . '</a></li>',
186
  ),
187
  ) );
188
 
@@ -425,7 +425,8 @@ class Simple_Social_Icons_Widget extends WP_Widget {
425
  /** The CSS to output */
426
  $css = '
427
  .simple-social-icons ul li a,
428
- .simple-social-icons ul li a:hover {
 
429
  background-color: ' . $instance['background_color'] . ' !important;
430
  border-radius: ' . $instance['border_radius'] . 'px;
431
  color: ' . $instance['icon_color'] . ' !important;
@@ -434,10 +435,15 @@ class Simple_Social_Icons_Widget extends WP_Widget {
434
  padding: ' . $icon_padding . 'px;
435
  }
436
 
437
- .simple-social-icons ul li a:hover {
 
438
  background-color: ' . $instance['background_color_hover'] . ' !important;
439
  border-color: ' . $instance['border_color_hover'] . ' !important;
440
  color: ' . $instance['icon_color_hover'] . ' !important;
 
 
 
 
441
  }';
442
 
443
  /** Minify a bit */
6
  Author: Nathan Rice
7
  Author URI: http://www.nathanrice.net/
8
 
9
+ Version: 1.0.14
10
 
11
  Text Domain: simple-social-icons
12
  Domain Path: /languages
122
  $this->profiles = apply_filters( 'simple_social_default_profiles', array(
123
  'bloglovin' => array(
124
  'label' => __( 'Bloglovin URI', 'simple-social-icons' ),
125
+ 'pattern' => '<li class="social-bloglovin"><a href="%s" %s><span aria-hidden="true">' . $this->glyphs['bloglovin'] . '</span><span class="screen-reader-text">' . __( 'Bloglovin', 'simple-social-icons' ) . '</span></a></li>',
126
  ),
127
  'dribbble' => array(
128
  'label' => __( 'Dribbble URI', 'simple-social-icons' ),
129
+ 'pattern' => '<li class="social-dribbble"><a href="%s" %s><span aria-hidden="true">' . $this->glyphs['dribbble'] . '</span><span class="screen-reader-text">' . __( 'Dribbble', 'simple-social-icons' ) . '</span></a></li>',
130
  ),
131
  'email' => array(
132
  'label' => __( 'Email URI', 'simple-social-icons' ),
133
+ 'pattern' => '<li class="social-email"><a href="%s" %s><span aria-hidden="true">' . $this->glyphs['email'] . '</span><span class="screen-reader-text">' . __( 'Email', 'simple-social-icons' ) . '</span></a></li>',
134
  ),
135
  'facebook' => array(
136
  'label' => __( 'Facebook URI', 'simple-social-icons' ),
137
+ 'pattern' => '<li class="social-facebook"><a href="%s" %s><span aria-hidden="true">' . $this->glyphs['facebook'] . '</span><span class="screen-reader-text">' . __( 'Facebook', 'simple-social-icons' ) . '</span></a></li>',
138
  ),
139
  'flickr' => array(
140
  'label' => __( 'Flickr URI', 'simple-social-icons' ),
141
+ 'pattern' => '<li class="social-flickr"><a href="%s" %s><span aria-hidden="true">' . $this->glyphs['flickr'] . '</span><span class="screen-reader-text">' . __( 'Flickr', 'simple-social-icons' ) . '</span></a></li>',
142
  ),
143
  'github' => array(
144
  'label' => __( 'GitHub URI', 'simple-social-icons' ),
145
+ 'pattern' => '<li class="social-github"><a href="%s" %s><span aria-hidden="true">' . $this->glyphs['github'] . '</span><span class="screen-reader-text">' . __( 'GitHub', 'simple-social-icons' ) . '</span></a></li>',
146
  ),
147
  'gplus' => array(
148
  'label' => __( 'Google+ URI', 'simple-social-icons' ),
149
+ 'pattern' => '<li class="social-gplus"><a href="%s" %s><span aria-hidden="true">' . $this->glyphs['gplus'] . '</span><span class="screen-reader-text">' . __( 'Google+', 'simple-social-icons' ) . '</span></a></li>',
150
  ),
151
  'instagram' => array(
152
  'label' => __( 'Instagram URI', 'simple-social-icons' ),
153
+ 'pattern' => '<li class="social-instagram"><a href="%s" %s><span aria-hidden="true">' . $this->glyphs['instagram'] . '</span><span class="screen-reader-text">' . __( 'Instagram', 'simple-social-icons' ) . '</span></a></li>',
154
  ),
155
  'linkedin' => array(
156
  'label' => __( 'Linkedin URI', 'simple-social-icons' ),
157
+ 'pattern' => '<li class="social-linkedin"><a href="%s" %s><span aria-hidden="true">' . $this->glyphs['linkedin'] . '</span><span class="screen-reader-text">' . __( 'Linkedin', 'simple-social-icons' ) . '</span></a></li>',
158
  ),
159
  'pinterest' => array(
160
  'label' => __( 'Pinterest URI', 'simple-social-icons' ),
161
+ 'pattern' => '<li class="social-pinterest"><a href="%s" %s><span aria-hidden="true">' . $this->glyphs['pinterest'] . '</span><span class="screen-reader-text">' . __( 'Pinterest', 'simple-social-icons' ) . '</span></a></li>',
162
  ),
163
  'rss' => array(
164
  'label' => __( 'RSS URI', 'simple-social-icons' ),
165
+ 'pattern' => '<li class="social-rss"><a href="%s" %s><span aria-hidden="true">' . $this->glyphs['rss'] . '</span><span class="screen-reader-text">' . __( 'RSS', 'simple-social-icons' ) . '</span></a></li>',
166
  ),
167
  'stumbleupon' => array(
168
  'label' => __( 'StumbleUpon URI', 'simple-social-icons' ),
169
+ 'pattern' => '<li class="social-stumbleupon"><a href="%s" %s><span aria-hidden="true">' . $this->glyphs['stumbleupon'] . '</span><span class="screen-reader-text">' . __( 'StumbleUpon', 'simple-social-icons' ) . '</span></a></li>',
170
  ),
171
  'tumblr' => array(
172
  'label' => __( 'Tumblr URI', 'simple-social-icons' ),
173
+ 'pattern' => '<li class="social-tumblr"><a href="%s" %s><span aria-hidden="true">' . $this->glyphs['tumblr'] . '</span><span class="screen-reader-text">' . __( 'Tumblr', 'simple-social-icons' ) . '</span></a></li>',
174
  ),
175
  'twitter' => array(
176
  'label' => __( 'Twitter URI', 'simple-social-icons' ),
177
+ 'pattern' => '<li class="social-twitter"><a href="%s" %s><span aria-hidden="true">' . $this->glyphs['twitter'] . '</span><span class="screen-reader-text">' . __( 'Twitter', 'simple-social-icons' ) . '</span></a></li>',
178
  ),
179
  'vimeo' => array(
180
  'label' => __( 'Vimeo URI', 'simple-social-icons' ),
181
+ 'pattern' => '<li class="social-vimeo"><a href="%s" %s><span aria-hidden="true">' . $this->glyphs['vimeo'] . '</span><span class="screen-reader-text">' . __( 'Vimeo', 'simple-social-icons' ) . '</span></a></li>',
182
  ),
183
  'youtube' => array(
184
  'label' => __( 'YouTube URI', 'simple-social-icons' ),
185
+ 'pattern' => '<li class="social-youtube"><a href="%s" %s><span aria-hidden="true">' . $this->glyphs['youtube'] . '</span><span class="screen-reader-text">' . __( 'YouTube', 'simple-social-icons' ) . '</span></a></li>',
186
  ),
187
  ) );
188
 
425
  /** The CSS to output */
426
  $css = '
427
  .simple-social-icons ul li a,
428
+ .simple-social-icons ul li a:hover,
429
+ .simple-social-icons ul li a:focus {
430
  background-color: ' . $instance['background_color'] . ' !important;
431
  border-radius: ' . $instance['border_radius'] . 'px;
432
  color: ' . $instance['icon_color'] . ' !important;
435
  padding: ' . $icon_padding . 'px;
436
  }
437
 
438
+ .simple-social-icons ul li a:hover,
439
+ .simple-social-icons ul li a:focus {
440
  background-color: ' . $instance['background_color_hover'] . ' !important;
441
  border-color: ' . $instance['border_color_hover'] . ' !important;
442
  color: ' . $instance['icon_color_hover'] . ' !important;
443
+ }
444
+
445
+ .simple-social-icons ul li a:focus {
446
+ outline: 1px dotted ' . $instance['background_color_hover'] . ' !important;
447
  }';
448
 
449
  /** Minify a bit */