The modal dialog polyfill uses async/await syntax and a generator function to return responses to awaited Promises. For more detail, consult this post

Results

• Reasonably accessible on screen readers, but I’ve tested only with Windows Navigator and Jaws so far.
• Tested on Chrome, Edge, Firefox, and Falkon on a Windows 10 laptop.
• Tested on iOS Safari (iPhone 7-plus; however, top-level await is not supported), as of 10 August 2021 .

Accessibility

To close a custom modal dialog, you can either press the Escape key, or press Tab to the OK button and press the button or the Enter key.

Code samples

1. Use it in an event listener:

document.querySelector("[data-bullpen-prompt]")
  .addEventListener("click", async function (e) {
    var response = await window.prompt(
      "Make any changes and save this prompt.",
      "Some default text."
    );

    console.warn(response);
  });

2. Use it in the developer console on this page right now:

var response = await window.prompt(
  "Make any changes and save this prompt.",
  "Some default text."
);

console.warn(response);

3. Try one of the following buttons. (Open the developer console to read the responses.)

Open alert() Open confirm() Open prompt()

The alert-dialog script

View the JavaScript source file, alert-dialog.js.

This page contains the running calculator and the test suite used for driving and isolating the parts.

The TAB key navigates the keypad in the same key order as the Windows Calculator app.

The Arrow keys navigate the keypad by rows or columns, in the same order as the Windows Calculator app.

The keypad accepts click and touch events on each key.

The calculator container accepts focus in order to accept keyboard events.

Status

• December 19, 2020 : Work begun in earnest.
• January 8, 2021 : Work in progress. Functionality still being implemented.
• January 23, 2021 : Tests passing; more needed; calculator app runs after 5 second delay.
• January 27, 2021 :
  • Getting very close now! The model logic is the most involved part, when trying to match the behavior of the Microsoft Windows Calculator.
  • Found another safe-math issue, this time inside expand() - .14 * 100 returns 14.000000000000002 where 100 is the exponsion factor. Solve with parseInt(), fallback to previous if that results in NaN.
  • Covered the remaining expression update sequence issues:
    • (“6 =, then 3, should print 3 =”) // Yes!
    • (“3 =, then +, should print 3 +”)
    • (“3 +, then =, should print 3 + 3 =, output is 6”)
    • (“7 + 8, then =, should print 7 + 8 =, output is 15”)
    • (“7 + 8 =, then *, should print 15 *, output is 15”) // Yes!!!
    • (“15 *, then 6, then =, should print 15 * 6 =, output is 90”) // Yes!!
    • (“15 * 6 =, then =, should print 90 * 6 =, output is 540”)
• January 28, 2021 :
  • remove this: added state.history() for fun
  • Calling it done. Blog post to follow.
• May 20, 2021 :
  • re-think the history part: state can generate a history for the view to store.
  • why? the view is the client and therefore must manage its own concerns separately from “the state.”
• July 14, 2021 :
  • Bug fix for appending digits: When new value exceeds safe integer limit, do not append new digit.
  • Add decimal test for appending when output less than or equal safe integer limit.
  • Fix view test for document.readyState.

Blog post elements to cover

• list of key aliases for actions (e.g., Escape for Clear, Enter and Space for a click, r for reciprocal, q, @, F9, and so on).
• accessibility support - screen readers, alert text, keyboard navigation and input
• mimmicking MS Windows Calculator expressions: output is fairly straight-forward, but the expression text logic is complicated.
• 2 safe-math bugs found
• no update if next digit creates output greater than safe integer limit
• appends decimal even if output at safe integer limit
• Edge case in JavaScript numbers, MAX + 0.4 === MAX, MAX + 0.5 === MAX.5
  • tweet: https://twitter.com/dfkaye/status/1415520827047485442
• error states
• explain CSS grid rules to mimic keyboard navigation in MS Windows Calculator
• explain SAM pattern and why the calculator is based on it
• explain Dependency injection and why the pattern uses it (tests!)
• fix expression text overflow (layout breakages)
• the view is the client and therefore must manage its own concerns separately from “the state.”

