v0.9.0

Changed

• Focusing the editor using the Tab key no longer activates edit mode
  immediately. This prevents the Tab key from being trapped, which was an
  accessibility problem for keyboard users.

  Instead, when the editor is focused, users can now press Enter to begin
  editing, and Escape to stop editing. A prompt is displayed with these
  instructions when focused. Focusing the editor with a mouse click continues to
  activate edit mode immediately, as before.

• The editor now uses the CodeMirror contenteditable input style, which has
  much better screen reader support.

• Line numbers are now annotated with aria-hidden so that they are not voiced
  by screen readers.

• Increased default line-height from normal to 1.4em.

• Added a default padding-left of 1em.

• Increased width of cursor from 1px to 2px.

• Increased default tab font-size from 0.75rem to 0.8em;

• Increased default --playground-bar-height from 35px to `40px.

• --playground-cursor-color now defaults to the value of
  --playground-code-default-color.

• --playground-code-gutter-background now defaults to the value of
  --playground-code-background.

• --playground-code-gutter-margin-right default changed from 1px solid #ddd to none.

• --playground-code-linenumber-color default changed from #999 to #767676.

Added

• Added playground-styles.css and playground-styles.js which can be imported
  to apply Playground styles to server-side rendered code.

• Added dialog CSS shadow part to code-editor, file-editor, and ide for
  styling modal dialogs that appear over the editor (currently just used for the
  keyboard help that shows when the editor is focused using the keyboard).

• Added CSS custom properties:

  • --playground-code-line-height: line-height of code in the editor.
  • --playground-tab-bar-font-size: font-size of tabs in the file picker tab
    bar.
  • --playground-tab-bar-active-color: Text color of active file-picker tab.
  • --playground-tab-bar-indicator-color: color of the active tab indicator
    line (use transparent to hide).
  • --playground-tab-bar-active-background: background of the active file-picker tab.

• Added aria-label attribute to reload, new file, and file context menu
  buttons.

• Added title attribute to preview <iframe> element.

• Added aria-label to the preview loading indicator, and set
  aria-hidden=true when the preview is not loading.