accessible-show-hide-svelte • Playground • Svelte

App.svelte

let expanded = false;

const focusFirstDropdownLink = ({ target }) => {

target.firstElementChild.focus()

}

</script>

<style>

.dropdown.expanded {

opacity: 1;

visibility: visible;

}

.dropdown {

opacity: 0;

visibility: hidden;

transition: opacity 0.2s, visibility 0.2s;

z-index: -1;

height: 100vh;

width: 100%;

display: flex;

flex-direction: column;

justify-content: center;

position: absolute;

top: 0;

left: 0;

}

.dropdown a {

font-size: 24px;

font-weight: bold;

margin: 20px;

}

import 'svelte/internal/disclose-version';

import 'svelte/internal/flags/legacy';

import * as $ from 'svelte/internal/client';

var root = $.template(`<nav class="svelte-e0eotq"><button class="toggle-dropdown svelte-e0eotq" aria-haspopup="true" aria-label="Nav toggle"><svg viewBox="0 0 448 512" width="100" title="bars" class="svelte-e0eotq"><path d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z" class="svelte-e0eotq"></path></svg></button></nav> <div><a href="/" class="svelte-e0eotq">Home</a> <a href="/about" class="svelte-e0eotq">About</a> <a href="/projects" class="svelte-e0eotq">Projects</a> <a href="/contact" class="svelte-e0eotq">Contact</a></div>`, 1);

export default function App($$anchor) {

let expanded = $.mutable_state(false);

const focusFirstDropdownLink = ({ target }) => {

target.firstElementChild.focus();

};

var fragment = root();

var nav = $.first_child(fragment);

var button = $.child(nav);

$.reset(nav);

var div = $.sibling(nav, 2);

let classes;

$.template_effect(

($0) => {

$.set_attribute(button, 'aria-expanded', $.get(expanded));

classes = $.set_class(div, 1, 'dropdown svelte-e0eotq', null, classes, $0);

[() => ({ expanded: $.get(expanded) })],

$.derived_safe_equal

);

$.event('click', button, () => $.set(expanded, !$.get(expanded)));

$.event('transitionend', div, focusFirstDropdownLink);

$.append($$anchor, fragment);

}

result = svelte.compile(source, {

generate: "client" "server",

dev: false });

.dropdown.expanded.svelte-e0eotq {

opacity: 1;

visibility: visible;

}

.dropdown.svelte-e0eotq {

opacity: 0;

visibility: hidden;

transition: opacity 0.2s, visibility 0.2s;

z-index: -1;

height: 100vh;

width: 100%;

display: flex;

flex-direction: column;

justify-content: center;

position: absolute;

top: 0;

left: 0;

}

.dropdown.svelte-e0eotq a:where(.svelte-e0eotq) {

font-size: 24px;

font-weight: bold;

margin: 20px;

}

.toggle-dropdown.svelte-e0eotq svg:where(.svelte-e0eotq) {

width: 24px;

height: auto;

vertical-align: middle;

}

.toggle-dropdown.svelte-e0eotq {

z-index: 1;

		
			
				
					 Root {
 css: StyleSheet {...}
 type: "StyleSheet"
start: 134
end: 824
attributes: []
children: [...] (8)
  Rule {...}
 type: "Rule"
prelude: SelectorList {...}
 type: "SelectorList"
start: 142
end: 160
children: [...] (1)
  ComplexSelector {...}
 type: "ComplexSelector"
start: 142
end: 160
children: [...] (1)
  RelativeSelector {...}
 type: "RelativeSelector"
combinator: null
selectors: [...] (2)
  ClassSelector {...}
 type: "ClassSelector"
name: "dropdown"
start: 142
end: 151
 }
 ClassSelector {...}
 type: "ClassSelector"
name: "expanded"
start: 151
end: 160
 }
 ]
start: 142
end: 160
 }
 ]
 }
 ]
 }
block: Block {...}
 type: "Block"
start: 161
end: 201
children: [...] (2)
  Declaration {...}
 type: "Declaration"
start: 165
end: 175
property: "opacity"
value: "1"
 }
 Declaration {...}
 type: "Declaration"