Suite

Click on test names in the report below to display each assertion.

The suite uses mocha.js, chai.js, module-type scripts, and ES2016 import/export syntax, and is served up by Hugo.

You can view the source of the test suite at https://dfkaye.com/js/demos/sam/suite.js.

Demo

The countdown in progress is started by the test suite. You can restart the countdown at any time using the form input below.

Suite

Click on test names in the report below to display each assertion.

The suite uses mocha.js, chai.js, module-type scripts, and ES2016 import/export syntax, and is served up by Hugo.

You can view the source of the test suite at https://github.com/dfkaye/wheredoc/blob/master/test/suite.js.

Suite

Click on test names in the report below to display each assertion.

This is a plain implementation of the “to-do” list applications once used to illustrate how to use backbone.js before hiring committees started using it as a code challenge to test a candidate’s knowledge of front-end frameworks.

Orginally written in 2017, it has been modified to use a <form> (which created several Enter key form submission problems), custom HTML attributes, CSS attribute selectors, and accessibility roles and attributes.

Design may change further as this is not fully tested with screen readers yet.

Sample markup

Here’s the entire markup for the “Empty” list:

<form todo aria-labelledby="empty-list">
  <!-- gratuitous comment -->
  <dialog role="alert" alert-message="Hold it. You have another item open. Save it before editing a new one." alert-close="Close"></dialog>
  <dialog role="alert" aria-live="assertive" save-message="This to-do item is empty. Add text to Save it, or press Remove to delete it." alert-close="Close"></dialog>  
  <h2 id="empty-list">Empty list</h2>
  <ul todo-list></ul>
  <p empty>List is currently empty. Add a new item below.</p>
  <button type="button" handle="add">Add item</button>
  <template item-template>
    <li>
      <label visually-hidden for="empty-list-input">Add a to-do item</label>
      <input id="empty-list-input" name maxlength="100" readonly placeholder="E.g., Add a to-do item" value>
      <button type="button" handle="edit" aria-label="edit">&#9997;</button>
      <button type="button" handle="done" aria-label="mark complete">&check;</button>
      <button type="button" handle="remove" aria-label="remove">&cross;</button>
    </li>
  </template>
</form>

CSS and JavaScript sources

• View the CSS
• View the JavaScript

• Focus on a tab by clicking with the mouse or using the Tab key to navigate to the tab list.
• You can navigate among the tabs by pressing the ArrowDown and ArrowUp keys.
• To focus on content of the selected tab, press the Tab key.
• To return focus from the content to the tab group, press Shift + Tab.

• Screen readers: Only tested with Windows Narrator.
• Navigate tabs by the ArrowDown andArrowUp keys. each requires 2 presses to hop from radio to radio.
• August 22, 2020, 4 PM PDT : Arrow navigation between tabs is fixed by setting labels as aria-hidden, and aria-labelledby on each radio instead.
• To select a tab, press Enter or Space.
• To focus on content of a selected tab, press the Tab key once.
• Firefox only: To focus on content of a newly selected tab, double press the Tab key.
• You can also navigate through the tabs with the ArrowDown key to get to the currently opened tab-panel content.
• To return focus from the content to the tab group, press Shift + Tab.

// 16 October 2019
// Modified version from tweet by @etoxin
// "I like to call this unloading a website."
// https://twitter.com/etoxin/status/1179644600522162176

Array.from(
  document.querySelectorAll('*')
)
.reverse()
.forEach(async (n, t) => {
  await setTimeout(() => {
    n.remove();
  }, t * 10);
});
  

Details

You can read the accompanying blog post explaining the solution at https://dfkaye.com/posts/2020/08/23/accessible-css-driven-tabs-without-javascript/.

CSS

/* Container holding all contents. */
[role="tablist"] {
  /* 1 Sept 2020: ADDED flex to remove media query */
  display: flex;
  flex-wrap: wrap;    
}

