fix: improve keyboard accessability for anchors and code blocks (#434)

exampleSite/static/custom.css.example

@@ -24,7 +24,9 @@
   --code-background: #f5f6f8;
   --code-accent-color: #e3e7eb;
   --code-accent-color-lite: #eff1f3;
+  --code-font-color: #5f5f5f;
 
+  --code-copy-background: #f5f6f8;
   --code-copy-font-color: #6b7784;
   --code-copy-border-color: #adb4bc;
   --code-copy-success-color: #00c853;
@@ -58,7 +60,9 @@
     --code-background: #f5f6f8;
     --code-accent-color: #e3e7eb;
     --code-accent-color-lite: #eff1f3;
+    --code-font-color: #5f5f5f;
 
+    --code-copy-background: #f5f6f8;
     --code-copy-font-color: #6b7784;
     --code-copy-border-color: #adb4bc;
     --code-copy-success-color: #00c853;
@@ -94,10 +98,12 @@
   --code-background: #2f353a;
   --code-accent-color: #262b2f;
   --code-accent-color-lite: #2b3035;
+  --code-font-color: #b9b9b9;
 
-  --code-copy-font-color: #adb4bc;
+  --code-copy-background: #343a40;
-  --code-copy-border-color: #808c98;
+  --code-copy-font-color: #6b7784;
-  --code-copy-success-color: #00c853;
+  --code-copy-border-color: #6b7784;
+  --code-copy-success-color: #37905c;
 
   --accent-color: #2b3035;
   --accent-color-lite: #2f353a;
@@ -128,10 +134,12 @@
     --code-background: #2f353a;
     --code-accent-color: #262b2f;
     --code-accent-color-lite: #2b3035;
+    --code-font-color: #b9b9b9;
 
-    --code-copy-font-color: #adb4bc;
+    --code-copy-background: #343a40;
-    --code-copy-border-color: #808c98;
+    --code-copy-font-color: #6b7784;
-    --code-copy-success-color: #00c853;
+    --code-copy-border-color: #6b7784;
+    --code-copy-success-color: #37905c;
 
     --accent-color: #2b3035;
     --accent-color-lite: #2f353a;

layouts/_default/_markup/render-heading.html

@@ -6,7 +6,7 @@
 <div class="gdoc-page__anchorwrap">
     <h{{ .Level }} id="{{ .Anchor | safeURL }}">
         {{ .Text | safeHTML }}
-        <a data-clipboard-text="{{ .Page.Permalink }}#{{ .Anchor | safeURL }}" class="gdoc-page__anchor gdoc-page__anchor--right clip" title="{{ i18n "title_anchor_prefix" }} {{ .Text | safeHTML }}" aria-label="{{ i18n "title_anchor_prefix" }} {{ .Text | safeHTML }}" href="#{{ .Anchor | safeURL }}">
+        <a data-clipboard-text="{{ .Page.Permalink }}#{{ .Anchor | safeURL }}" class="gdoc-page__anchor clip flex align-center" title="{{ i18n "title_anchor_prefix" }} {{ .Text | safeHTML }}" aria-label="{{ i18n "title_anchor_prefix" }} {{ .Text | safeHTML }}" href="#{{ .Anchor | safeURL }}">
             <svg class="gdoc-icon gdoc_link"><use xlink:href="#gdoc_link"></use></svg>
         </a>
     </h{{ .Level }}>

src/sass/_base.scss

@@ -412,23 +412,19 @@ svg.gdoc-icon {
   }
 
   &__anchor {
-    min-width: 30px;
+    margin-left: $padding-8;
-
-    &--left {
-      position: absolute;
-      margin-left: -25px;
-      text-align: left;
-    }
-
-    &--right {
-      text-align: right;
-    }
 
     svg.gdoc-icon {
-      width: 1.4rem;
+      width: 1.4em;
-      height: 1.4rem;
+      height: 1.4em;
       color: transparent;
     }
+
+    &:focus {
+      svg.gdoc-icon {
+        color: var(--control-icons);
+      }
+    }
   }
 
   &__footer {
@@ -523,11 +519,11 @@ svg.gdoc-icon {
     visibility: hidden;
     position: absolute;
     top: 0.5rem;
-    right: 0.5rem;
+    right: 1rem;
 
     border: $border-2 solid var(--code-copy-border-color);
     border-radius: $border-radius;
-    background: var(--code-background);
+    background: var(--code-copy-background);
     width: 2.2rem;
     height: 2.2rem;
 

src/sass/_chroma_base.scss

@@ -2,31 +2,6 @@
   .chroma {
     color: var(--code-font-color);
   }
-  .chroma code {
-    background-color: var(--code-background);
-    display: block;
-    line-height: 1.45em;
-    font-size: 0.85em;
-    border-radius: $border-radius;
-  }
-  .chroma .lntable {
-    max-height: var(--code-max-height);
-
-    code {
-      max-height: none;
-    }
-  }
-  .chroma .lntable td:first-child code {
-    border-radius: 0;
-    border-top-left-radius: $border-radius;
-    border-bottom-left-radius: $border-radius;
-  }
-  .chroma .lntable td:nth-child(2) code {
-    border-radius: 0;
-    border-top-right-radius: $border-radius;
-    border-bottom-right-radius: $border-radius;
-    padding-left: 0.5em;
-  }
   .chroma .lntable td:nth-child(2) code .hl {
     width: auto;
     margin-left: -0.5em;
@@ -34,36 +9,39 @@
   }
 
   .highlight {
-    overflow: auto;
-    max-height: var(--code-max-height);
-
     pre.chroma {
       margin: 0;
-    }
-
-    > pre.chroma code {
-      padding: 1rem;
       width: 100%;
-      overflow-x: auto;
+      overflow: auto;
+      max-height: var(--code-max-height);
     }
   }
 
   /* LineTable */
   .chroma .lntable {
+    border: $border-1 solid var(--code-accent-color);
+    border-radius: $border-radius;
     border-spacing: 0;
     padding: 0;
     margin: 0;
-    border: 0;
     width: 100%;
     display: block;
+    max-height: var(--code-max-height);
+    overflow: auto;
+
+    pre.chroma {
+      max-height: none;
+      border-radius: 0;
+    }
   }
-  .chroma .lntable td:first-child code {
+  .chroma .lntable td:first-child {
-    background-color: var(--code-accent-color-lite);
+    code {
-    border-right: $border-1 solid var(--code-accent-color);
+      background-color: var(--code-accent-color-lite);
-    padding: 0.5em 0;
+      border-right: $border-1 solid var(--code-accent-color);
-  }
+      padding-left: 0;
-  .chroma .lntable td code {
+      padding-right: 0;
-    padding: 0.5em 0;
+      border-radius: 0;
+    }
   }
   .chroma .lntable td:nth-child(2) {
     width: 100%;

src/sass/_color_mode.scss

@@ -13,10 +13,6 @@
   --link-color: #{$link-color};
   --link-color-visited: #{$link-color-visited};
 
-  --code-copy-font-color: #{lighten($body-font-color, 24)};
-  --code-copy-border-color: #{lighten($body-font-color, 48)};
-  --code-copy-success-color: #{map.get($hint-colors, "ok")};
-
   --accent-color: #{$gray-200};
   --accent-color-lite: #{$gray-100};
 
@@ -36,8 +32,7 @@
   .gdoc-markdown {
     .gdoc-hint,
     .gdoc-props__tag,
-    .admonitionblock,
+    .admonitionblock {
-    .gdoc-post__codecopy--success {
       filter: none;
     }
 
@@ -63,11 +58,6 @@
   --link-color: #{$link-color-dark};
   --link-color-visited: #{$link-color-visited-dark};
 
-  --code-background: #{$code-background-dark};
-  --code-accent-color: #{darken($code-background-dark, 4)};
-  --code-accent-color-lite: #{darken($code-background-dark, 2)};
-  --code-font-color: #{$code-font-color-dark};
-
   --accent-color: #{darken($body-background-dark, 4)};
   --accent-color-lite: #{darken($body-background-dark, 2)};
 
@@ -87,8 +77,7 @@
   .gdoc-markdown {
     .gdoc-hint,
     .gdoc-props__tag,
-    .admonitionblock,
+    .admonitionblock {
-    .gdoc-post__codecopy--success {
       filter: saturate(2.5) brightness(0.85);
     }
 
@@ -106,6 +95,11 @@
   --code-accent-color: #{darken($code-background-dark, 4)};
   --code-accent-color-lite: #{darken($code-background-dark, 2)};
   --code-font-color: #{$code-font-color-dark};
+
+  --code-copy-background: #{$body-background-dark};
+  --code-copy-font-color: #{lighten($body-font-color, 24)};
+  --code-copy-border-color: #{lighten($body-font-color, 24)};
+  --code-copy-success-color: #{scale-color(map.get($hint-colors, "ok"), $alpha: -55%)};
 }
 
 @mixin code_theme_light {
@@ -115,4 +109,9 @@
   --code-accent-color: #{darken($code-background, 6)};
   --code-accent-color-lite: #{darken($code-background, 2)};
   --code-font-color: #{$code-font-color};
+
+  --code-copy-background: #{$code-background};
+  --code-copy-font-color: #{lighten($body-font-color, 24)};
+  --code-copy-border-color: #{lighten($body-font-color, 48)};
+  --code-copy-success-color: #{map.get($hint-colors, "ok")};
 }

src/sass/_markdown.scss

@@ -184,13 +184,17 @@
     margin: 1rem 0;
   }
 
+  code {
+    padding: 0.2em 0.4em;
+  }
+
+  pre,
   code {
     background-color: var(--code-background);
     border-radius: $border-radius;
     color: var(--code-font-color);
-    font-size: 0.85em;
+    font-size: 0.85rem;
     line-height: 1.45em;
-    padding: 0.2em 0.4em;
   }
 
   pre code {

webpack.config.js

@@ -138,7 +138,7 @@ module.exports = (env, argv) => {
                 // FIXME: https://github.com/webpack-contrib/sass-loader/issues/962#issuecomment-1002675051
                 sourceMap: argv.mode === "development" ? true : false,
                 sourceMapEmbed: argv.mode === "development" ? true : false,
-                outputStyle: "compressed",
+                outputStyle: argv.mode === "development" ? "expanded" : "compressed",
                 includePaths: [nodeModulesPath]
               }
             }