From 46ffb6afa43a5885d5111564a62742612aff1683 Mon Sep 17 00:00:00 2001
From: yangdx <yangdx@znipower.com>
Date: Mon, 7 Apr 2025 05:20:12 +0800
Subject: [PATCH] fix: improve form accessibility with proper label
 associations

Added missing htmlFor attributes to labels and corresponding IDs to form elements throughout the web UI to enhance accessibility. This ensures screen readers can correctly identify form controls and improves browser autofill functionality. Changes include:

- Fixed label associations in login form
- Added proper IDs to form elements in Settings component
- Replaced decorative labels with semantic headings in PropertiesView
- Added screen reader accessible labels in RetrievalTesting
- Improved checkbox accessibility in QuerySettings
---
 .../src/components/graph/PropertiesView.tsx   |  16 +-
 .../src/components/graph/Settings.tsx         |  16 +-
 .../components/retrieval/QuerySettings.tsx    | 216 ++++++++++--------
 .../src/features/DocumentManager.tsx          |   8 +-
 .../src/features/RetrievalTesting.tsx         |  20 +-
 5 files changed, 168 insertions(+), 108 deletions(-)

diff --git a/lightrag_webui/src/components/graph/PropertiesView.tsx b/lightrag_webui/src/components/graph/PropertiesView.tsx
index 627049ea..3aa248de 100644
--- a/lightrag_webui/src/components/graph/PropertiesView.tsx
+++ b/lightrag_webui/src/components/graph/PropertiesView.tsx
@@ -184,9 +184,11 @@ const PropertyRow = ({
     return translation === translationKey ? name : translation
   }
 
+  // Since Text component uses a label internally, we'll use a span here instead of a label
+  // to avoid nesting labels which is not recommended for accessibility
   return (
     <div className="flex items-center gap-2">
-      <label className="text-primary/60 tracking-wide whitespace-nowrap">{getPropertyNameTranslation(name)}</label>:
+      <span className="text-primary/60 tracking-wide whitespace-nowrap">{getPropertyNameTranslation(name)}</span>:
       <Text
         className="hover:bg-primary/20 rounded p-1 overflow-hidden text-ellipsis"
         tooltipClassName="max-w-80"
@@ -213,7 +215,7 @@ const NodePropertiesView = ({ node }: { node: NodeType }) => {
   return (
     <div className="flex flex-col gap-2">
       <div className="flex justify-between items-center">
-        <label className="text-md pl-1 font-bold tracking-wide text-blue-700">{t('graphPanel.propertiesView.node.title')}</label>
+        <h3 className="text-md pl-1 font-bold tracking-wide text-blue-700">{t('graphPanel.propertiesView.node.title')}</h3>
         <div className="flex gap-3">
           <Button
             size="icon"
@@ -246,7 +248,7 @@ const NodePropertiesView = ({ node }: { node: NodeType }) => {
         />
         <PropertyRow name={t('graphPanel.propertiesView.node.degree')} value={node.degree} />
       </div>
-      <label className="text-md pl-1 font-bold tracking-wide text-amber-700">{t('graphPanel.propertiesView.node.properties')}</label>
+      <h3 className="text-md pl-1 font-bold tracking-wide text-amber-700">{t('graphPanel.propertiesView.node.properties')}</h3>
       <div className="bg-primary/5 max-h-96 overflow-auto rounded p-1">
         {Object.keys(node.properties)
           .sort()
@@ -256,9 +258,9 @@ const NodePropertiesView = ({ node }: { node: NodeType }) => {
       </div>
       {node.relationships.length > 0 && (
         <>
-          <label className="text-md pl-1 font-bold tracking-wide text-emerald-700">
+          <h3 className="text-md pl-1 font-bold tracking-wide text-emerald-700">
             {t('graphPanel.propertiesView.node.relationships')}
-          </label>
+          </h3>
           <div className="bg-primary/5 max-h-96 overflow-auto rounded p-1">
             {node.relationships.map(({ type, id, label }) => {
               return (
@@ -283,7 +285,7 @@ const EdgePropertiesView = ({ edge }: { edge: EdgeType }) => {
   const { t } = useTranslation()
   return (
     <div className="flex flex-col gap-2">
-      <label className="text-md pl-1 font-bold tracking-wide text-violet-700">{t('graphPanel.propertiesView.edge.title')}</label>
+      <h3 className="text-md pl-1 font-bold tracking-wide text-violet-700">{t('graphPanel.propertiesView.edge.title')}</h3>
       <div className="bg-primary/5 max-h-96 overflow-auto rounded p-1">
         <PropertyRow name={t('graphPanel.propertiesView.edge.id')} value={edge.id} />
         {edge.type && <PropertyRow name={t('graphPanel.propertiesView.edge.type')} value={edge.type} />}
@@ -302,7 +304,7 @@ const EdgePropertiesView = ({ edge }: { edge: EdgeType }) => {
           }}
         />
       </div>
-      <label className="text-md pl-1 font-bold tracking-wide text-amber-700">{t('graphPanel.propertiesView.edge.properties')}</label>
+      <h3 className="text-md pl-1 font-bold tracking-wide text-amber-700">{t('graphPanel.propertiesView.edge.properties')}</h3>
       <div className="bg-primary/5 max-h-96 overflow-auto rounded p-1">
         {Object.keys(edge.properties)
           .sort()
diff --git a/lightrag_webui/src/components/graph/Settings.tsx b/lightrag_webui/src/components/graph/Settings.tsx
index af585b83..ac8798a4 100644
--- a/lightrag_webui/src/components/graph/Settings.tsx
+++ b/lightrag_webui/src/components/graph/Settings.tsx
@@ -23,11 +23,14 @@ const LabeledCheckBox = ({
   onCheckedChange: () => void
   label: string
 }) => {
+  // Create unique ID using the label text converted to lowercase with spaces removed
+  const id = `checkbox-${label.toLowerCase().replace(/\s+/g, '-')}`;
+  
   return (
     <div className="flex items-center gap-2">
-      <Checkbox checked={checked} onCheckedChange={onCheckedChange} />
+      <Checkbox id={id} checked={checked} onCheckedChange={onCheckedChange} />
       <label
-        htmlFor="terms"
+        htmlFor={id}
         className="text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
       >
         {label}
@@ -56,6 +59,8 @@ const LabeledNumberInput = ({
 }) => {
   const { t } = useTranslation();
   const [currentValue, setCurrentValue] = useState<number | null>(value)
+  // Create unique ID using the label text converted to lowercase with spaces removed
+  const id = `input-${label.toLowerCase().replace(/\s+/g, '-')}`;
 
   const onValueChange = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -94,13 +99,14 @@ const LabeledNumberInput = ({
   return (
     <div className="flex flex-col gap-2">
       <label
-        htmlFor="terms"
+        htmlFor={id}
         className="text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
       >
         {label}
       </label>
       <div className="flex items-center gap-1">
         <Input
+          id={id}
           type="number"
           value={currentValue === null ? '' : currentValue}
           onChange={onValueChange}
@@ -295,11 +301,12 @@ export default function Settings() {
             />
 
             <div className="flex flex-col gap-2">
-              <label className="text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+              <label htmlFor="edge-size-min" className="text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
                 {t('graphPanel.sideBar.settings.edgeSizeRange')}
               </label>
               <div className="flex items-center gap-2">
                 <Input
+                  id="edge-size-min"
                   type="number"
                   value={minEdgeSize}
                   onChange={(e) => {
@@ -315,6 +322,7 @@ export default function Settings() {
                 <span>-</span>
                 <div className="flex items-center gap-1">
                   <Input
+                    id="edge-size-max"
                     type="number"
                     value={maxEdgeSize}
                     onChange={(e) => {
diff --git a/lightrag_webui/src/components/retrieval/QuerySettings.tsx b/lightrag_webui/src/components/retrieval/QuerySettings.tsx
index 7be587df..9fca1782 100644
--- a/lightrag_webui/src/components/retrieval/QuerySettings.tsx
+++ b/lightrag_webui/src/components/retrieval/QuerySettings.tsx
@@ -93,14 +93,19 @@ export default function QuerySettings() {
                 tooltip={t('retrievePanel.querySettings.topKTooltip')}
                 side="left"
               />
-              <NumberInput
-                id="top_k"
-                stepper={1}
-                value={querySettings.top_k}
-                onValueChange={(v) => handleChange('top_k', v)}
-                min={1}
-                placeholder={t('retrievePanel.querySettings.topKPlaceholder')}
-              />
+              <div>
+                <label htmlFor="top_k" className="sr-only">
+                  {t('retrievePanel.querySettings.topK')}
+                </label>
+                <NumberInput
+                  id="top_k"
+                  stepper={1}
+                  value={querySettings.top_k}
+                  onValueChange={(v) => handleChange('top_k', v)}
+                  min={1}
+                  placeholder={t('retrievePanel.querySettings.topKPlaceholder')}
+                />
+              </div>
             </>
 
             {/* Max Tokens */}
@@ -112,14 +117,19 @@ export default function QuerySettings() {
                   tooltip={t('retrievePanel.querySettings.maxTokensTextUnitTooltip')}
                   side="left"
                 />
-                <NumberInput
-                  id="max_token_for_text_unit"
-                  stepper={500}
-                  value={querySettings.max_token_for_text_unit}
-                  onValueChange={(v) => handleChange('max_token_for_text_unit', v)}
-                  min={1}
-                  placeholder={t('retrievePanel.querySettings.maxTokensTextUnit')}
-                />
+                <div>
+                  <label htmlFor="max_token_for_text_unit" className="sr-only">
+                    {t('retrievePanel.querySettings.maxTokensTextUnit')}
+                  </label>
+                  <NumberInput
+                    id="max_token_for_text_unit"
+                    stepper={500}
+                    value={querySettings.max_token_for_text_unit}
+                    onValueChange={(v) => handleChange('max_token_for_text_unit', v)}
+                    min={1}
+                    placeholder={t('retrievePanel.querySettings.maxTokensTextUnit')}
+                  />
+                </div>
               </>
 
               <>
@@ -128,14 +138,19 @@ export default function QuerySettings() {
                   tooltip={t('retrievePanel.querySettings.maxTokensGlobalContextTooltip')}
                   side="left"
                 />
-                <NumberInput
-                  id="max_token_for_global_context"
-                  stepper={500}
-                  value={querySettings.max_token_for_global_context}
-                  onValueChange={(v) => handleChange('max_token_for_global_context', v)}
-                  min={1}
-                  placeholder={t('retrievePanel.querySettings.maxTokensGlobalContext')}
-                />
+                <div>
+                  <label htmlFor="max_token_for_global_context" className="sr-only">
+                    {t('retrievePanel.querySettings.maxTokensGlobalContext')}
+                  </label>
+                  <NumberInput
+                    id="max_token_for_global_context"
+                    stepper={500}
+                    value={querySettings.max_token_for_global_context}
+                    onValueChange={(v) => handleChange('max_token_for_global_context', v)}
+                    min={1}
+                    placeholder={t('retrievePanel.querySettings.maxTokensGlobalContext')}
+                  />
+                </div>
               </>
 
               <>
@@ -145,14 +160,19 @@ export default function QuerySettings() {
                   tooltip={t('retrievePanel.querySettings.maxTokensLocalContextTooltip')}
                   side="left"
                 />
-                <NumberInput
-                  id="max_token_for_local_context"
-                  stepper={500}
-                  value={querySettings.max_token_for_local_context}
-                  onValueChange={(v) => handleChange('max_token_for_local_context', v)}
-                  min={1}
-                  placeholder={t('retrievePanel.querySettings.maxTokensLocalContext')}
-                />
+                <div>
+                  <label htmlFor="max_token_for_local_context" className="sr-only">
+                    {t('retrievePanel.querySettings.maxTokensLocalContext')}
+                  </label>
+                  <NumberInput
+                    id="max_token_for_local_context"
+                    stepper={500}
+                    value={querySettings.max_token_for_local_context}
+                    onValueChange={(v) => handleChange('max_token_for_local_context', v)}
+                    min={1}
+                    placeholder={t('retrievePanel.querySettings.maxTokensLocalContext')}
+                  />
+                </div>
               </>
             </>
 
@@ -164,16 +184,21 @@ export default function QuerySettings() {
                 tooltip={t('retrievePanel.querySettings.historyTurnsTooltip')}
                 side="left"
               />
-              <NumberInput
-                className="!border-input"
-                id="history_turns"
-                stepper={1}
-                type="text"
-                value={querySettings.history_turns}
-                onValueChange={(v) => handleChange('history_turns', v)}
-                min={0}
-                placeholder={t('retrievePanel.querySettings.historyTurnsPlaceholder')}
-              />
+              <div>
+                <label htmlFor="history_turns" className="sr-only">
+                  {t('retrievePanel.querySettings.historyTurns')}
+                </label>
+                <NumberInput
+                  className="!border-input"
+                  id="history_turns"
+                  stepper={1}
+                  type="text"
+                  value={querySettings.history_turns}
+                  onValueChange={(v) => handleChange('history_turns', v)}
+                  min={0}
+                  placeholder={t('retrievePanel.querySettings.historyTurnsPlaceholder')}
+                />
+              </div>
             </>
 
             {/* Keywords */}
@@ -185,19 +210,24 @@ export default function QuerySettings() {
                   tooltip={t('retrievePanel.querySettings.hlKeywordsTooltip')}
                   side="left"
                 />
-                <Input
-                  id="hl_keywords"
-                  type="text"
-                  value={querySettings.hl_keywords?.join(', ')}
-                  onChange={(e) => {
-                    const keywords = e.target.value
-                      .split(',')
-                      .map((k) => k.trim())
-                      .filter((k) => k !== '')
-                    handleChange('hl_keywords', keywords)
-                  }}
-                  placeholder={t('retrievePanel.querySettings.hlkeywordsPlaceHolder')}
-                />
+                <div>
+                  <label htmlFor="hl_keywords" className="sr-only">
+                    {t('retrievePanel.querySettings.hlKeywords')}
+                  </label>
+                  <Input
+                    id="hl_keywords"
+                    type="text"
+                    value={querySettings.hl_keywords?.join(', ')}
+                    onChange={(e) => {
+                      const keywords = e.target.value
+                        .split(',')
+                        .map((k) => k.trim())
+                        .filter((k) => k !== '')
+                      handleChange('hl_keywords', keywords)
+                    }}
+                    placeholder={t('retrievePanel.querySettings.hlkeywordsPlaceHolder')}
+                  />
+                </div>
               </>
 
               <>
@@ -207,32 +237,38 @@ export default function QuerySettings() {
                   tooltip={t('retrievePanel.querySettings.llKeywordsTooltip')}
                   side="left"
                 />
-                <Input
-                  id="ll_keywords"
-                  type="text"
-                  value={querySettings.ll_keywords?.join(', ')}
-                  onChange={(e) => {
-                    const keywords = e.target.value
-                      .split(',')
-                      .map((k) => k.trim())
-                      .filter((k) => k !== '')
-                    handleChange('ll_keywords', keywords)
-                  }}
-                  placeholder={t('retrievePanel.querySettings.hlkeywordsPlaceHolder')}
-                />
+                <div>
+                  <label htmlFor="ll_keywords" className="sr-only">
+                    {t('retrievePanel.querySettings.llKeywords')}
+                  </label>
+                  <Input
+                    id="ll_keywords"
+                    type="text"
+                    value={querySettings.ll_keywords?.join(', ')}
+                    onChange={(e) => {
+                      const keywords = e.target.value
+                        .split(',')
+                        .map((k) => k.trim())
+                        .filter((k) => k !== '')
+                      handleChange('ll_keywords', keywords)
+                    }}
+                    placeholder={t('retrievePanel.querySettings.hlkeywordsPlaceHolder')}
+                  />
+                </div>
               </>
             </>
 
             {/* Toggle Options */}
             <>
               <div className="flex items-center gap-2">
-                <Text
-                  className="ml-1"
-                  text={t('retrievePanel.querySettings.onlyNeedContext')}
-                  tooltip={t('retrievePanel.querySettings.onlyNeedContextTooltip')}
-                  side="left"
-                />
-                <div className="grow" />
+                <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>
                 <Checkbox
                   className="mr-1 cursor-pointer"
                   id="only_need_context"
@@ -242,13 +278,14 @@ export default function QuerySettings() {
               </div>
 
               <div className="flex items-center gap-2">
-                <Text
-                  className="ml-1"
-                  text={t('retrievePanel.querySettings.onlyNeedPrompt')}
-                  tooltip={t('retrievePanel.querySettings.onlyNeedPromptTooltip')}
-                  side="left"
-                />
-                <div className="grow" />
+                <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>
                 <Checkbox
                   className="mr-1 cursor-pointer"
                   id="only_need_prompt"
@@ -258,13 +295,14 @@ export default function QuerySettings() {
               </div>
 
               <div className="flex items-center gap-2">
-                <Text
-                  className="ml-1"
-                  text={t('retrievePanel.querySettings.streamResponse')}
-                  tooltip={t('retrievePanel.querySettings.streamResponseTooltip')}
-                  side="left"
-                />
-                <div className="grow" />
+                <label htmlFor="stream" className="flex-1">
+                  <Text
+                    className="ml-1"
+                    text={t('retrievePanel.querySettings.streamResponse')}
+                    tooltip={t('retrievePanel.querySettings.streamResponseTooltip')}
+                    side="left"
+                  />
+                </label>
                 <Checkbox
                   className="mr-1 cursor-pointer"
                   id="stream"
diff --git a/lightrag_webui/src/features/DocumentManager.tsx b/lightrag_webui/src/features/DocumentManager.tsx
index ef2db54f..8b83661e 100644
--- a/lightrag_webui/src/features/DocumentManager.tsx
+++ b/lightrag_webui/src/features/DocumentManager.tsx
@@ -507,8 +507,14 @@ export default function DocumentManager() {
                 </div>
               </div>
               <div className="flex items-center gap-2">
-                <span className="text-sm text-gray-500">{t('documentPanel.documentManager.fileNameLabel')}</span>
+                <label 
+                  htmlFor="toggle-filename-btn" 
+                  className="text-sm text-gray-500"
+                >
+                  {t('documentPanel.documentManager.fileNameLabel')}
+                </label>
                 <Button
+                  id="toggle-filename-btn"
                   variant="outline"
                   size="sm"
                   onClick={() => setShowFileName(!showFileName)}
diff --git a/lightrag_webui/src/features/RetrievalTesting.tsx b/lightrag_webui/src/features/RetrievalTesting.tsx
index 6b388ea1..1c3fb2db 100644
--- a/lightrag_webui/src/features/RetrievalTesting.tsx
+++ b/lightrag_webui/src/features/RetrievalTesting.tsx
@@ -147,13 +147,19 @@ export default function RetrievalTesting() {
             <EraserIcon />
             {t('retrievePanel.retrieval.clear')}
           </Button>
-          <Input
-            className="flex-1"
-            value={inputValue}
-            onChange={(e) => setInputValue(e.target.value)}
-            placeholder={t('retrievePanel.retrieval.placeholder')}
-            disabled={isLoading}
-          />
+          <div className="flex-1 relative">
+            <label htmlFor="query-input" className="sr-only">
+              {t('retrievePanel.retrieval.placeholder')}
+            </label>
+            <Input
+              id="query-input"
+              className="w-full"
+              value={inputValue}
+              onChange={(e) => setInputValue(e.target.value)}
+              placeholder={t('retrievePanel.retrieval.placeholder')}
+              disabled={isLoading}
+            />
+          </div>
           <Button type="submit" variant="default" disabled={isLoading} size="sm">
             <SendIcon />
             {t('retrievePanel.retrieval.send')}