add missing aria labels

src/components/DocumentSortControl.tsx

@@ -64,8 +64,6 @@ const DocumentSortControl: React.FC<{
         {sortDirection === 'asc' ? <ArrowUpward /> : <ArrowDownward />}
       </ToggleButton>
       <Select
-        labelId="sort-select-label"
-        id="sort-select"
         value={sortKey}
         onChange={handleSortKeyChange}
         sx={theme => ({
@@ -76,6 +74,7 @@ const DocumentSortControl: React.FC<{
           '& .MuiOutlinedInput-notchedOutline': { borderWidth: 1, borderColor: `rgb(from ${theme.vars.palette.primary.main} r g b / 0.5)` },
           '&:hover .MuiOutlinedInput-notchedOutline': { borderColor: 'primary.main' }
         })}
+        inputProps={{ 'aria-label': 'sort by' }}
       >
         {sortOptions.map(option => (
           <MenuItem value={option.value} key={option.value}>

src/editor/Editor.tsx

@@ -19,7 +19,11 @@ export const Editor: React.FC<{
     <LexicalComposer initialConfig={{ ...editorConfig, ...initialConfig }}>
       <SharedHistoryContext>
         <ToolbarPlugin />
-        <EditorPlugins contentEditable={<ContentEditable className="editor-input" />} onChange={onChange} ignoreHistoryMerge={ignoreHistoryMerge} />
+        <EditorPlugins onChange={onChange} ignoreHistoryMerge={ignoreHistoryMerge}
+          contentEditable={
+            <ContentEditable className="editor-input" ariaLabel="editor input" />
+          }
+        />
         <EditorRefPlugin editorRef={editorRef} />
       </SharedHistoryContext>
     </LexicalComposer>

src/editor/NestedEditor.tsx

@@ -17,7 +17,11 @@ export const NestedEditor: React.FC<{
   };
   return (
     <LexicalNestedComposer initialEditor={initialEditor} initialNodes={initialNodes}>
-      <EditorPlugins contentEditable={<ContentEditable className="nested-contentEditable" />} placeholder={placeholder} onChange={onChange} />
+      <EditorPlugins placeholder={placeholder} onChange={onChange}
+        contentEditable={
+          <ContentEditable className="nested-contentEditable" ariaLabel="editor input" />
+        }
+      />
     </LexicalNestedComposer>
   );
 }

src/editor/nodes/MathNode/MathComponent.tsx

@@ -1,16 +1,16 @@
 "use client"
 import { DOMAttributes, useRef } from "react";
-import { $createRangeSelection, $getSelection, $isNodeSelection, $isRangeSelection, $setSelection, BaseSelection, NodeKey, RangeSelection } from 'lexical';
+import { $createRangeSelection, $getSelection, $isNodeSelection, $isRangeSelection, $setSelection, NodeKey, RangeSelection } from 'lexical';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { $getNodeByKey } from 'lexical';
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 import { useLexicalNodeSelection } from '@lexical/react/useLexicalNodeSelection';
 import { mergeRegister } from '@lexical/utils';
 import type { MathfieldElement, MathfieldElementAttributes, MoveOutEvent } from "mathlive";
-import './index.css';
 import { $isMathNode } from ".";
 import { customizeMathVirtualKeyboard } from "./mathVirtualKeyboard";
 import { IS_MOBILE } from "@/shared/environment";
+import './index.css';
 
 type CustomElement<T> = Partial<T & DOMAttributes<T>>;
 

src/editor/plugins/MathPlugin/index.tsx

@@ -6,7 +6,6 @@ import { useEffect } from 'react';
 import { $wrapNodeInElement, mergeRegister } from '@lexical/utils';
 import { $createMathNode, MathNode } from '@/editor/nodes/MathNode';
 import { IS_MOBILE } from '@/shared/environment';
-import "mathlive";
 
 type CommandPayload = {
   value: string;

src/editor/plugins/ToolbarPlugin/Menus/BlockFormatSelect.tsx

@@ -146,7 +146,7 @@ export function BlockFormatSelect({ editor, blockType }: {
   }, [editor]);
 
   return (
-    <Select value={blockType} aria-label="Formatting options for text style" size='small'
+    <Select value={blockType} size='small'
       onClose={handleClose} sx={{
         '& .MuiSelect-select': { display: 'flex !important', alignItems: 'center', py: 0.5 },
         '& .MuiListItemIcon-root': { mr: { md: 0.5 }, minWidth: 20 },
@@ -158,7 +158,9 @@ export function BlockFormatSelect({ editor, blockType }: {
         slotProps: {
           root: { sx: { '& .MuiBackdrop-root': { userSelect: 'none' } } },
         }
-      }}>
+      }}
+      inputProps={{ 'aria-label': 'block type' }}
+    >
       <MenuItem value='paragraph' onClick={formatParagraph}>
         <ListItemIcon>
           <ViewHeadline fontSize="small" />

src/editor/plugins/ToolbarPlugin/Menus/FontSelect.tsx

@@ -146,6 +146,7 @@ export default function FontSelect({ editor }: { editor: LexicalEditor }): JSX.E
         onChange={onFontFamilySelect}
         value={fontFamily}
         onClose={handleClose}
+        inputProps={{ 'aria-label': 'font family' }}
       >
         <MenuItem
           disableRipple

src/editor/plugins/ToolbarPlugin/Tools/FontSizePicker.tsx

@@ -133,7 +133,8 @@ export const FontSizePicker = ({ fontSize, updateFontSize, onBlur }: {
             const menuItem = input.closest("li");
             if (!menuItem) return;
             if (isNavigatingDown) menuItem.focus();
-          }
+          },
+          "aria-label": "font size",
         }}
       />
       <IconButton

src/editor/plugins/ToolbarPlugin/index.tsx

@@ -288,6 +288,7 @@ function ToolbarPlugin() {
             <AlignTextMenu editor={activeEditor} isRTL={isRTL} />
           </Box>
           {(!IS_MOBILE && SUPPORT_SPEECH_RECOGNITION) ? <Fab size='small' color={isSpeechToText ? 'secondary' : 'primary'}
+            aria-label="Speech to Text"
             sx={{ position: 'fixed', right: slideTrigger ? 64 : 24, bottom: 16, px: 2, displayPrint: 'none', transition: `right 225ms ease-in-out` }}
             onClick={() => {
               editor.dispatchCommand(SPEECH_TO_TEXT_COMMAND, !isSpeechToText);