Skip to content

Commit b65fcbc

Browse files
reakaleekreakaleek
committed
Add aria-label
1 parent 7f000bf commit b65fcbc

File tree

2 files changed

+23
-19
lines changed

2 files changed

+23
-19
lines changed

‎src/Elastic.Markdown/Myst/Roles/Kbd/Kbd.cs‎

Lines changed: 20 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,10 @@ public static string Render(KeyboardShortcut shortcut)
5959
var kbdElements = viewModels.Select(viewModel =>
6060
{
6161
var sb = new StringBuilder();
62-
_ = sb.Append("<kbd class=\"kbd\">");
62+
_ = sb.Append("<kbd class=\"kbd\"");
63+
if (viewModel.AriaLabel is not null)
64+
_ = sb.Append(" aria-label=\"" + viewModel.AriaLabel + "\"");
65+
_ = sb.Append('>');
6366
if (viewModel.UnicodeIcon is not null)
6467
_ = sb.Append($"<span class=\"kbd-icon\">{viewModel.UnicodeIcon}</span>");
6568
_ = sb.Append(viewModel.DisplayText);
@@ -77,31 +80,31 @@ private static KeyboardKeyViewModel GetDisplayModel(NamedKeyboardKey key) =>
7780
key switch
7881
{
7982
// Modifier keys with special symbols
80-
NamedKeyboardKey.Command => new KeyboardKeyViewModel { DisplayText = "Cmd", UnicodeIcon = "⌘" },
83+
NamedKeyboardKey.Command => new KeyboardKeyViewModel { DisplayText = "Cmd", UnicodeIcon = "⌘", AriaLabel = "Command" },
8184
NamedKeyboardKey.Shift => new KeyboardKeyViewModel { DisplayText = "Shift", UnicodeIcon = "⇧" },
82-
NamedKeyboardKey.Ctrl => new KeyboardKeyViewModel { DisplayText = "Ctrl", UnicodeIcon = "⌃" },
85+
NamedKeyboardKey.Ctrl => new KeyboardKeyViewModel { DisplayText = "Ctrl", UnicodeIcon = "⌃", AriaLabel = "Control" },
8386
NamedKeyboardKey.Alt => new KeyboardKeyViewModel { DisplayText = "Alt", UnicodeIcon = "⌥" },
84-
NamedKeyboardKey.Option => new KeyboardKeyViewModel { DisplayText = "Option", UnicodeIcon = "⌥" },
85-
NamedKeyboardKey.Win => new KeyboardKeyViewModel { DisplayText = "Win", UnicodeIcon = "⊞" },
87+
NamedKeyboardKey.Option => new KeyboardKeyViewModel { DisplayText = "Opt", UnicodeIcon = "⌥", AriaLabel = "Option" },
88+
NamedKeyboardKey.Win => new KeyboardKeyViewModel { DisplayText = "Win", UnicodeIcon = "⊞", AriaLabel = "Windows" },
8689
// Directional keys
87-
NamedKeyboardKey.Up => new KeyboardKeyViewModel { DisplayText = "Up", UnicodeIcon = "↑" },
88-
NamedKeyboardKey.Down => new KeyboardKeyViewModel { DisplayText = "Down", UnicodeIcon = "↓" },
89-
NamedKeyboardKey.Left => new KeyboardKeyViewModel { DisplayText = "Left", UnicodeIcon = "←" },
90-
NamedKeyboardKey.Right => new KeyboardKeyViewModel { DisplayText = "Right", UnicodeIcon = "→" },
90+
NamedKeyboardKey.Up => new KeyboardKeyViewModel { DisplayText = "Up", UnicodeIcon = "↑", AriaLabel = "Up Arrow" },
91+
NamedKeyboardKey.Down => new KeyboardKeyViewModel { DisplayText = "Down", UnicodeIcon = "↓", AriaLabel = "Down Arrow" },
92+
NamedKeyboardKey.Left => new KeyboardKeyViewModel { DisplayText = "Left", UnicodeIcon = "←", AriaLabel = "Left Arrow" },
93+
NamedKeyboardKey.Right => new KeyboardKeyViewModel { DisplayText = "Right", UnicodeIcon = "→", AriaLabel = "Right Arrow" },
9194
// Other special keys with symbols
9295
NamedKeyboardKey.Enter => new KeyboardKeyViewModel { DisplayText = "Enter", UnicodeIcon = "↵" },
93-
NamedKeyboardKey.Escape => new KeyboardKeyViewModel { DisplayText = "Esc", UnicodeIcon = "⎋" },
94-
NamedKeyboardKey.Tab => new KeyboardKeyViewModel { DisplayText = "Tab", UnicodeIcon = "↹" },
96+
NamedKeyboardKey.Escape => new KeyboardKeyViewModel { DisplayText = "Esc", UnicodeIcon = "⎋", AriaLabel = "Escape" },
97+
NamedKeyboardKey.Tab => new KeyboardKeyViewModel { DisplayText = "Tab", UnicodeIcon = "↹", AriaLabel = "Tab" },
9598
NamedKeyboardKey.Backspace => new KeyboardKeyViewModel { DisplayText = "Backspace", UnicodeIcon = "⌫" },
96-
NamedKeyboardKey.Delete => new KeyboardKeyViewModel { DisplayText = "Del", UnicodeIcon = null },
99+
NamedKeyboardKey.Delete => new KeyboardKeyViewModel { DisplayText = "Del", UnicodeIcon = null, AriaLabel = "Delete" },
97100
NamedKeyboardKey.Home => new KeyboardKeyViewModel { DisplayText = "Home", UnicodeIcon = "⇱" },
98101
NamedKeyboardKey.End => new KeyboardKeyViewModel { DisplayText = "End", UnicodeIcon = "⇲" },
99-
NamedKeyboardKey.PageUp => new KeyboardKeyViewModel { DisplayText = "PageUp", UnicodeIcon = "⇞" },
100-
NamedKeyboardKey.PageDown => new KeyboardKeyViewModel { DisplayText = "PageDown", UnicodeIcon = "⇟" },
102+
NamedKeyboardKey.PageUp => new KeyboardKeyViewModel { DisplayText = "PageUp", UnicodeIcon = "⇞", AriaLabel = "Page Up" },
103+
NamedKeyboardKey.PageDown => new KeyboardKeyViewModel { DisplayText = "PageDown", UnicodeIcon = "⇟", AriaLabel = "Page Down" },
101104
NamedKeyboardKey.Space => new KeyboardKeyViewModel { DisplayText = "Space", UnicodeIcon = "␣" },
102-
NamedKeyboardKey.Insert => new KeyboardKeyViewModel { DisplayText = "Ins", UnicodeIcon = null },
105+
NamedKeyboardKey.Insert => new KeyboardKeyViewModel { DisplayText = "Ins", UnicodeIcon = null, AriaLabel = "Insert" },
103106
NamedKeyboardKey.Plus => new KeyboardKeyViewModel { DisplayText = "+", UnicodeIcon = null },
104-
NamedKeyboardKey.Fn => new KeyboardKeyViewModel { DisplayText = "Fn", UnicodeIcon = null },
107+
NamedKeyboardKey.Fn => new KeyboardKeyViewModel { DisplayText = "Fn", UnicodeIcon = null, AriaLabel = "Fn" },
105108
NamedKeyboardKey.F1 => new KeyboardKeyViewModel { DisplayText = "F1", UnicodeIcon = null },
106109
NamedKeyboardKey.F2 => new KeyboardKeyViewModel { DisplayText = "F2", UnicodeIcon = null },
107110
NamedKeyboardKey.F3 => new KeyboardKeyViewModel { DisplayText = "F3", UnicodeIcon = null },
@@ -186,4 +189,5 @@ public record KeyboardKeyViewModel
186189
{
187190
public required string? UnicodeIcon { get; init; }
188191
public required string DisplayText { get; init; }
192+
public string? AriaLabel { get; init; }
189193
}

‎tests/authoring/Inline/KbdRole.fs‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ type ``renders single kbd role`` () =
1414
[<Fact>]
1515
let ``validate HTML`` () =
1616
markdown |> convertsToHtml """
17-
<p><kbd class="kbd"><span class="kbd-icon">⌘</span>Cmd</kbd></p>
17+
<p><kbd class="kbd" aria-label="Command"><span class="kbd-icon">⌘</span>Cmd</kbd></p>
1818
"""
1919

2020
type ``renders single character kbd role`` () =
@@ -34,7 +34,7 @@ type ``renders combined kbd role`` () =
3434
[<Fact>]
3535
let ``validate HTML`` () =
3636
markdown |> convertsToHtml """
37-
<p><kbd class="kbd"><span class="kbd-icon">⌘</span>Cmd</kbd> + <kbd class="kbd"><span class="kbd-icon">⇧</span>Shift</kbd> + <kbd class="kbd">c</kbd></p>
37+
<p><kbd class="kbd" aria-label="Command"><span class="kbd-icon">⌘</span>Cmd</kbd> + <kbd class="kbd"><span class="kbd-icon">⇧</span>Shift</kbd> + <kbd class="kbd">c</kbd></p>
3838
"""
3939

4040
type ``renders combined kbd role with special characters`` () =
@@ -44,5 +44,5 @@ type ``renders combined kbd role with special characters`` () =
4444
[<Fact>]
4545
let ``validate HTML`` () =
4646
markdown |> convertsToHtml """
47-
<p><kbd class="kbd"><span class="kbd-icon">⌃</span>Ctrl</kbd> + <kbd class="kbd"><span class="kbd-icon">⌥</span>Alt</kbd> + <kbd class="kbd">Del</kbd></p>
47+
<p><kbd class="kbd" aria-label="Control"><span class="kbd-icon">⌃</span>Ctrl</kbd> + <kbd class="kbd"><span class="kbd-icon">⌥</span>Alt</kbd> + <kbd class="kbd" aria-label="Delete">Del</kbd></p>
4848
"""

0 commit comments

Comments
 (0)