start: 179
end: 198
property: "visibility"
value: "visible"
 }
 ]
 }
start: 142
end: 201
 }
 Rule {...}
 type: "Rule"
prelude: SelectorList {...}
 type: "SelectorList"
start: 203
end: 212
children: [...] (1)
  ComplexSelector {...}
 type: "ComplexSelector"
start: 203
end: 212
children: [...] (1)
  RelativeSelector {...}
 type: "RelativeSelector"
combinator: null
selectors: [...] (1)
  ClassSelector {...}
 type: "ClassSelector"
name: "dropdown"
start: 203
end: 212
 }
 ]
start: 203
end: 212
 }
 ]
 }
 ]
 }
block: Block {...}
 type: "Block"
start: 213
end: 458
children: [...] (12)
  Declaration {...}
 type: "Declaration"
start: 217
end: 227
property: "opacity"
value: "0"
 }
 Declaration {...}
 type: "Declaration"
start: 231
end: 249
property: "visibility"
value: "hidden"
 }
 Declaration {...}
 type: "Declaration"
start: 253
end: 294
property: "transition"
value: "opacity 0.2s, visibility 0.2s"
 }
 Declaration {...}
 type: "Declaration"
start: 299
end: 310
property: "z-index"
value: "-1"
 }
 Declaration {...}
 type: "Declaration"
start: 314
end: 327
property: "height"
value: "100vh"
 }
 Declaration {...}
 type: "Declaration"
start: 331
end: 342
property: "width"
value: "100%"
 }
 Declaration {...}
 type: "Declaration"
start: 346
end: 359
property: "display"
value: "flex"
 }
 Declaration {...}
 type: "Declaration"
start: 363
end: 385
property: "flex-direction"
value: "column"
 }
 Declaration {...}
 type: "Declaration"
start: 389
end: 412
property: "justify-content"
value: "center"
 }
 Declaration {...}
 type: "Declaration"
start: 416
end: 434
property: "position"
value: "absolute"
 }
 Declaration {...}
 type: "Declaration"
start: 438
end: 444
property: "top"
value: "0"
 }
 Declaration {...}
 type: "Declaration"
start: 448
end: 455
property: "left"
value: "0"
 }
 ]
 }
start: 203
end: 458
 }
 Rule {...}
 type: "Rule"
prelude: SelectorList {...}
 type: "SelectorList"
start: 460
end: 471
children: [...] (1)
  ComplexSelector {...}
 type: "ComplexSelector"
start: 460
end: 471
children: [...] (2)
  RelativeSelector {...}
 type: "RelativeSelector"
combinator: null
selectors: [...] (1)
  ClassSelector {...}
 type: "ClassSelector"
name: "dropdown"
start: 460
end: 469
 }
 ]
start: 460
end: 469
 }
 RelativeSelector {...}
 type: "RelativeSelector"
combinator: Combinator {...}
 type: "Combinator"
name: " "
start: 469
end: 470
 }
selectors: [...] (1)
  TypeSelector {...}
 type: "TypeSelector"
name: "a"
start: 470
end: 471
 }
 ]
start: 469
end: 471
 }
 ]
 }
 ]
 }
block: Block {...}
 type: "Block"
start: 472
end: 531
children: [...] (3)
  Declaration {...}
 type: "Declaration"
start: 476
end: 491
property: "font-size"
value: "24px"
 }
 Declaration {...}
 type: "Declaration"
start: 495
end: 512
property: "font-weight"
value: "bold"
 }
 Declaration {...}
 type: "Declaration"
start: 516
end: 528
property: "margin"
value: "20px"
 }
 ]
 }
start: 460
end: 531
 }
 Rule {...}
 type: "Rule"
prelude: SelectorList {...}
 type: "SelectorList"
start: 533
end: 553
children: [...] (1)
  ComplexSelector {...}
 type: "ComplexSelector"
start: 533
end: 553
children: [...] (2)
  RelativeSelector {...}
 type: "RelativeSelector"
combinator: null
selectors: [...] (1)
  ClassSelector {...}
 type: "ClassSelector"
name: "toggle-dropdown"
start: 533
end: 549
 }
 ]
