Screenreader improvements (#1158)
* hide ascii art for screen readers * aria-labels for minirepl buttons
This commit is contained in:
parent
b75561e3c7
commit
2d320c459b
2 changed files with 5 additions and 1 deletions
|
|
@ -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…
Add table
Add a link
Reference in a new issue