Make keyboard focus overlay more helpful

See comment: https://github.com/google/playground-elements/pull/224#discussion_r721486781

We currently show this overlay when you focus an editor with the keyboard:


There are 3 states here:

1. *Unfocused*. Press tab to go to 2 (normal focus behavior).
2. *Focused with this focus-trap preventing overlay*. Press tab to focus the next element (normal focus behavior). Press enter to go to 3.
3. *Focused and editable*. Press escape to go to 2. Press tab to type a tab character.

There might be some confusing things about this:

- It might be unclear why the popup is there at all. Maybe it should lead with "You've focused a code editor" or "This code is editable" or similar?

- You can't actually press Escape to "exit" until you have first pressed Enter to start editing. Maybe it should say "**then** press escape to unfocus" or something?

Or maybe if you do press Enter, we should only then tell the user about Escape? Maybe a less obtrusive toast at the bottom or something?