start: 533
end: 549
 }
 RelativeSelector {...}
 type: "RelativeSelector"
combinator: Combinator {...}
 type: "Combinator"
name: " "
start: 549
end: 550
 }
selectors: [...] (1)
  TypeSelector {...}
 type: "TypeSelector"
name: "svg"
start: 550
end: 553
 }
 ]
start: 549
end: 553
 }
 ]
 }
 ]
 }
block: Block {...}
 type: "Block"
start: 554
end: 614
children: [...] (3)
  Declaration {...}
 type: "Declaration"
start: 558
end: 569
property: "width"
value: "24px"
 }
 Declaration {...}
 type: "Declaration"
start: 573
end: 585
property: "height"
value: "auto"
 }
 Declaration {...}
 type: "Declaration"
start: 589
end: 611
property: "vertical-align"
value: "middle"
 }
 ]
 }
start: 533
end: 614
 }
 Rule {...}
 type: "Rule"
prelude: SelectorList {...}
 type: "SelectorList"
start: 616
end: 632
children: [...] (1)
  ComplexSelector {...}
 type: "ComplexSelector"
start: 616
end: 632
children: [...] (1)
  RelativeSelector {...}
 type: "RelativeSelector"
combinator: null
selectors: [...] (1)
  ClassSelector {...}
 type: "ClassSelector"
name: "toggle-dropdown"
start: 616
end: 632
 }
 ]
start: 616
end: 632
 }
 ]
 }
 ]
 }
block: Block {...}
 type: "Block"
start: 633
end: 669
children: [...] (2)
  Declaration {...}
 type: "Declaration"
start: 637
end: 647
property: "z-index"
value: "1"
 }
 Declaration {...}
 type: "Declaration"
start: 651
end: 666
property: "cursor"
value: "pointer"
 }
 ]
 }
start: 616
end: 669
 }
 Rule {...}
 type: "Rule"
prelude: SelectorList {...}
 type: "SelectorList"
start: 671
end: 674
children: [...] (1)
  ComplexSelector {...}
 type: "ComplexSelector"
start: 671
end: 674
children: [...] (1)
  RelativeSelector {...}
 type: "RelativeSelector"
combinator: null
selectors: [...] (1)
  TypeSelector {...}
 type: "TypeSelector"
name: "nav"
start: 671
end: 674
 }
 ]
start: 671
end: 674
 }
 ]
 }
 ]
 }
block: Block {...}
 type: "Block"
start: 675
end: 700
children: [...] (1)
  Declaration {...}
 type: "Declaration"
start: 679
end: 697
property: "position"
value: "relative"
 }
 ]
 }
start: 671
end: 700
 }
 Atrule {...}
 type: "Atrule"
start: 702
end: 780
name: "import"
prelude: "url(\"https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700\")"
block: null
 }
 Rule {...}
 type: "Rule"
prelude: SelectorList {...}
 type: "SelectorList"
start: 782
end: 783
children: [...] (1)
  ComplexSelector {...}
 type: "ComplexSelector"
start: 782
end: 783
children: [...] (1)
  RelativeSelector {...}
 type: "RelativeSelector"
combinator: null
selectors: [...] (1)
  TypeSelector {...}
 type: "TypeSelector"
name: "*"
start: 782
end: 783
 }
 ]
start: 782
end: 783
 }
 ]
 }
 ]
 }
block: Block {...}
 type: "Block"
start: 784
end: 815
children: [...] (1)
  Declaration {...}
 type: "Declaration"
start: 788
end: 812
property: "font-family"
value: "\"Open Sans\""
 }
 ]
 }
start: 782
end: 815
 }
 ]
content:  {...}
 start: 141
