mirror of
https://github.com/eliasstepanik/strudel-docker.git
synced 2026-01-26 21:18:49 +00:00
Screenreader improvements (#1158)
* hide ascii art for screen readers * aria-labels for minirepl buttons
This commit is contained in:
parent
b75561e3c7
commit
2d320c459b
@ -120,6 +120,7 @@ export function MiniRepl({
|
|||||||
'cursor-pointer w-16 flex items-center justify-center p-1 border-r border-lineHighlight text-foreground bg-lineHighlight hover:bg-background',
|
'cursor-pointer w-16 flex items-center justify-center p-1 border-r border-lineHighlight text-foreground bg-lineHighlight hover:bg-background',
|
||||||
started ? 'animate-pulse' : '',
|
started ? 'animate-pulse' : '',
|
||||||
)}
|
)}
|
||||||
|
aria-label={started ? 'stop' : 'play'}
|
||||||
onClick={() => editorRef.current?.toggle()}
|
onClick={() => editorRef.current?.toggle()}
|
||||||
>
|
>
|
||||||
<Icon type={started ? 'stop' : 'play'} />
|
<Icon type={started ? 'stop' : 'play'} />
|
||||||
@ -129,6 +130,7 @@ export function MiniRepl({
|
|||||||
'w-16 flex items-center justify-center p-1 text-foreground border-lineHighlight bg-lineHighlight',
|
'w-16 flex items-center justify-center p-1 text-foreground border-lineHighlight bg-lineHighlight',
|
||||||
isDirty ? 'text-foreground hover:bg-background cursor-pointer' : 'opacity-50 cursor-not-allowed',
|
isDirty ? 'text-foreground hover:bg-background cursor-pointer' : 'opacity-50 cursor-not-allowed',
|
||||||
)}
|
)}
|
||||||
|
aria-label="update"
|
||||||
onClick={() => editorRef.current?.evaluate()}
|
onClick={() => editorRef.current?.evaluate()}
|
||||||
>
|
>
|
||||||
<Icon type="refresh" />
|
<Icon type="refresh" />
|
||||||
@ -140,6 +142,7 @@ export function MiniRepl({
|
|||||||
className={
|
className={
|
||||||
'cursor-pointer w-16 flex items-center justify-center p-1 border-r border-lineHighlight text-foreground bg-lineHighlight hover:bg-background'
|
'cursor-pointer w-16 flex items-center justify-center p-1 border-r border-lineHighlight text-foreground bg-lineHighlight hover:bg-background'
|
||||||
}
|
}
|
||||||
|
aria-label="previous example"
|
||||||
onClick={() => changeTune(tuneIndex - 1)}
|
onClick={() => changeTune(tuneIndex - 1)}
|
||||||
>
|
>
|
||||||
<div className="rotate-180">
|
<div className="rotate-180">
|
||||||
@ -150,6 +153,7 @@ export function MiniRepl({
|
|||||||
className={
|
className={
|
||||||
'cursor-pointer w-16 flex items-center justify-center p-1 border-r border-lineHighlight text-foreground bg-lineHighlight hover:bg-background'
|
'cursor-pointer w-16 flex items-center justify-center p-1 border-r border-lineHighlight text-foreground bg-lineHighlight hover:bg-background'
|
||||||
}
|
}
|
||||||
|
aria-label="next example"
|
||||||
onClick={() => changeTune(tuneIndex + 1)}
|
onClick={() => changeTune(tuneIndex + 1)}
|
||||||
>
|
>
|
||||||
<Icon type="skip" />
|
<Icon type="skip" />
|
||||||
|
|||||||
@ -3,7 +3,7 @@ import cx from '@src/cx.mjs';
|
|||||||
export function ConsoleTab({ log }) {
|
export function ConsoleTab({ log }) {
|
||||||
return (
|
return (
|
||||||
<div id="console-tab" className="break-all px-4 dark:text-white text-stone-900 text-sm">
|
<div id="console-tab" className="break-all px-4 dark:text-white text-stone-900 text-sm">
|
||||||
<pre>{`███████╗████████╗██████╗ ██╗ ██╗██████╗ ███████╗██╗
|
<pre aria-hidden="true">{`███████╗████████╗██████╗ ██╗ ██╗██████╗ ███████╗██╗
|
||||||
██╔════╝╚══██╔══╝██╔══██╗██║ ██║██╔══██╗██╔════╝██║
|
██╔════╝╚══██╔══╝██╔══██╗██║ ██║██╔══██╗██╔════╝██║
|
||||||
███████╗ ██║ ██████╔╝██║ ██║██║ ██║█████╗ ██║
|
███████╗ ██║ ██████╔╝██║ ██║██║ ██║█████╗ ██║
|
||||||
╚════██║ ██║ ██╔══██╗██║ ██║██║ ██║██╔══╝ ██║
|
╚════██║ ██║ ██╔══██╗██║ ██║██║ ██║██╔══╝ ██║
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user