Allow keyboard to activate permalink (#1162)

* Allow keyboard to activate permalink

* Change permalink icon with Blendify's suggestion

* Set permalink icon properly across Sphinx versions

* Match prior style better

Author: jonels-msft

sphinx_rtd_theme/__init__.py

@@ -55,4 +55,10 @@ def setup(app):
         app.add_message_catalog('sphinx', rtd_locale_path)
         app.connect('config-inited', config_initiated)
 
+    # sphinx emits the permalink icon for headers, so choose one more in keeping with our theme
+    if sphinx_version >= (3, 5, 0):
+        app.config.html_permalinks_icon = "\uf0c1"
+    else:
+        app.config.html_add_permalinks = "\uf0c1"
+
     return {'parallel_read_safe': True, 'parallel_write_safe': True}

src/sass/_theme_rst.sass

@@ -200,14 +200,15 @@
   // This is the #href that shows up on hover. Sphinx's is terrible so I hack it away.
   h1, h2, h3, h4, h5, h6, dl dt, p.caption, table > caption, .code-block-caption
     .headerlink
-      visibility: hidden
+      opacity: 0
       font-size: 14px
+      font-family: FontAwesome
+      margin-left: 0.5em
       @extend .fa
-      &:after
-        content: "\f0c1"
-        font-family: FontAwesome
-    &:hover .headerlink:after
-      visibility: visible
+      &:focus
+        opacity: 1
+    &:hover .headerlink
+      opacity: 1
 
   // override the Wyrm accessibility anti-pattern of hiding button focus
   .btn:focus