end: 816
styles: "\n.dropdown.expanded {\n  opacity: 1;\n  visibility: visible;\n}\n\n.dropdown {\n  opacity: 0;\n  visibility: hidden;\n  transition: opacity 0.2s, visibility 0.2s;\n\n  z-index: -1;\n  height: 100vh;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  position: absolute;\n  top: 0;\n  left: 0;\n}\n\n.dropdown a {\n  font-size: 24px;\n  font-weight: bold;\n  margin: 20px;\n}\n\n.toggle-dropdown svg {\n  width: 24px;\n  height: auto;\n  vertical-align: middle;\n}\n\n.toggle-dropdown {\n  z-index: 1;\n  cursor: pointer;\n}\n\nnav {\n  position: relative;\n}\n\n@import url(\"https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700\");\n\n* {\n  font-family: \"Open Sans\";\n}\n"
comment: null
 }
 }
js: []
start: 134
end: 1726
type: "Root"
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (7)
  Text {...}
 type: "Text"
start: 132
end: 134
raw: "\n\n"
data: "\n\n"
 }
 Text {...}
 type: "Text"
start: 824
end: 826
raw: "\n\n"
data: "\n\n"
 }
 RegularElement {...}
 type: "RegularElement"
start: 826
end: 1418
name: "nav"
attributes: [...] (1)
  Attribute {...}
 type: "Attribute"
start: -1
end: -1
name: "class"
value: [...] (1)
  Text {...}
 type: "Text"
data: ""
raw: ""
start: -1
end: -1
 }
 ]
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (3)
  Text {...}
 type: "Text"
start: 831
end: 833
raw: "\n\t"
data: "\n\t"
 }
 RegularElement {...}
 type: "RegularElement"
start: 833
end: 1411
name: "button"
attributes: [...] (5)
  Attribute {...}
 type: "Attribute"
start: 841
end: 864
name: "class"
value: [...] (1)
  Text {...}
 start: 848
end: 863
type: "Text"
raw: "toggle-dropdown"
data: "toggle-dropdown"
 }
 ]
 }
 Attribute {...}
 type: "Attribute"
start: 865
end: 889
name: "aria-expanded"
value: ExpressionTag {...}
 type: "ExpressionTag"
start: 879
end: 889
expression: Identifier {...}
 type: "Identifier"
start: 880
end: 888
loc:  {...}
 start:  {...}
 line: 60
column: 48
 }
end:  {...}
 line: 60
column: 56
 }
 }
name: "expanded"
 }
 }
 }
 Attribute {...}
 type: "Attribute"
start: 890
end: 910
name: "aria-haspopup"
value: [...] (1)
  Text {...}
 start: 905
end: 909
type: "Text"
raw: "true"
data: "true"
 }
 ]
 }
 Attribute {...}
 type: "Attribute"
start: 911
end: 934
name: "aria-label"
value: [...] (1)
  Text {...}
 start: 923
end: 933
type: "Text"
raw: "Nav toggle"
data: "Nav toggle"
 }
 ]
 }
 OnDirective {...}
 start: 935
end: 972
type: "OnDirective"
name: "click"
expression: ArrowFunctionExpression {...}
 type: "ArrowFunctionExpression"
start: 945
end: 971
loc:  {...}
 start:  {...}
 line: 60
column: 113
 }
end:  {...}
 line: 60
column: 139
 }
 }
id: null
expression: true
generator: false
async: false
params: []
body: AssignmentExpression {...}
 type: "AssignmentExpression"
start: 951
end: 971
loc:  {...}
 start:  {...}
 line: 60
column: 119
 }
end:  {...}
 line: 60
column: 139
 }
 }
operator: "="
left: Identifier {...}
 type: "Identifier"
start: 951
end: 959
loc:  {...}
 start:  {...}
 line: 60
column: 119
 }
end:  {...}
 line: 60
column: 127
 }
 }
name: "expanded"
 }
right: UnaryExpression {...}
 type: "UnaryExpression"
start: 962
end: 971
loc:  {...}
 start:  {...}
 line: 60
column: 130
 }
end:  {...}
 line: 60
column: 139
 }
 }
operator: "!"
prefix: true
argument: Identifier {...}
 type: "Identifier"
start: 963
end: 971
loc:  {...}
 start:  {...}
 line: 60
column: 131
 }
end:  {...}
 line: 60
column: 139
 }
 }
name: "expanded"
 }
 }
 }
 }
modifiers: []
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (3)
  Text {...}
 type: "Text"
