From 08faed6c1ed4178da0498b5d93220760f2055d55 Mon Sep 17 00:00:00 2001
From: Wendy Yuchen Sun <wendyyuchensun@gmail.com>
Date: Mon, 18 May 2026 17:30:08 +0800
Subject: [PATCH] chore: add aria-labelledby to delimiter control list

---
 src/components/core/button/segmented-control.js | 11 ++++++++++-
 src/pages/home/home.js                          |  6 +++++-
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/components/core/button/segmented-control.js b/src/components/core/button/segmented-control.js
index 46ebab9..ac79c50 100644
--- a/src/components/core/button/segmented-control.js
+++ b/src/components/core/button/segmented-control.js
@@ -2,10 +2,18 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
 
-const SegmentedControl = ({ items, value, onChange, 'aria-label': ariaLabel, buttonClassName }) => {
+const SegmentedControl = ({
+  items,
+  value,
+  onChange,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledBy,
+  buttonClassName,
+}) => {
   return (
     <ul
       aria-label={ariaLabel}
+      aria-labelledby={ariaLabelledBy}
       className="flex items-stretch rounded-lg border border-border-main overflow-hidden"
     >
       {items.map((item) => {
@@ -49,6 +57,7 @@ SegmentedControl.propTypes = {
   value: PropTypes.string.isRequired,
   onChange: PropTypes.func.isRequired,
   'aria-label': PropTypes.string,
+  'aria-labelledby': PropTypes.string,
   buttonClassName: PropTypes.string,
 };
 
diff --git a/src/pages/home/home.js b/src/pages/home/home.js
index f8f5d6d..78325b0 100644
--- a/src/pages/home/home.js
+++ b/src/pages/home/home.js
@@ -329,10 +329,14 @@ export default function Home() {
             <h2>{t('editContent')}</h2>
             <div className="flex items-center gap-2">
               <div className="flex items-center">
-                <div className="mr-2 text-text-primary text-sm font-medium">
+                <div
+                  id="latex-delimiter-label"
+                  className="mr-2 text-text-primary text-sm font-medium"
+                >
                   {t('latexDelimiter.name')}
                 </div>
                 <SegmentedControl
+                  aria-labelledby="latex-delimiter-label"
                   items={latexDelimiterOptions}
                   value={displayConfig.latexDelimiter}
                   onChange={(option) => setDisplayConfig({ latexDelimiter: option })}