@doenet/doenetml-iframe 0.7.23-dev.475 → 0.7.23-dev.476

package/package.json

@@ -2,7 +2,7 @@
     "name": "@doenet/doenetml-iframe",
     "type": "module",
     "description": "A renderer for DoenetML contained in an iframe",
-    "version": "0.7.23-dev.475",
+    "version": "0.7.23-dev.476",
     "license": "AGPL-3.0-or-later",
     "homepage": "https://github.com/Doenet/DoenetML#readme",
     "repository": {

package/style.css

@@ -1,23 +1,52 @@
+.container {
+    width: 100%;
+}
+@media (min-width: 640px) {
+    .container {
+        max-width: 640px;
+    }
+}
+@media (min-width: 768px) {
+    .container {
+        max-width: 768px;
+    }
+}
+@media (min-width: 1024px) {
+    .container {
+        max-width: 1024px;
+    }
+}
+@media (min-width: 1280px) {
+    .container {
+        max-width: 1280px;
+    }
+}
+@media (min-width: 1536px) {
+    .container {
+        max-width: 1536px;
+    }
+}
 .fixed {
     position: fixed;
 }
-
 .inline {
     display: inline;
 }
-
 .overline {
     text-decoration-line: overline;
 }
-
 .blur {
     --tw-blur: blur(8px);
     filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
-
 .filter {
     filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
+.transition {
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+}
 
 .keyboard-button {
     display: inline-flex;
@@ -86,8 +115,13 @@
 }
 
 .virtual-keyboard {
+    /*
+     * How wide the keyboard may spread. A variable because the sub-keyboard
+     * has to agree with it, and because the touch-device block below raises
+     * it — two literals that must match are two literals that can drift.
+     */
+    --keyboard-max-width: 42rem;
     display: flex;
-    max-width: 42rem;
     justify-content: center;
     row-gap: 0.25rem;
     -moz-column-gap: 0.75rem;
@@ -95,7 +129,6 @@
 }
 
 @media (min-width: 640px) {
-
     .virtual-keyboard {
         row-gap: 0.5rem;
     }
@@ -106,12 +139,15 @@
 }
 
 @media (min-width: 640px) {
-
     .virtual-keyboard {
         flex-wrap: nowrap;
     }
 }
 
+.virtual-keyboard {
+    max-width: var(--keyboard-max-width);
+}
+
 .virtual-keyboard .row {
     display: flex;
     flex-basis: 100%;
@@ -121,7 +157,6 @@
 }
 
 @media (min-width: 640px) {
-
     .virtual-keyboard .row {
         -moz-column-gap: 0.5rem;
              column-gap: 0.5rem;
@@ -137,7 +172,6 @@
 }
 
 @media (min-width: 640px) {
-
     .virtual-keyboard .keyboard-region {
         -moz-column-gap: 0.5rem;
              column-gap: 0.5rem;
@@ -151,7 +185,6 @@
 }
 
 @media (min-width: 640px) {
-
     .virtual-keyboard .keyboard-region .key {
         padding-left: 1rem;
         padding-right: 1rem;
@@ -160,14 +193,12 @@
 
 .virtual-keyboard .sub-keyboard {
     display: flex;
-    max-width: 42rem;
     flex-wrap: wrap;
     justify-content: center;
     row-gap: 0.25rem;
 }
 
 @media (min-width: 640px) {
-
     .virtual-keyboard .sub-keyboard {
         row-gap: 0.5rem;
     }
@@ -175,6 +206,7 @@
 
 .virtual-keyboard .sub-keyboard {
     height: 100%;
+        max-width: var(--keyboard-max-width);
 }
 
 .virtual-keyboard button {
@@ -295,7 +327,6 @@
 }
 
 @media (min-width: 640px) {
-
     .virtual-keyboard-tab-list button {
         padding: 0.5rem;
         padding-left: 0.75rem;
@@ -317,10 +348,87 @@
     --tw-text-opacity: 1;
     color: rgb(37 99 235 / var(--tw-text-opacity, 1));
 }
+
+/*
+ * Touch devices — see the note beside the matching block in
+ * `keyboard-tray.css`. A key was 39x40 on a phone and a layout tab 30x25;
+ * both are below the 44px a fingertip needs (issue #449).
+ *
+ * Height is raised outright, since it costs only tray height. Width is left
+ * to the flex layout, which already gives each key an equal share of the row:
+ * a phone cannot fit twelve 44px-wide keys across, and forcing it would push
+ * the row into an overflow or a wrap that helps no one. What helps the other
+ * end — a tablet, where the row had room to spare and the keys stayed small
+ * in the middle of it — is room for the row to grow, so the even share each
+ * key gets is a larger one, and a ceiling raised to match.
+ *
+ * Both halves are needed. `--keyboard-max-width` alone would hand the extra
+ * room to shift, backspace and space, the only keys with no ceiling of their
+ * own; the per-key `max-width` alone has nothing extra to hand out. Note that
+ * the ceiling is in `em`, and a key is a `button`, which this package's
+ * partial copy of Tailwind's preflight leaves at the UA font size of
+ * 13.33px — so `4em` is 53px and `4.5em` is 60px, not 64 and 72.
+ *
+ * Last in the file because every rule here raises one above it and each pair
+ * has equal specificity, so source order is all that separates them — a media
+ * query adds none. Shift, backspace and space are the exception: their
+ * `max-width: none` is set on `.virtual-keyboard .key-*`, two classes, which
+ * already outranks the one-class-one-type `button` selector here, so they
+ * stay unbounded without being named again. Backspace on the numeric layout
+ * is the exception to that exception — a rule above puts its ceiling back at
+ * `4em`, and outranks this block for the same reason — so it is the one key
+ * that has to be raised by name.
+ */
+@media (pointer: coarse) {
+    .virtual-keyboard {
+        --keyboard-max-width: 48rem;
+    }
+
+        .virtual-keyboard button {
+            min-height: 2.75rem;
+            max-width: 4.5em;
+        }
+    .virtual-keyboard.numeric .key-backspace {
+        max-width: 4.5em;
+    }
+    .virtual-keyboard-tab-list button {
+        min-height: 2.75rem;
+        padding-left: 0.75rem;
+        padding-right: 0.75rem;
+    }
+}
 /*
 Tailwind base is purposely not included because we want all styles to be prefixed. We manually copy in whatever is needed from tailwind preflight.
 @tailwind base;
 */
+.container {
+        width: 100%;
+}
+@media (min-width: 640px) {
+        .container {
+                max-width: 640px;
+        }
+}
+@media (min-width: 768px) {
+        .container {
+                max-width: 768px;
+        }
+}
+@media (min-width: 1024px) {
+        .container {
+                max-width: 1024px;
+        }
+}
+@media (min-width: 1280px) {
+        .container {
+                max-width: 1280px;
+        }
+}
+@media (min-width: 1536px) {
+        .container {
+                max-width: 1536px;
+        }
+}
 .fixed {
         position: fixed;
 }
@@ -337,6 +445,11 @@ Tailwind base is purposely not included because we want all styles to be prefixe
 .filter {
         filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
+.transition {
+        transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 150ms;
+}
 
 /*
  * Some styles from tailwind preflight need to be included here
@@ -381,6 +494,15 @@ Tailwind base is purposely not included because we want all styles to be prefixe
 
     --keyboard-tray-height: 280px;
 
+    /*
+     * The tab that peeks above a closed tray. Its height and the distance it
+     * is raised by are the same measurement — it sits exactly its own height
+     * above the tray's top edge — so they are one value, not two that have to
+     * be kept equal.
+     */
+    --keyboard-tab-height: 1.5rem;
+    --keyboard-tab-width: 3rem;
+
     border-top: 1px solid var(--kb-tray-border-top);
 
     position: fixed;
@@ -406,12 +528,67 @@ Tailwind base is purposely not included because we want all styles to be prefixe
     transition-duration: 300ms;
 
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    min-height: var(--keyboard-tray-height);
-    max-height: calc(100vh - 1.5rem);
+    /* A column, so `.keyboard-container` is bound by the height set below. */
+    display: flex;
+    flex-direction: column;
+    /*
+     * The tray may never be so tall that it carries its own tab off the top of
+     * the screen: the tab hangs exactly `--keyboard-tab-height` above the
+     * tray's top edge, so that much has to stay clear. Both bounds are held to
+     * it — the floor as well as the ceiling, because a `min-height` outranks a
+     * `max-height` and would otherwise reinstate the overshoot on a viewport
+     * shorter than the floor. Written against the variable rather than
+     * repeating its value: widening the tab for a fingertip is exactly the
+     * change that a literal here would have missed.
+     */
+    --keyboard-tray-max-height: calc(100vh - var(--keyboard-tab-height));
+    min-height: min(
+        var(--keyboard-tray-height),
+        var(--keyboard-tray-max-height)
+    );
+    max-height: var(--keyboard-tray-max-height);
     z-index: 10000;
     background-color: var(--kb-tray-bg);
 }
 
+/*
+     * The layout tabs and the keyboard under them, and the only part of the
+     * tray that scrolls. A viewport too short for the keyboard — a phone held
+     * sideways, or any short window — used to cut the bottom rows off, which
+     * on the numeric layout is the number pad; taller keys for a fingertip
+     * would have cut off more. `min-height: 0` is what lets it shrink: a flex
+     * item's automatic minimum is its own content, which would otherwise push
+     * the overflow straight back out to the tray.
+     *
+     * The layout tabs scroll with the keys rather than staying pinned, so a
+     * tray reopened at the position it was left at would be missing them.
+     * `keyboard-tray.tsx` scrolls this back to the top as the tray opens.
+     *
+     * A finger can pan it even though the tray cancels the default action of
+     * `pointerdown` across its whole subtree (see `keyboard-tray.tsx`): what
+     * suppresses a pan is `touch-action` or a cancelled `touchstart` /
+     * `touchmove`, and the tray does neither. Confirmed in Chromium with a
+     * real coarse pointer, and asserted in
+     * `cypress/e2e/accessibility/virtualKeyboardTouchTargets.cy.js`; iOS
+     * Safari has not been tried. `overscroll-behavior` keeps a pan that runs
+     * off the end of it from scrolling the document behind the tray.
+     */
+
+#virtual-keyboard-tray .keyboard-container {
+        min-height: 0;
+        overflow-y: auto;
+        overscroll-behavior: contain;
+    }
+
+/*
+     * Outside `.keyboard-container`'s scroll for positioning purposes even
+     * though it is inside it in the markup: its containing block is the tray,
+     * so it neither scrolls away nor is clipped, and stays in the corner
+     * where it can be reached. That holds only while nothing between the two
+     * is positioned — give `.keyboard-container` a `position` and the button
+     * starts scrolling away with the keys.
+     */
+
 #virtual-keyboard-tray .close-keyboard-button {
         position: absolute;
         top: 0px;
@@ -441,19 +618,19 @@ Tailwind base is purposely not included because we want all styles to be prefixe
 }
 
 /*
-     * Inline-end footprint of this button (w-12 + me-4 = 4rem) is mirrored
-     * by `--keyboard-tab-reserve-width` in
+     * Inline-end footprint of this button (`--keyboard-tab-width` + me-4) is
+     * mirrored by `--keyboard-tab-reserve-width` in
      * `packages/doenetml/src/EditorViewer/editor-viewer.css` so the editor
      * footer can shift its last element inward to clear it. Keep the two
-     * values in sync — and keep both on the *same* axis. `end-0` here pairs
-     * with `margin-inline-end` there; making one logical and leaving the
-     * other physical would send the tab and the space reserved for it to
-     * opposite edges under `rtl`, which is worse than either alone.
+     * values in sync — including the touch-device widening below — and keep
+     * both on the *same* axis. `end-0` here pairs with `margin-inline-end`
+     * there; making one logical and leaving the other physical would send the
+     * tab and the space reserved for it to opposite edges under `rtl`, which
+     * is worse than either alone.
      */
 
 #virtual-keyboard-tray .open-keyboard-button {
         position: absolute;
-        top: -1.5rem;
         inset-inline-end: 0px;
         margin-inline-end: 1rem;
         border-top-left-radius: 0.25rem;
@@ -475,13 +652,14 @@ Tailwind base is purposely not included because we want all styles to be prefixe
 
 #virtual-keyboard-tray .open-keyboard-button {
         display: flex;
-        height: 1.5rem;
-        width: 3rem;
         align-items: center;
         justify-content: center;
         border-width: 1px;
         --tw-bg-opacity: 1;
         background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+        top: calc(-1 * var(--keyboard-tab-height));
+        width: var(--keyboard-tab-width);
+        height: var(--keyboard-tab-height);
 }
 
 #virtual-keyboard-tray .virtual-keyboard-tab-list {
@@ -501,6 +679,38 @@ Tailwind base is purposely not included because we want all styles to be prefixe
         margin-right: auto;
 }
 
+/*
+ * Touch devices: everything here is tapped with a fingertip rather than
+ * pointed at, so every control needs a target a fingertip can land on. 44px is
+ * the minimum in Apple's HIG and in WCAG 2.5.5. The tray shipped with a 48x24
+ * tab to open it, a 24x24 button to close it, and layout tabs measuring 30x25
+ * on a phone — issue #449.
+ *
+ * Keyed on the reader's primary pointer being coarse rather than on how wide
+ * the viewport is: a narrow window on a desktop is still driven by a mouse,
+ * and a tablet held in two hands is not, however much room it has. This is the
+ * same test the viewer uses to decide whether to suppress the device's own
+ * on-screen keyboard, so the two stay consistent about what a touch device is.
+ */
+@media (pointer: coarse) {
+    #virtual-keyboard-tray {
+        --keyboard-tab-height: 2.75rem;
+        --keyboard-tab-width: 4rem;
+    }
+
+        #virtual-keyboard-tray .open-keyboard-button {
+            /* The icon is drawn at 1em, so it grows with the tab. */
+            font-size: 1.25rem;
+            line-height: 1.75rem;
+        }
+
+        #virtual-keyboard-tray .close-keyboard-button {
+                margin: 0.25rem;
+                height: 2.75rem;
+                width: 2.75rem;
+        }
+}
+
 /* Dark-mode overrides — applied when data-theme="dark" is written to #virtual-keyboard-tray */
 #virtual-keyboard-tray[data-theme="dark"] {
     --kb-tray-bg: #1e1e1e;