start: 973
end: 976
raw: "\n\t\t"
data: "\n\t\t"
 }
 RegularElement {...}
 type: "RegularElement"
start: 976
end: 1400
name: "svg"
attributes: [...] (4)
  Attribute {...}
 type: "Attribute"
start: 981
end: 1002
name: "viewBox"
value: [...] (1)
  Text {...}
 start: 990
end: 1001
type: "Text"
raw: "0 0 448 512"
data: "0 0 448 512"
 }
 ]
 }
 Attribute {...}
 type: "Attribute"
start: 1003
end: 1014
name: "width"
value: [...] (1)
  Text {...}
 start: 1010
end: 1013
type: "Text"
raw: "100"
data: "100"
 }
 ]
 }
 Attribute {...}
 type: "Attribute"
start: 1015
end: 1027
name: "title"
value: [...] (1)
  Text {...}
 start: 1022
end: 1026
type: "Text"
raw: "bars"
data: "bars"
 }
 ]
 }
 Attribute {...}
 type: "Attribute"
start: -1
end: -1
name: "class"
value: [...] (1)
  Text {...}
 type: "Text"
data: ""
raw: ""
start: -1
end: -1
 }
 ]
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (3)
  Text {...}
 type: "Text"
start: 1028
end: 1035
raw: "\n      "
data: "\n      "
 }
 RegularElement {...}
 type: "RegularElement"
start: 1035
end: 1389
name: "path"
attributes: [...] (2)
  Attribute {...}
 type: "Attribute"
start: 1041
end: 1386
name: "d"
value: [...] (1)
  Text {...}
 start: 1044
end: 1385
type: "Text"
raw: "M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"
data: "M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"
 }
 ]
 }
 Attribute {...}
 type: "Attribute"
start: -1
end: -1
name: "class"
value: [...] (1)
  Text {...}
 type: "Text"
data: ""
raw: ""
start: -1
end: -1
 }
 ]
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: []
 }
 }
 Text {...}
 type: "Text"
start: 1389
end: 1394
raw: "\n    "
data: "\n    "
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 1400
end: 1402
raw: "\n\t"
data: "\n\t"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 1411
end: 1412
raw: "\n"
data: "\n"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 1418
end: 1420
raw: " "
data: " "
 }
 Comment {...}
 type: "Comment"
start: 1420
end: 1523
data: "Note we can use class:expanded to bind our \"expanded\" CSS class to the \"expanded\" state variable"
 }
 Text {...}
 type: "Text"
start: 1523
end: 1524
raw: ""
data: ""
 }
 RegularElement {...}
 type: "RegularElement"
start: 1524
end: 1726
name: "div"
attributes: [...] (3)
  Attribute {...}
 type: "Attribute"
start: 1529
end: 1545
name: "class"
value: [...] (1)
  Text {...}
 start: 1536
end: 1544
type: "Text"
raw: "dropdown"
data: "dropdown"
 }
 ]
 }
 ClassDirective {...}
 start: 1546
end: 1560
type: "ClassDirective"
name: "expanded"
expression: Identifier {...}
 start: 1552
end: 1560
type: "Identifier"
name: "expanded"
 }
modifiers: []
 }
 OnDirective {...}
 start: 1561
end: 1602
type: "OnDirective"
name: "transitionend"
expression: Identifier {...}
 type: "Identifier"
start: 1579
end: 1601
loc:  {...}
 start:  {...}
 line: 68
column: 55
 }
end:  {...}
 line: 68
column: 77
 }
 }
name: "focusFirstDropdownLink"
 }
modifiers: []
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (9)
  Text {...}
 type: "Text"
start: 1603
end: 1605
raw: "\n\t"
data: "\n\t"
 }
 RegularElement {...}
 type: "RegularElement"
start: 1605
end: 1625
name: "a"
attributes: [...] (2)
  Attribute {...}
 type: "Attribute"
start: 1608
end: 1616
name: "href"
value: [...] (1)
  Text {...}
 start: 1614
end: 1615
type: "Text"
raw: "/"
data: "/"
 }
 ]
 }
 Attribute {...}
 type: "Attribute"
