Skip to content

Commit a2442cc

Browse files
authored
Update Markdown preview examples to include tabindex (#3330)
1 parent e3e29b0 commit a2442cc

File tree

3 files changed

+6
-5
lines changed

3 files changed

+6
-5
lines changed

app/components/primer/beta/markdown.rb

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
module Primer
44
module Beta
55
# Use `Markdown` to wrap markdown content.
6+
# @accessibility This component is purely presentational. Consumers should handle accessibility expectations, such as ensuring that an overflowing, scrollable code block or table is keyboard accessible.
67
class Markdown < Primer::Component
78
status :beta
89

previews/primer/beta/markdown_preview.rb

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -181,7 +181,7 @@ class MarkdownPreview < ViewComponent::Preview
181181
182182
<p>If a table is too wide, it should condense down and/or scroll horizontally.</p>
183183
184-
<table>
184+
<table tabindex="0">
185185
<thead>
186186
<tr>
187187
<th>Artist</th>
@@ -237,13 +237,13 @@ class MarkdownPreview < ViewComponent::Preview
237237
238238
<pre><code>var foo = \"bar\";</code></pre>
239239
240-
<pre><code>Long, single-line code blocks should not wrap. They should horizontally scroll if they are too long. This line should be long enough to demonstrate this.</code></pre>
240+
<pre tabindex="0"><code>Long, single-line code blocks should not wrap. They should horizontally scroll if they are too long. They should also have a tabindex=0 to ensure keyboard accessibility. This line should be long enough to demonstrate this.</code></pre>
241241
242-
<pre><code>var foo = \"The same thing is true for code with syntax highlighting. A single line of code should horizontally scroll if it is really long.\";</code></pre>
242+
<pre tabindex="0"><code>var foo = \"The same thing is true for code with syntax highlighting. A single line of code should horizontally scroll if it is really long.\";</code></pre>
243243
244244
<p>Inline code inside table cells should still be distinguishable.</p>
245245
246-
<table>
246+
<table tabindex="0">
247247
<thead>
248248
<tr>
249249
<th>Language</th>

static/info_arch.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14520,7 +14520,7 @@
1452014520
{
1452114521
"fully_qualified_name": "Primer::Beta::Markdown",
1452214522
"description": "Use `Markdown` to wrap markdown content.",
14523-
"accessibility_docs": null,
14523+
"accessibility_docs": "This component is purely presentational. Consumers should handle accessibility expectations, such as ensuring that an overflowing, scrollable code block or table is keyboard accessible.",
1452414524
"is_form_component": false,
1452514525
"is_published": true,
1452614526
"requires_js": false,

0 commit comments

Comments
 (0)