From ec41ce5b3a7c171abc4abcced86943bd9e44a3c9 Mon Sep 17 00:00:00 2001
From: yangdx <gzdaniel@me.com>
Date: Sun, 4 May 2025 23:23:56 +0800
Subject: [PATCH] Replaced Text components with standard labels associated via
 htmlFor/id to fix accessibility warnings.

---
 .../components/retrieval/QuerySettings.tsx    | 262 +++++++++++-------
 1 file changed, 161 insertions(+), 101 deletions(-)

diff --git a/lightrag_webui/src/components/retrieval/QuerySettings.tsx b/lightrag_webui/src/components/retrieval/QuerySettings.tsx
index b275a34a..723c1359 100644
--- a/lightrag_webui/src/components/retrieval/QuerySettings.tsx
+++ b/lightrag_webui/src/components/retrieval/QuerySettings.tsx
@@ -1,6 +1,6 @@
 import { useCallback } from 'react'
 import { QueryMode, QueryRequest } from '@/api/lightrag'
-import Text from '@/components/ui/Text'
+// Removed unused import for Text component
 import Input from '@/components/ui/Input'
 import Checkbox from '@/components/ui/Checkbox'
 import NumberInput from '@/components/ui/NumberInput'
@@ -13,6 +13,7 @@ import {
   SelectTrigger,
   SelectValue
 } from '@/components/ui/Select'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/Tooltip'
 import { useSettingsStore } from '@/stores/settings'
 import { useTranslation } from 'react-i18next'
 