start: -1
end: -1
name: "class"
value: [...] (1)
  Text {...}
 type: "Text"
data: ""
raw: ""
start: -1
end: -1
 }
 ]
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (1)
  Text {...}
 type: "Text"
start: 1617
end: 1621
raw: "Home"
data: "Home"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 1625
end: 1627
raw: " "
data: " "
 }
 RegularElement {...}
 type: "RegularElement"
start: 1627
end: 1653
name: "a"
attributes: [...] (2)
  Attribute {...}
 type: "Attribute"
start: 1630
end: 1643
name: "href"
value: [...] (1)
  Text {...}
 start: 1636
end: 1642
type: "Text"
raw: "/about"
data: "/about"
 }
 ]
 }
 Attribute {...}
 type: "Attribute"
start: -1
end: -1
name: "class"
value: [...] (1)
  Text {...}
 type: "Text"
data: ""
raw: ""
start: -1
end: -1
 }
 ]
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (1)
  Text {...}
 type: "Text"
start: 1644
end: 1649
raw: "About"
data: "About"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 1653
end: 1655
raw: " "
data: " "
 }
 RegularElement {...}
 type: "RegularElement"
start: 1655
end: 1687
name: "a"
attributes: [...] (2)
  Attribute {...}
 type: "Attribute"
start: 1658
end: 1674
name: "href"
value: [...] (1)
  Text {...}
 start: 1664
end: 1673
type: "Text"
raw: "/projects"
data: "/projects"
 }
 ]
 }
 Attribute {...}
 type: "Attribute"
start: -1
end: -1
name: "class"
value: [...] (1)
  Text {...}
 type: "Text"
data: ""
raw: ""
start: -1
end: -1
 }
 ]
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (1)
  Text {...}
 type: "Text"
start: 1675
end: 1683
raw: "Projects"
data: "Projects"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 1687
end: 1689
raw: " "
data: " "
 }
 RegularElement {...}
 type: "RegularElement"
start: 1689
end: 1719
name: "a"
attributes: [...] (2)
  Attribute {...}
 type: "Attribute"
start: 1692
end: 1707
name: "href"
value: [...] (1)
  Text {...}
 start: 1698
end: 1706
type: "Text"
raw: "/contact"
data: "/contact"
 }
 ]
 }
 Attribute {...}
 type: "Attribute"
start: -1
end: -1
name: "class"
value: [...] (1)
  Text {...}
 type: "Text"
data: ""
raw: ""
start: -1
end: -1
 }
 ]
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (1)
  Text {...}
 type: "Text"
start: 1708
end: 1715
raw: "Contact"
data: "Contact"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 1719
end: 1720
raw: "\n"
data: "\n"
 }
 ]
 }
 }
 ]
 }
options: null
instance: Script {...}
 type: "Script"
start: 0
end: 132
context: "default"
content: Program {...}
 type: "Program"
start: 8
end: 123
loc:  {...}
 start:  {...}
 line: 1
column: 0
 }
end:  {...}
 line: 7
column: 0
 }
 }
body: [...] (2)
  VariableDeclaration {...}
 type: "VariableDeclaration"
start: 11
end: 32
loc:  {...}
 start:  {...}
 line: 2
column: 1
 }
end:  {...}
 line: 2
column: 22
 }
 }
declarations: [...] (1)
  VariableDeclarator {...}
 type: "VariableDeclarator"
start: 15
end: 31
loc:  {...}
 start:  {...}
 line: 2
column: 5
 }
end:  {...}
 line: 2
column: 21
 }
 }
id: Identifier {...}
 type: "Identifier"
start: 15
end: 23
loc:  {...}
 start:  {...}
 line: 2
column: 5
 }
end:  {...}
 line: 2
column: 13
 }
 }
name: "expanded"
 }
init: Literal {...}
 type: "Literal"
start: 26
end: 31
loc:  {...}
 start:  {...}
 line: 2
column: 16
 }
end:  {...}
 line: 2
column: 21
 }
 }
value: false
raw: "false"
 }
 }
 ]
kind: "let"
 }
 VariableDeclaration {...}
 type: "VariableDeclaration"