[tabs-demo-heading] {
  /* 1 Sept 2020: Added due to flexbox solution; need 100% width. */
  flex-basis: 100%;    
}

[name="tabs"] {
  /* Do not hide the radio elements, make them invisible. */
  opacity: 0;
  position: absolute;    
}

/* The main tab headings */
[role="tab"] {
  background: white;

  /* base border style here; set color in :checked, style in :focus */
  border-color: transparent;
  border-style: solid;
  border-width: 1px 1px 0;

  box-shadow: inset 0 -0.5em 0.5em rgba(0, 0, 0, 0.02);
  color: lightgrey;
  cursor: pointer;
  display: inline-block;
  font-weight: 600;

  /* hides the bottom border */
  margin-bottom: -1px;

  /* 1 Sept 2020: removed to let flex apply gaps. */
  /* margin-right: 5px; */

  padding: 10px 20px;
  text-align: center;
  transition: all 0.2s ease;

  /* 1 Sept 2020: ADDED flex attributes to remove media query */
  flex-basis: 5em;
  flex-shrink: 1;
  flex-grow: 1;
}

/* Style the currently selected tab label */
[name="tabs"]:checked + [role="tab"] {
  /* ADDED */
  border-color: #eee;

  box-shadow: 0 -6px 8px rgba(0, 0, 0, 0.02);
  color: #268bd2;

  /* 1 Sept 2020: ADDED here with flexbox solution, removing the media query. */
  margin-bottom: 0;
}

/*
  ADDED: give tab a focus style.
  This selector has the same specificity as the :checked selector, so it
  should appear later in the source order to insure it takes effect.
  */
[name="tabs"]:focus + [role="tab"],
[name="tabs"]:hover + [role="tab"] {
  text-decoration: underline;
}

[name="tabs"]:focus + [role="tab"] {
  border-color: #268bd2;
  border-style: dotted;
}

/* The inner tab content */
[role="tabpanel"] {
  background: white;

  /* pulled up from the :checked state sibling ruleset below */
  border: 1px solid #eee;

  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.02);

  /* ADDED: Hide panels by default */
  display: none;

  padding: 20px;
  transition: all 0.2s ease;

  /* 1 Sept 2020: ADDED flex attr to stretch panel 100% width. */
  flex-basis: 100%;
}

/*
  Verbose state-machine-like part:
  - z-index, position, and overflow no longer needed,
  - allows document content to flow in source order.
*/

/* Show the currently selected tab content */
[name="tabs"]:nth-of-type(1):checked ~ [role="tabpanel"]:nth-of-type(1),
[name="tabs"]:nth-of-type(2):checked ~ [role="tabpanel"]:nth-of-type(2),
[name="tabs"]:nth-of-type(3):checked ~ [role="tabpanel"]:nth-of-type(3),
[name="tabs"]:nth-of-type(4):checked ~ [role="tabpanel"]:nth-of-type(4),
[name="tabs"]:nth-of-type(5):checked ~ [role="tabpanel"]:nth-of-type(5),
[name="tabs"]:nth-of-type(6):checked ~ [role="tabpanel"]:nth-of-type(6) {
  /* ADDED: show selected tabpanel */
  display: block;
}

/* 1 Sept 2020: media query no longer used. */
@media(max-width:38em) {
  [role="tab"] {
    /* display: block; */

    /* ADDED - tabs no longer need right margin */
    /* margin-right: 0; */

    /* ADDED - "unhide" the bottom margin */
    /* MOVED TO checked + tab rule *?
    /* margin-bottom: 0; */
  }

  /* ADDED: for visual emphasis. */
  [name="tabs"]:checked + [role="tab"] {
    /* 1 Sept 2020: REMOVED due to flexbox solution */
    /* border-bottom: 1px solid #eee; */
  }
}

The suite uses mocha.js, chai.js, module-type scripts, and ES2016 import/export syntax, and is served up by Hugo.

You can view the source of the test suite at https://github.com/dfkaye/safe-object-assign/blob/main/test/browser-suite.js.

Suite

Click on test names in the report below to display each assertion.