@@ -35,17 +36,26 @@ export default function QuerySettings() {
           <div className="absolute inset-0 flex flex-col gap-2 overflow-auto px-2">
             {/* Query Mode */}
             <>
-              <Text
-                className="ml-1"
-                text={t('retrievePanel.querySettings.queryMode')}
-                tooltip={t('retrievePanel.querySettings.queryModeTooltip')}
-                side="left"
-              />
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <label htmlFor="query_mode_select" className="ml-1 cursor-help">
+                      {t('retrievePanel.querySettings.queryMode')}
+                    </label>
+                  </TooltipTrigger>
+                  <TooltipContent side="left">
+                    <p>{t('retrievePanel.querySettings.queryModeTooltip')}</p>
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
               <Select
                 value={querySettings.mode}
                 onValueChange={(v) => handleChange('mode', v as QueryMode)}
               >
-                <SelectTrigger className="hover:bg-primary/5 h-9 cursor-pointer focus:ring-0 focus:ring-offset-0 focus:outline-0 active:right-0">
+                <SelectTrigger
+                  id="query_mode_select"
+                  className="hover:bg-primary/5 h-9 cursor-pointer focus:ring-0 focus:ring-offset-0 focus:outline-0 active:right-0"
+                >
                   <SelectValue />
                 </SelectTrigger>
                 <SelectContent>
@@ -63,17 +73,26 @@ export default function QuerySettings() {
 
             {/* Response Format */}
             <>
-              <Text
-                className="ml-1"
-                text={t('retrievePanel.querySettings.responseFormat')}
-                tooltip={t('retrievePanel.querySettings.responseFormatTooltip')}
-                side="left"
-              />
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <label htmlFor="response_format_select" className="ml-1 cursor-help">
+                      {t('retrievePanel.querySettings.responseFormat')}
+                    </label>
+                  </TooltipTrigger>
+                  <TooltipContent side="left">
+                    <p>{t('retrievePanel.querySettings.responseFormatTooltip')}</p>
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
               <Select
                 value={querySettings.response_type}
                 onValueChange={(v) => handleChange('response_type', v)}
               >
-                <SelectTrigger className="hover:bg-primary/5 h-9 cursor-pointer focus:ring-0 focus:ring-offset-0 focus:outline-0 active:right-0">
+                <SelectTrigger
+                  id="response_format_select"
+                  className="hover:bg-primary/5 h-9 cursor-pointer focus:ring-0 focus:ring-offset-0 focus:outline-0 active:right-0"
+                >
                   <SelectValue />
                 </SelectTrigger>
                 <SelectContent>
@@ -88,16 +107,20 @@ export default function QuerySettings() {
 
             {/* Top K */}
             <>
-              <Text
-                className="ml-1"
-                text={t('retrievePanel.querySettings.topK')}
-                tooltip={t('retrievePanel.querySettings.topKTooltip')}
-                side="left"
-              />
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <label htmlFor="top_k" className="ml-1 cursor-help">
+                      {t('retrievePanel.querySettings.topK')}
+                    </label>
+                  </TooltipTrigger>
+                  <TooltipContent side="left">
+                    <p>{t('retrievePanel.querySettings.topKTooltip')}</p>
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
               <div>
-                <label htmlFor="top_k" className="sr-only">
-                  {t('retrievePanel.querySettings.topK')}
-                </label>
+                {/* Removed sr-only label */}
                 <NumberInput
                   id="top_k"
                   stepper={1}
@@ -112,16 +135,20 @@ export default function QuerySettings() {
             {/* Max Tokens */}
             <>
               <>
-                <Text
-                  className="ml-1"
-                  text={t('retrievePanel.querySettings.maxTokensTextUnit')}
-                  tooltip={t('retrievePanel.querySettings.maxTokensTextUnitTooltip')}
-                  side="left"
-                />
+                <TooltipProvider>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <label htmlFor="max_token_for_text_unit" className="ml-1 cursor-help">
+                        {t('retrievePanel.querySettings.maxTokensTextUnit')}
+                      </label>
+                    </TooltipTrigger>
+                    <TooltipContent side="left">
+                      <p>{t('retrievePanel.querySettings.maxTokensTextUnitTooltip')}</p>
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
                 <div>
-                  <label htmlFor="max_token_for_text_unit" className="sr-only">
-                    {t('retrievePanel.querySettings.maxTokensTextUnit')}
-                  </label>
+                  {/* Removed sr-only label */}
                   <NumberInput
                     id="max_token_for_text_unit"
                     stepper={500}
@@ -134,15 +161,20 @@ export default function QuerySettings() {
               </>
 
               <>
-                <Text
-                  text={t('retrievePanel.querySettings.maxTokensGlobalContext')}
-                  tooltip={t('retrievePanel.querySettings.maxTokensGlobalContextTooltip')}
-                  side="left"
-                />
+                <TooltipProvider>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <label htmlFor="max_token_for_global_context" className="ml-1 cursor-help">
+                        {t('retrievePanel.querySettings.maxTokensGlobalContext')}
+                      </label>
+                    </TooltipTrigger>
+                    <TooltipContent side="left">
+                      <p>{t('retrievePanel.querySettings.maxTokensGlobalContextTooltip')}</p>
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
                 <div>
-                  <label htmlFor="max_token_for_global_context" className="sr-only">
-                    {t('retrievePanel.querySettings.maxTokensGlobalContext')}
-                  </label>
+                  {/* Removed sr-only label */}
                   <NumberInput
                     id="max_token_for_global_context"
                     stepper={500}
@@ -155,16 +187,20 @@ export default function QuerySettings() {
               </>
 
               <>
-                <Text
-                  className="ml-1"
-                  text={t('retrievePanel.querySettings.maxTokensLocalContext')}
-                  tooltip={t('retrievePanel.querySettings.maxTokensLocalContextTooltip')}
-                  side="left"
-                />
+                <TooltipProvider>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <label htmlFor="max_token_for_local_context" className="ml-1 cursor-help">
+                        {t('retrievePanel.querySettings.maxTokensLocalContext')}
+                      </label>
+                    </TooltipTrigger>
+                    <TooltipContent side="left">
+                      <p>{t('retrievePanel.querySettings.maxTokensLocalContextTooltip')}</p>
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
                 <div>
-                  <label htmlFor="max_token_for_local_context" className="sr-only">
-                    {t('retrievePanel.querySettings.maxTokensLocalContext')}
-                  </label>
+                  {/* Removed sr-only label */}
                   <NumberInput
                     id="max_token_for_local_context"
                     stepper={500}
@@ -179,16 +215,20 @@ export default function QuerySettings() {
 
             {/* History Turns */}
             <>
-              <Text
-                className="ml-1"
-                text={t('retrievePanel.querySettings.historyTurns')}
-                tooltip={t('retrievePanel.querySettings.historyTurnsTooltip')}
-                side="left"
-              />
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <label htmlFor="history_turns" className="ml-1 cursor-help">
+                      {t('retrievePanel.querySettings.historyTurns')}
+                    </label>
+                  </TooltipTrigger>
+                  <TooltipContent side="left">
+                    <p>{t('retrievePanel.querySettings.historyTurnsTooltip')}</p>
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
               <div>
-                <label htmlFor="history_turns" className="sr-only">
-                  {t('retrievePanel.querySettings.historyTurns')}
-                </label>
+                {/* Removed sr-only label */}
                 <NumberInput
                   className="!border-input"
                   id="history_turns"
@@ -205,16 +245,20 @@ export default function QuerySettings() {
             {/* Keywords */}
             <>
               <>
-                <Text
-                  className="ml-1"
-                  text={t('retrievePanel.querySettings.hlKeywords')}
-                  tooltip={t('retrievePanel.querySettings.hlKeywordsTooltip')}
-                  side="left"
-                />
+                <TooltipProvider>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <label htmlFor="hl_keywords" className="ml-1 cursor-help">
+                        {t('retrievePanel.querySettings.hlKeywords')}
+                      </label>
+                    </TooltipTrigger>
+                    <TooltipContent side="left">
+                      <p>{t('retrievePanel.querySettings.hlKeywordsTooltip')}</p>
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
                 <div>
-                  <label htmlFor="hl_keywords" className="sr-only">
-                    {t('retrievePanel.querySettings.hlKeywords')}
-                  </label>
+                  {/* Removed sr-only label */}
                   <Input
                     id="hl_keywords"
                     type="text"
@@ -232,16 +276,20 @@ export default function QuerySettings() {
               </>
 
               <>
-                <Text
-                  className="ml-1"
-                  text={t('retrievePanel.querySettings.llKeywords')}
-                  tooltip={t('retrievePanel.querySettings.llKeywordsTooltip')}
-                  side="left"
-                />
+                <TooltipProvider>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <label htmlFor="ll_keywords" className="ml-1 cursor-help">
+                        {t('retrievePanel.querySettings.llKeywords')}
+                      </label>
+                    </TooltipTrigger>
+                    <TooltipContent side="left">
+                      <p>{t('retrievePanel.querySettings.llKeywordsTooltip')}</p>
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
                 <div>
-                  <label htmlFor="ll_keywords" className="sr-only">
-                    {t('retrievePanel.querySettings.llKeywords')}
-                  </label>
+                  {/* Removed sr-only label */}
                   <Input
                     id="ll_keywords"
                     type="text"
@@ -262,14 +310,18 @@ export default function QuerySettings() {
             {/* Toggle Options */}
             <>
               <div className="flex items-center gap-2">
-                <label htmlFor="only_need_context" className="flex-1">
-                  <Text
-                    className="ml-1"
-                    text={t('retrievePanel.querySettings.onlyNeedContext')}
-                    tooltip={t('retrievePanel.querySettings.onlyNeedContextTooltip')}
-                    side="left"
-                  />
-                </label>
+                <TooltipProvider>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <label htmlFor="only_need_context" className="flex-1 ml-1 cursor-help">
+                        {t('retrievePanel.querySettings.onlyNeedContext')}
+                      </label>
+                    </TooltipTrigger>
+                    <TooltipContent side="left">
+                      <p>{t('retrievePanel.querySettings.onlyNeedContextTooltip')}</p>
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
                 <Checkbox
                   className="mr-1 cursor-pointer"
                   id="only_need_context"
@@ -279,14 +331,18 @@ export default function QuerySettings() {
               </div>
 
               <div className="flex items-center gap-2">
-                <label htmlFor="only_need_prompt" className="flex-1">
-                  <Text
-                    className="ml-1"
-                    text={t('retrievePanel.querySettings.onlyNeedPrompt')}
-                    tooltip={t('retrievePanel.querySettings.onlyNeedPromptTooltip')}
-                    side="left"
-                  />
-                </label>
+                <TooltipProvider>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <label htmlFor="only_need_prompt" className="flex-1 ml-1 cursor-help">
+                        {t('retrievePanel.querySettings.onlyNeedPrompt')}
+                      </label>
+                    </TooltipTrigger>
+                    <TooltipContent side="left">
+                      <p>{t('retrievePanel.querySettings.onlyNeedPromptTooltip')}</p>
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
                 <Checkbox
                   className="mr-1 cursor-pointer"
                   id="only_need_prompt"
@@ -296,14 +352,18 @@ export default function QuerySettings() {
               </div>
 
               <div className="flex items-center gap-2">
-                <label htmlFor="stream" className="flex-1">
-                  <Text
-                    className="ml-1"
-                    text={t('retrievePanel.querySettings.streamResponse')}
-                    tooltip={t('retrievePanel.querySettings.streamResponseTooltip')}
-                    side="left"
-                  />
-                </label>
+                <TooltipProvider>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <label htmlFor="stream" className="flex-1 ml-1 cursor-help">
+                        {t('retrievePanel.querySettings.streamResponse')}
+                      </label>
+                    </TooltipTrigger>
+                    <TooltipContent side="left">
+                      <p>{t('retrievePanel.querySettings.streamResponseTooltip')}</p>
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
                 <Checkbox
                   className="mr-1 cursor-pointer"
                   id="stream"