fix(debug): use accessible recording icon (#37522)

packages/recorder/src/recorder.css

@@ -36,11 +36,15 @@
   font-size: 15px;
 }
 
-.recorder .toolbar-button.toggled.circle-large-filled {
+.recorder .codicon.stop-circle {
+  font-size: 15px;
+}
+
+.recorder .toolbar-button.toggled.stop-circle {
   color: #a1260d;
 }
 
-:root.dark-mode .recorder .toolbar-button.toggled.circle-large-filled {
+:root.dark-mode .recorder .toolbar-button.toggled.stop-circle {
   color: #f48771;
 }
 

packages/recorder/src/recorder.tsx

@@ -133,9 +133,11 @@ export const Recorder: React.FC<RecorderProps> = ({
       window.dispatch({ event: 'highlightRequested', params: { ariaTemplate: fragment } });
   }, [mode]);
 
+  const isRecording = mode === 'recording' || mode === 'recording-inspecting' || mode === 'assertingText' || mode === 'assertingVisibility';
+
   return <div className='recorder'>
     <Toolbar>
-      <ToolbarButton icon='circle-large-filled' title='Record' toggled={mode === 'recording' || mode === 'recording-inspecting' || mode === 'assertingText' || mode === 'assertingVisibility'} onClick={() => {
+      <ToolbarButton icon={isRecording ? 'stop-circle' : 'circle-large-filled'} title={isRecording ? 'Stop Recording' : 'Start Recording'} toggled={isRecording} onClick={() => {
         window.dispatch({ event: 'setMode', params: { mode: mode === 'none' || mode === 'standby' || mode === 'inspecting' ? 'recording' : 'standby' } });
       }}>Record</ToolbarButton>
       <ToolbarSeparator />