restrict-focus/index.html at master · nullset/restrict-focus · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>restrict-focus</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <a href="http://google.com">Google</a>
    <a href="#">Bar</a>
    <button type="button">Tabbable thing at top</button>
    <div id="plain-div">
      <button type="button" id="first-thing">First thing</button>
      <button type="button" id="second-thing" tabindex="-1">
        Second thing
      </button>
      <span>Foo</span>
      <button type="button" id="third-thing">Third thing</button>
      <button type="button" id="fourth-thing" onclick="alert()">
        Fourth thing
      </button>
    </div>
    <div id="app">
      <div id="first">
        <h1><button class="toggleFocus">Toggle focus</button> First</h1>
        <button id="bar3" onclick="alert()">Click me and I'll alert!</button>
        <input />
        <button id="bar3" onclick="alert()">Click me and I'll alert!</button>
        <aha-hotkey meta ctrl alt shift key="Space">
          console.log(this); const a = 3; alert(a);
        </aha-hotkey>
      </div>

      <div id="second">
        <h1><button class="toggleFocus">Toggle focus</button> Second</h1>
        <button id="foo2">Foo</button>
        <button id="baz2" onclick="alert()">Baz</button>
        <web-component-element>
          <web-component-element>
            <button>
              NESTED: Web component button
              <aha-hotkey meta ctrl alt shift key="Space">
                console.log(this); const a = 4; alert(a);
              </aha-hotkey>
            </button>
          </web-component-element>
          <button>Middle: Web component button</button>
        </web-component-element>
        <button id="ahh2">Ahh</button>
        <button id="cuu2">Cuu</button>
        <input />
        <input value="foo bar 😎" />
        <select>
          <option>1</option>
          <option>2</option>
          <option>3</option>
        </select>
        <textarea>Foo 🤠 bar 💀 baz </textarea>
        <div contenteditable="true">
          <p>Some <b>contenteditable</b> content</p>
          <ul>
            <li>thing 1</li>
            <li>thing 2</li>
            <li>thing 3</li>
          </ul>
          <p>A thing with some <i>whitespace </i></p>
        </div>
        <button id="bar2">Bar</button>
      </div>

      <div id="third">
        <h1><button class="toggleFocus">Toggle focus</button> Third</h1>
        <button id="bar3" onclick="alert()">Click me and I'll alert!</button>
        <input />
        <button id="bar3" onclick="alert()">Click me and I'll alert!</button>
        <aha-hotkey meta ctrl alt shift key="Space">
          console.log(this); const a = 5; alert(a);
        </aha-hotkey>
      </div>
    </div>
    <script type="module" src="/main.ts"></script>
  </body>
</html>