chore: add aria-labelledby to delimiter control list

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,
 };
 

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 })}