Enable focus + keyboard scroll on Markdown code blocks #2566

colinrotherham · 2023-01-30T19:58:12Z

This PR consolidates styling between <pre> and <code>

All code blocks can now receive focus and scroll with keyboard left/right arrows

netlify · 2023-01-30T19:59:11Z

✅ You can preview this change here:

Name	Link
🔨 Latest commit	`b860e15`
🔍 Latest deploy log	https://app.netlify.com/sites/govuk-design-system-preview/deploys/63f62a817167070008fad578
😎 Deploy Preview	https://deploy-preview-2566--govuk-design-system-preview.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

colinrotherham · 2023-01-30T20:06:00Z

src/javascripts/application.js

@@ -37,7 +37,7 @@ nodeListForEach($tabs, function ($tabs) {
 OptionsTable.init()

 // Add copy to clipboard to code blocks inside tab containers
-var $codeBlocks = document.querySelectorAll('[data-module="app-copy"]')
+var $codeBlocks = document.querySelectorAll('[data-module="app-copy"] pre')


We now render code through Markdown so I've moved data-module to the wrapper, otherwise every code block on every page will get an unintentional Copy code button

colinrotherham · 2023-01-30T20:07:08Z

src/stylesheets/components/_tabs.scss

-  margin-bottom: 0;
-  padding: 0;
-  border: $govuk-focus-width solid transparent;
+.app-tabs__container pre code {


Newer highlight.js updates revealed we should scroll <code> not <pre>

Fix background color bug with scrolling content; fixes #454 highlightjs/highlight.js#496

Add support for inline code highlighting highlightjs/highlight.js#3180

colinrotherham · 2023-01-30T20:14:19Z

src/stylesheets/main.scss

+  font-size: 16px;
+  @include govuk-responsive-margin(4, "bottom");
+
+  &:focus {


I've moved the focus styles from .app-tabs__container pre so all blocks are consistent:

Before

No keyboard focus or scroll

After

36degrees

One comment that could do with being updated, but otherwise looks good to me. Good catch updating the code blocks in 'Updating your code' too 👍🏻

36degrees · 2023-02-21T16:20:53Z

lib/marked-renderer.js

+ * Custom markdown renderer that avoids wrapping `<img>` image
+ * tags (or code with syntax highlighting) in `<p>` paragraphs


This isn't quite right any more – as far as I know the code method has nothing to do with avoiding the code blocks being wrapped in paragraphs?

Suggest either adding comment blocks to the individual methods or changing to something like:

Suggested change

* Custom markdown renderer that avoids wrapping `<img>` image

* tags (or code with syntax highlighting) in `<p>` paragraphs

* Custom markdown renderer that:

* - avoids wrapping `<img>` image tags in `<p>` paragraphs

* - adds tabindex="0" to code blocks so they can be focused and scrolled with

* the keyboard

Ahh let me dig into why I adjusted the comment

I found that "new lines" in code blocks were triggering another .code() call as "code within code"

The first .code() call gets <pre><code> and has a syntax language set
Subsequent .code() calls skip straight to .html() and don't have a syntax language

Hopefully it's something we fixed (or will fix) in:

Render all Nunjucks before Markdown runs #2565

Use Markdown to render all code blocks #2578

We might both be right

Yeah it was related new lines so the original comment has been moved to:

Use Markdown to render all code blocks #2578 (comment)

This PR ~~is now stacked on top and~~ adds the comment:

// Ensure code blocks can be focused and scrolled // with the keyboard via `tabindex="0"`

This change stops every Markdown-rendered code block (on every page) getting an unintentional “Copy code” button

colinrotherham · 2023-02-22T12:26:02Z

@36degrees I've adjusted the PR title to show that scrolling only works on Markdown-rendered code blocks

Code blocks rendered by Nunjucks won't scroll until this next one is merged:

Use Markdown to render all code blocks #2578

Hope that's alright

colinrotherham · 2023-02-22T14:40:39Z

lib/marked-renderer.js

+   */
+  code (code, language, isEscaped) {
+    return super.code(code, language, isEscaped)
+      .replace('<code', '<code tabindex="0"')


Ensure we add tabindex="0" to Markdown code blocks

This maintains keyboard focus + arrow key scrolling as added in:

Make code blocks scrollable using the keyboard #1351

Fixes issue where “inline code” styles (see `updating-your-code` how to guide) was conflicting Also consistent with `highlight.js` which now scrolls code not the preformatted text

colinrotherham added 🐛 bug Something isn't working the way it should (including incorrect wording in documentation) Frontend squad labels Jan 30, 2023

colinrotherham added this to Needs review 🔍 in Design System Sprint Board via automation Jan 30, 2023

colinrotherham commented Jan 30, 2023

View reviewed changes

Base automatically changed from markdown-render-order to main January 31, 2023 16:09

colinrotherham force-pushed the code-syntax-scrolling branch from b9857de to d3bcbcf Compare February 1, 2023 17:31

colinrotherham changed the title ~~Render all code blocks using Markdown to avoid bug~~ Move code keyboard focus/scroll to <code> not <pre> Feb 1, 2023

colinrotherham force-pushed the code-syntax-scrolling branch from d3bcbcf to 193f37f Compare February 1, 2023 18:26

colinrotherham changed the title ~~Move code keyboard focus/scroll to <code> not <pre>~~ Enable focus + keyboard scroll on all code blocks Feb 1, 2023

kellylee-gds removed the Frontend squad label Feb 2, 2023

colinrotherham mentioned this pull request Feb 9, 2023

Use highlight.js (server-side) code syntax highlighting alphagov/govuk-frontend#3224

Merged

colinrotherham added the Enhancement: feature-request User requests a new feature label Feb 15, 2023

36degrees self-requested a review February 21, 2023 14:18

36degrees approved these changes Feb 21, 2023

View reviewed changes

colinrotherham force-pushed the code-syntax-scrolling branch 2 times, most recently from a6431f8 to 9fa400b Compare February 21, 2023 20:52

colinrotherham changed the base branch from main to code-syntax-markdown February 21, 2023 21:40

colinrotherham force-pushed the code-syntax-scrolling branch from 9fa400b to 957a022 Compare February 21, 2023 21:41

Move “Copy code” data-module to wrapper

5adf3ab

This change stops every Markdown-rendered code block (on every page) getting an unintentional “Copy code” button

colinrotherham force-pushed the code-syntax-markdown branch from e70e622 to cbb6f8b Compare February 22, 2023 11:49

colinrotherham force-pushed the code-syntax-scrolling branch from 957a022 to 24b5e99 Compare February 22, 2023 11:50

colinrotherham changed the base branch from code-syntax-markdown to main February 22, 2023 12:16

colinrotherham force-pushed the code-syntax-scrolling branch from 24b5e99 to ca027d6 Compare February 22, 2023 12:17

colinrotherham changed the title ~~Enable focus + keyboard scroll on all code blocks~~ Enable focus + keyboard scroll on Markdown code blocks Feb 22, 2023

colinrotherham mentioned this pull request Feb 22, 2023

Use Markdown to render all code blocks #2578

Merged

colinrotherham commented Feb 22, 2023

View reviewed changes

colinrotherham added 2 commits February 22, 2023 14:43

Move code block styling to <code> not <pre>

1500721

Fixes issue where “inline code” styles (see `updating-your-code` how to guide) was conflicting Also consistent with `highlight.js` which now scrolls code not the preformatted text

Enable focus + keyboard scroll on Markdown code blocks

b860e15

colinrotherham force-pushed the code-syntax-scrolling branch from ca027d6 to b860e15 Compare February 22, 2023 14:45

colinrotherham merged commit d6e001b into main Feb 22, 2023

colinrotherham deleted the code-syntax-scrolling branch February 22, 2023 14:50

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Enable focus + keyboard scroll on Markdown code blocks #2566

Enable focus + keyboard scroll on Markdown code blocks #2566

colinrotherham commented Jan 30, 2023 •

edited

Loading

netlify bot commented Jan 30, 2023 •

edited

Loading

colinrotherham Jan 30, 2023

colinrotherham Jan 30, 2023 •

edited

Loading

colinrotherham Jan 30, 2023

36degrees left a comment

36degrees Feb 21, 2023

colinrotherham Feb 21, 2023 •

edited

Loading

colinrotherham Feb 21, 2023 •

edited

Loading

colinrotherham commented Feb 22, 2023

colinrotherham Feb 22, 2023

		* Custom markdown renderer that avoids wrapping `<img>` image
		* tags (or code with syntax highlighting) in `<p>` paragraphs

- * Custom markdown renderer that avoids wrapping `<img>` image
- * tags (or code with syntax highlighting) in `<p>` paragraphs
+ * Custom markdown renderer that:
+ * - avoids wrapping `<img>` image tags in `<p>` paragraphs
+ * - adds tabindex="0" to code blocks so they can be focused and scrolled with
+ *   the keyboard

Enable focus + keyboard scroll on Markdown code blocks #2566

Enable focus + keyboard scroll on Markdown code blocks #2566

Conversation

colinrotherham commented Jan 30, 2023 • edited Loading

netlify bot commented Jan 30, 2023 • edited Loading

✅ You can preview this change here:

colinrotherham Jan 30, 2023

Choose a reason for hiding this comment

colinrotherham Jan 30, 2023 • edited Loading

Choose a reason for hiding this comment

colinrotherham Jan 30, 2023

Choose a reason for hiding this comment

Before

After

36degrees left a comment

Choose a reason for hiding this comment

36degrees Feb 21, 2023

Choose a reason for hiding this comment

colinrotherham Feb 21, 2023 • edited Loading

Choose a reason for hiding this comment

colinrotherham Feb 21, 2023 • edited Loading

Choose a reason for hiding this comment

colinrotherham commented Feb 22, 2023

colinrotherham Feb 22, 2023

Choose a reason for hiding this comment

colinrotherham commented Jan 30, 2023 •

edited

Loading

netlify bot commented Jan 30, 2023 •

edited

Loading

colinrotherham Jan 30, 2023 •

edited

Loading

colinrotherham Feb 21, 2023 •

edited

Loading

colinrotherham Feb 21, 2023 •

edited

Loading