Add screen reader mode support, deprecate keyboard controls toggle

src/stories/MakeCodeToolbar.tsx

@@ -104,8 +104,8 @@ const MakeCodeToolbar = ({
         <button onClick={() => driver.current!.toggleDebugSloMo()}>
           Toggle debug slow mo
         </button>
-        <button onClick={() => driver.current!.toggleKeyboardControls()}>
-          Keyboard controls
+        <button onClick={() => driver.current!.toggleScreenReaderMode()}>
+          Screen reader mode
         </button>
         <button onClick={() => driver.current!.toggleGreenScreen()}>
           Green screen

src/stories/config.ts

@@ -1 +1,18 @@
 export const controllerId = 'MicrobitStorybook';
+
+// A locally running pxt-microbit dev server (`pxt serve`), selectable via the
+// "version" control in the editor stories for testing unreleased editor changes.
+// We point at /index.html because the dev server's redirect from / drops the
+// query string, losing controller=1 and leaving the editor in sandbox layout.
+export const localPxtBaseUrl = 'http://localhost:3232/index.html';
+
+/**
+ * Maps the story "version" control value ('default' | 'beta' | 'local') to
+ * baseUrl/version values understood by the frame driver.
+ */
+export const editorVersionArgs = (
+  version: string | undefined
+): { baseUrl?: string; version?: string } =>
+  version === 'local'
+    ? { baseUrl: localPxtBaseUrl }
+    : { version: version === 'default' ? undefined : version };

src/stories/react/MakeCodeFrame.stories.tsx

@@ -7,7 +7,11 @@ import {
   MakeCodeFrameProps,
 } from '../../react/MakeCodeFrame.js';
 import { MakeCodeProject } from '../../vanilla/pxt.js';
-import { controllerId } from '../config.js';
+import {
+  controllerId,
+  editorVersionArgs,
+  localPxtBaseUrl,
+} from '../config.js';
 import StoryWrapper from '../StoryWrapper.js';
 import MakeCodeToolbar from '../MakeCodeToolbar.js';
 
@@ -16,10 +20,13 @@ const meta: Meta<typeof MakeCodeFrame> = {
   component: MakeCodeFrame,
   argTypes: {
     version: {
-      options: ['default', 'beta'],
+      options: ['default', 'beta', 'local'],
       defaultValue: undefined,
       name: 'version',
-      control: { type: 'radio' },
+      control: {
+        type: 'radio',
+        labels: { local: `local (${localPxtBaseUrl})` },
+      },
     },
   },
 };
@@ -73,7 +80,7 @@ export const MakeCodeEditorWithControlsStory: Story = {
     return (
       <StoryWrapper>
         <MakeCodeEditorWithControls
-          version={version === 'default' ? undefined : version}
+          {...editorVersionArgs(version)}
           // TODO: make this an argument and perhaps a real prop
           queryParams={{ hideMenu: '' }}
         />
@@ -94,7 +101,7 @@ export const MakeCodeEditorControllerAppModeStory: Story = {
         <MakeCodeEditorWithControls
           controller={2}
           controllerId={controllerId}
-          version={version === 'default' ? undefined : version}
+          {...editorVersionArgs(version)}
           // App specific events
           onDownload={(download) => console.log('download', download)}
           onSave={(save) => console.log('save', save)}

src/stories/vanilla/makecode-frame-driver.stories.tsx

@@ -7,6 +7,7 @@ import {
   Options,
 } from '../../vanilla/makecode-frame-driver.js';
 import { MakeCodeProject } from '../../vanilla/pxt.js';
+import { editorVersionArgs } from '../config.js';
 import MakeCodeToolbar from '../MakeCodeToolbar.js';
 import StoryWrapper from '../StoryWrapper.js';
 
@@ -39,9 +40,11 @@ const renderEditor = (args: StoryArgs) => {
     // Create an iframe element.
     const iframe = document.createElement('iframe');
     iframe.allow = 'usb; autoplay; camera; microphone;';
+    const { baseUrl = 'https://makecode.microbit.org', version } =
+      editorVersionArgs(args.options?.version);
     iframe.src = createMakeCodeURL(
-      'https://makecode.microbit.org',
-      args.options?.version === 'default' ? undefined : args.options?.version,
+      baseUrl,
+      version,
       args.options?.lang,
       args.options?.controller ?? 1,
       args.options?.queryParams

src/vanilla/makecode-frame-driver.ts

@@ -756,13 +756,24 @@ export class MakeCodeFrameDriver {
     } as EditorMessageSetHighContrastRequest);
   }
 
+  /**
+   * @deprecated Keyboard controls are always enabled in current MakeCode
+   * versions so this does nothing.
+   */
   async toggleKeyboardControls(): Promise<void> {
     await this.sendRequest({
       type: 'pxteditor',
       action: 'togglekeyboardcontrols',
     });
   }
 
+  async toggleScreenReaderMode(): Promise<void> {
+    await this.sendRequest({
+      type: 'pxteditor',
+      action: 'togglescreenreadermode',
+    });
+  }
+
   async toggleGreenScreen(): Promise<void> {
     await this.sendRequest({
       type: 'pxteditor',

src/vanilla/pxt.ts

@@ -185,6 +185,7 @@ export interface EditorMessageRequest extends EditorMessage {
     | 'sethighcontrast' // EditorMessageSetHighContrastRequest
     | 'togglegreenscreen'
     | 'togglekeyboardcontrols'
+    | 'togglescreenreadermode'
     | 'settracestate' //
     | 'setsimulatorfullscreen' // EditorMessageSimulatorFullScreenRequest
     | 'print' // print code
@@ -545,6 +546,7 @@ export interface InfoMessage {
   locale: string;
   availableLocales?: string[];
   keyboardControls: boolean;
+  screenReaderMode?: boolean;
 }
 
 export interface PackageExtensionData {