My method is probably unconventional, I'm still a newbie in the javascript space so I used the timeline interface to show/hide/move elements at 1 second intervals, with transitions set to 'Instant'.
Apart from the background image of the old and new editor menus, these are the main elements I've used:
A blue square or rectangle is used to highlight the old editor icons/menus
An orange square or rectanlge is used to highlight the new editor icons/menus
A Tool name text field (that changes at each interval)
A Comment text field (that changes at each interval, when required)
Each icon is overlaid with a hidden button with an action to jump to the time in the timeline to show it’s corresponding icon in the other editor
Additional images of menu options are displayed when required
(As this is a work in progress, I jump around the timeline a bit and there are a few alignment issues with image scaling.)
I'd value feedback on how others would have tackled this.
I'd also be interested in what I can do to make this more accessible.
A couple things I would do to make this a bit more obvious as to how it works:
If there's no action after about 15 seconds, you could lightly pulse the clickable elements to show a possible next action
Put 'New Brightspace editor' above the new one instead of below, and maybe give the old one a different background to clearly show that the two are separate.
Your instructions within the old editor don't seem like instructions. You could have that text build in so it draws the eye on first load, specifically the text Interactive: Compare...
Specifically for accessibility (vision) I would make your gray text darker to make it easier to read. And maybe a short introductory paragraph above the two windows explaining what you're looking at. (Perhaps instead of putting it within the old editor's window)
I wouldn't have done this very differently -- only reach for the hammer when you need it!
Accessibility
Q: Is there anything I can do to make it more user-friendly for screen readers / folk wanting to use their keyboards to navigate (instead of a mouse)?
I like the symmetrical nature of being able to select in either direction.
I think this is probably most useful as a reference; someone clicking on something they knew about beforehand and trying to determine the new way. (As such, any particular feedback from someone who didn't use the editor might not be as good as someone who already has used it)
If I were tasked with this and had infinite time, I might do something like have a copy of the button image animate to the new location, performing a shape morph while changing position .
As for accessibility, I'd probably go to the Identity Inspector, make sure the role is "button" and add an increasing tab index value to each item. That will probably get you to a spot that will work. Tab will show a focus ring around elements and return or space will perform the click action.
.