search

microbit-foundation / python-editor-v3

Micro:bit Educational Foundation Python Editor V3
https://python.microbit.org
MIT License
54 stars 36 forks source link

Upgrade Chakra UI/React #1114

Closed microbit-matt-hillsdon closed 4 months ago

microbit-matt-hillsdon commented 1 year ago
github-actions[bot] commented 1 year ago

Preview build will be at https://review-python-editor-v3.microbit.org/chakra-upgrade/

microbit-matt-hillsdon commented 1 year ago

Based on e2e failures it looks like toast handling has changed, and perhaps not for the better in terms of accessibility. The underlying reach alert component should be good though. Needs careful review.

microbit-matt-hillsdon commented 1 year ago

There's a weird issue with About/Language dialogs (perhaps others) they leave their modal overlay behind when closed.

This only seems to affect the dialogs that always render themselves even when closed, not the ones that use our common dialog code.

Fixed by upgrading framer-motion.

microbit-matt-hillsdon commented 1 year ago

There's a new focus indicator in the search box.

microbit-matt-hillsdon commented 1 year ago

A bunch of simulator controls are unexpectedly enabled before running a program.

microbit-matt-hillsdon commented 1 year ago

A bunch of simulator controls are unexpectedly enabled before running a program.

This and similar issues fixed by 3375749

microbit-matt-hillsdon commented 1 year ago

DOM structure of toast is now an aria-live polite region.

Previously in the same position we had role=alert and a duplicate visually hidden live region that was aria-live polite. So perhaps it was quite confusing before as there were two live regions (one via role) though I don't recall this being a practical issue. role=alert would have mapped to aria-live=assertive though so this might be a backwards step for error messages and a step forward for notifications?

I'll fix the e2e tests to match for now, as we need to find out if there are other issues.

New structure:

<div class="chakra-portal">
  <ul role="region" aria-live="polite" id="chakra-toast-manager-top"
    style="position: fixed; z-index: 5500; pointer-events: none; display: flex; flex-direction: column; margin: 0px auto; top: env(safe-area-inset-top, 0px); right: env(safe-area-inset-right, 0px); left: env(safe-area-inset-left, 0px);">
    <li class="chakra-toast"
      style="display: flex; flex-direction: column; align-items: center; opacity: 1; transform: none;">
      <div role="status" aria-atomic="true" class="chakra-toast__inner css-dixmdy">
        <div id="toast-1" class="chakra-alert css-13ta61m"><span class="chakra-alert__icon css-14ogjxt"><svg
              viewBox="0 0 24 24" focusable="false" class="chakra-icon css-qk6lof">
              <path fill="currentColor"
                d="M11.983,0a12.206,12.206,0,0,0-8.51,3.653A11.8,11.8,0,0,0,0,12.207,11.779,11.779,0,0,0,11.8,24h.214A12.111,12.111,0,0,0,24,11.791h0A11.766,11.766,0,0,0,11.983,0ZM10.5,16.542a1.476,1.476,0,0,1,1.449-1.53h.027a1.527,1.527,0,0,1,1.523,1.47,1.475,1.475,0,0,1-1.449,1.53h-.027A1.529,1.529,0,0,1,10.5,16.542ZM11,12.5v-6a1,1,0,0,1,2,0v6a1,1,0,1,1-2,0Z">
              </path>
            </svg></span>
          <div class="css-njbp03">
            <div id="toast-1-title" class="chakra-alert__title css-tidvy5">Cannot load file</div>
            <div id="toast-1-description" class="chakra-alert__desc css-161kwbg">This version of the Python Editor
              doesn't currently support adding .mpy files.</div>
          </div><button type="button" aria-label="Close" class="css-1pq15d"><svg viewBox="0 0 24 24" focusable="false"
              class="chakra-icon css-onkibi" aria-hidden="true">
              <path fill="currentColor"
                d="M.439,21.44a1.5,1.5,0,0,0,2.122,2.121L11.823,14.3a.25.25,0,0,1,.354,0l9.262,9.263a1.5,1.5,0,1,0,2.122-2.121L14.3,12.177a.25.25,0,0,1,0-.354l9.263-9.262A1.5,1.5,0,0,0,21.439.44L12.177,9.7a.25.25,0,0,1-.354,0L2.561.44A1.5,1.5,0,0,0,.439,2.561L9.7,11.823a.25.25,0,0,1,0,.354Z">
              </path>
            </svg></button>
        </div>
      </div>
    </li>
  </ul>
  <!-- Other regions for other toast positions here -->
</div>

Ah, just spotted there's a role=status. That still maps to polite.

microbit-matt-hillsdon commented 1 year ago

Still 8 e2e failures. So far, apart from toast DOM structure, they've been async issues shown up by new timing, rather than anything broken.

microbit-matt-hillsdon commented 1 year ago

There's a new focus indicator in the search box.

This has been fixed.

microbit-matt-hillsdon commented 1 year ago

I've released 3.0.18 with the various pending changes so that we can let this change sit on /v/beta for a while once merged.

microbit-matt-hillsdon commented 1 year ago

There's a significant visual difference in the About dialog which panicked me, but it turns out to be just due to the over-long version number on the review branch build.

microbit-matt-hillsdon commented 1 year ago

Visual changes:

Since the above there's a new issue where focus is moved to the next button along. Needs more investigation, but a workaround is to use react-focus-lock@2.9.4 (maybe newer, this was just known working from micro:bit classroom). Reproduces in a trivial new Chakra UI project so I'll raise a bug before long.