start: 36
end: 122
loc:  {...}
 start:  {...}
 line: 4
column: 1
 }
end:  {...}
 line: 6
column: 2
 }
 }
declarations: [...] (1)
  VariableDeclarator {...}
 type: "VariableDeclarator"
start: 42
end: 122
loc:  {...}
 start:  {...}
 line: 4
column: 7
 }
end:  {...}
 line: 6
column: 2
 }
 }
id: Identifier {...}
 type: "Identifier"
start: 42
end: 64
loc:  {...}
 start:  {...}
 line: 4
column: 7
 }
end:  {...}
 line: 4
column: 29
 }
 }
name: "focusFirstDropdownLink"
 }
init: ArrowFunctionExpression {...}
 type: "ArrowFunctionExpression"
start: 67
end: 122
loc:  {...}
 start:  {...}
 line: 4
column: 32
 }
end:  {...}
 line: 6
column: 2
 }
 }
id: null
expression: false
generator: false
async: false
params: [...] (1)
  ObjectPattern {...}
 type: "ObjectPattern"
start: 68
end: 78
loc:  {...}
 start:  {...}
 line: 4
column: 33
 }
end:  {...}
 line: 4
column: 43
 }
 }
properties: [...] (1)
  Property {...}
 type: "Property"
start: 70
end: 76
loc:  {...}
 start:  {...}
 line: 4
column: 35
 }
end:  {...}
 line: 4
column: 41
 }
 }
method: false
shorthand: true
computed: false
key: Identifier {...}
 type: "Identifier"
start: 70
end: 76
loc:  {...}
 start:  {...}
 line: 4
column: 35
 }
end:  {...}
 line: 4
column: 41
 }
 }
name: "target"
 }
kind: "init"
value: Identifier {...}
 type: "Identifier"
start: 70
end: 76
loc:  {...}
 start:  {...}
 line: 4
column: 35
 }
end:  {...}
 line: 4
column: 41
 }
 }
name: "target"
 }
 }
 ]
 }
 ]
body: BlockStatement {...}
 type: "BlockStatement"
start: 83
end: 122
loc:  {...}
 start:  {...}
 line: 4
column: 48
 }
end:  {...}
 line: 6
column: 2
 }
 }
body: [...] (1)
  ExpressionStatement {...}
 type: "ExpressionStatement"
start: 87
end: 119
loc:  {...}
 start:  {...}
 line: 5
column: 2
 }
end:  {...}
 line: 5
column: 34
 }
 }
expression: CallExpression {...}
 type: "CallExpression"
start: 87
end: 119
loc:  {...}
 start:  {...}
 line: 5
column: 2
 }
end:  {...}
 line: 5
column: 34
 }
 }
callee: MemberExpression {...}
 type: "MemberExpression"
start: 87
end: 117
loc:  {...}
 start:  {...}
 line: 5
column: 2
 }
end:  {...}
 line: 5
column: 32
 }
 }
object: MemberExpression {...}
 type: "MemberExpression"
start: 87
end: 111
loc:  {...}
 start:  {...}
 line: 5
column: 2
 }
end:  {...}
 line: 5
column: 26
 }
 }
object: Identifier {...}
 type: "Identifier"
start: 87
end: 93
loc:  {...}
 start:  {...}
 line: 5
column: 2
 }
end:  {...}
 line: 5
column: 8
 }
 }
name: "target"
 }
property: Identifier {...}
 type: "Identifier"
start: 94
end: 111
loc:  {...}
 start:  {...}
 line: 5
column: 9
 }
end:  {...}
 line: 5
column: 26
 }
 }
name: "firstElementChild"
 }
computed: false
optional: false
 }
property: Identifier {...}
 type: "Identifier"
start: 112
end: 117
loc:  {...}
 start:  {...}
 line: 5
column: 27
 }
end:  {...}
 line: 5
column: 32
 }
 }
name: "focus"
 }
computed: false
optional: false
 }
arguments: []
optional: false
 }
 }
 ]
 }
 }
 }
 ]
kind: "const"
 }
 ]
sourceType: "module"
 }
attributes: []
 }
 }

The AST is not public API and may change at any point in time

modern