Code Block

[wartburggraaf]

We willen graag meer leren over de Code Block component. In welke vorm, of vormen, wordt deze momenteel ingezet en toegepast binnen jouw organisatie?

Deel hieronder een link naar Figma, Storybook, Github of screenshots. Met deze informatie kunnen we bewijzen dat de component onderdeel moet worden van de NL Design System component library.

Daarnaast wordt het delen van onderzoek gewaardeerd. Dus heb je zelf onderzoek gedaan en zijn er inzichten voor dit component? Dan horen we dit ook graag!

Link naar bericht in Slack

---

Naam

Code Block

Doel

Blok met één of meerdere regels computercode.

Gerelateerde componenten

Code

Richtlijnen

Acceptatiecriteria: NL Design System Acceptatiecriteria voor Code Block

Onderzoek

Poll over gedrag van Code Block kleurstelling bij Light of Dark mode - Mastodon

[jeffreylauwers]

Utrecht

• Storybook
• Github

---

Screenshots / Varianten

Storybook

Default
Markup with the <pre> and <code> elements. Styling via utrecht-code-block class name.
Only using the <pre> element for markup is semantically ambiguous, it is clearer to use <pre><code>...</code></pre>.

---

Notities

• Via 'Element' property kan er gekozen worden voor div of pre.
• Lichtgrijze achtergrondkleur.

[jeffreylauwers]

Atlassian

Documentatie website

---

Screenshots / Varianten

Documentatie website

Default
A code block highlights an entire block of code and keeps the formatting.

Line numbers
You can display a code block with or without line numbers. Line numbers are included by default.

---

Notities

• Onder de naam 'Code block'
• Lichtgrijze, transparent, achtergrond kleur. Subtiel afgeronde hoekjes.
• Veel varianten beschikbaar. Naast bovenstaande ook de mogelijkheid om maar bepaalde regelnummers te tonen, regels van een 'highlight' te voorzien en om lange regels code te wrappen.

[jeffreylauwers]

IBM

Documentatie website

---

Screenshots / Varianten

Documentatie website

Code snippet - 'Multiline'
Code snippets are strings or small blocks of reusable code that can be copied and inserted in a code file.

---

Notities

• Onder de naam 'Code snippet' als variant 'Multiline'.
• Lichtgrijze achtergrond kleur. Geen afgeronde hoekjes.
• Optie rechtsboven om code te kopieren.
• Optie rechtsonder om meer code te tonen.

[jeffreylauwers]

GitHub

Documentatie website

---

Screenshots / Varianten

Documentatie website

---

Notities

• Onder de naam 'Code block' beschikbaar als typografisch element
• Zie ook de code weergave die binnen Github zelf gebruikt wordt (bijvoorbeeld op de React pagina). Daar wordt een Code block net even anders weergegeven (lichtgrijze achtergrond, kleur en kopier optie). Dit is niet terug te vinden als component.

[jeffreylauwers]

NL Design System

Documentatie website

---

Screenshots / Varianten

Documentatie website

Op de documentatie website van NL Design Sytem gebruiken we de Code component van Utrecht.

Default

Als onderdeel van een voorbeeld. Met daarbij een 'Toon/Verberg' optie en de mogelijkheid om de code te kopieren.

---

Code heeft onderscheidende kleuren.

[jeffreylauwers]

✨ Dit component is nu Help Wanted ✨

Help je mee hem door de Community stappen te krijgen?
Code block op het Community bord

[jeffreylauwers]

✨ Dit component is nu Community ✨

Help je mee hem door de Candidate stappen te krijgen?
Code Block op het Candidate bord

[rianrietveld]

@jeffreylauwers
Leesvoer van Eric Meyer: https://meyerweb.com/eric/thoughts/2022/12/29/styling-a-pre-that-contains-a-code/

[jeffreylauwers]

He :has() a point... sorry 😉.

@matijs en @Robbert wat denken jullie? Slim om dit voor de Candidate component te implementeren?

[hidde]

In sommige code blocks is horizontale scroll nodig omdat niet alle code binnen de beschikbare ruimte past.

Bij die code blocks is het voor 2.1.1 Toetsenbord essentieel dat dit scrollen ook met alleen een toetsenbord kan worden gedaan. Dat kan alleen als het element focusbaar is.

Op dit moment maakt alleen Firefox elementen met overflow focusbaar, Chromium werkt eraan en van Safari/Webkit is de status onbekend.

Er is een oplossing, namelijk het toevoegen van tabindex=0 aan code blocks, zo wordt het element focusbaar zonder de tabvolgorde te beïnvloeden. Maar zomaar een focusbaar element is onverwacht gedrag voor gebruikers, voorstel is om dus role=region toe te voegen alsmede een toegankelijke naam. Op de NL Design System site hebben we dit al gedaan (zie #1726 en nl-design-system/documentatie#1735).

Liefst ook met een observer die zorgt dat de tabindex er alleen is wanneer het element daadwerkelijk scrollbaar is (hetgeen kan veranderen bij resize, vandaar de noodzaak voor iets dat kan observeren).

De combo van observed tabindex, region role en acc name doen ze bij o.a. Astro docs en bij GOV.UK Design System.

Zie ook:

• Keyboard only scrolling areas van Adrian Roselli
• Keyboard focusable scrollers van Chrome blog (zou er op moment van schrijven vanaf Chromium 132 in moeten zitten; getest met Canary 132, waar dat op dit moment inderdaad zo is)