iod/page-assist
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add aria-labels for accessibility in PlaygroundMessage component

Browse Source
This commit is contained in:
n4ze3m 2025-01-11 23:44:43 +05:30
parent 867204604b
commit 84e123bf38
1 changed files with 7 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/Common/Playground/Message.tsx
View File

@ -169,6 +169,7 @@ export const PlaygroundMessage = (props: Props) => {
{props.isTTSEnabled && ( {props.isTTSEnabled && (
<Tooltip title={t("tts")}> <Tooltip title={t("tts")}>
<button <button
aria-label={t("tts")}
onClick={() => { onClick={() => {
if (isSpeaking) { if (isSpeaking) {
cancel() cancel()
@ -192,6 +193,7 @@ export const PlaygroundMessage = (props: Props) => {
{!props.hideCopy && ( {!props.hideCopy && (
<Tooltip title={t("copyToClipboard")}> <Tooltip title={t("copyToClipboard")}>
<button <button
aria-label={t("copyToClipboard")}
onClick={() => { onClick={() => {
navigator.clipboard.writeText(props.message) navigator.clipboard.writeText(props.message)
setIsBtnPressed(true) setIsBtnPressed(true)
@ -217,7 +219,9 @@ export const PlaygroundMessage = (props: Props) => {
/> />
} }
title={t("generationInfo")}> title={t("generationInfo")}>
<button className="flex items-center justify-center w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"> <button
aria-label={t("generationInfo")}
className="flex items-center justify-center w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
<InfoIcon className="w-3 h-3 text-gray-400 group-hover:text-gray-500" /> <InfoIcon className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
</button> </button>
</Popover> </Popover>
@ -227,6 +231,7 @@ export const PlaygroundMessage = (props: Props) => {
props.currentMessageIndex === props.totalMessages - 1 && ( props.currentMessageIndex === props.totalMessages - 1 && (
<Tooltip title={t("regenerate")}> <Tooltip title={t("regenerate")}>
<button <button
aria-label={t("regenerate")}
onClick={props.onRengerate} onClick={props.onRengerate}
className="flex items-center justify-center w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"> className="flex items-center justify-center w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
<RotateCcw className="w-3 h-3 text-gray-400 group-hover:text-gray-500" /> <RotateCcw className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
@ -239,6 +244,7 @@ export const PlaygroundMessage = (props: Props) => {
<Tooltip title={t("edit")}> <Tooltip title={t("edit")}>
<button <button
onClick={() => setEditMode(true)} onClick={() => setEditMode(true)}
aria-label={t("edit")}
className="flex items-center justify-center w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"> className="flex items-center justify-center w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
<Pen className="w-3 h-3 text-gray-400 group-hover:text-gray-500" /> <Pen className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
</button> </button>