accessible-menu-navigation/Navigator.js at main · Emersongrtcg/accessible-menu-navigation · 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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
window.a11y ??= {};
a11y.menu ??= {};

a11y.menu.Navigator = class {
    navigate(menu, navMap, action, currentIndex) {
        if (!(action in navMap)) {
            return; //Ignore unsuported keys.
        }

        navMap[action](menu, currentIndex);
    }

    get #basicNavMap() {
        return {
            at(array, index) {
                let length = array.length;
                return array[(index + length) % length];
            },

            Home(menu) {
                this.at(menu.buttons, 0).focus();
            },

            End(menu) {
                this.at(menu.buttons, -1).focus();
            }
        }
    }

    get menuNavMap() {
        return {
            ...this.#basicNavMap,

            ArrowLeft(menu, currentIndex) {
                this.at(menu.buttons, currentIndex - 1).focus();
            },

            ArrowRight(menu, currentIndex) {
                this.at(menu.buttons, currentIndex + 1).focus();
            }
        }
    }

    get menuWithSubMenusNavMap() {
        return {
            ...this.menuNavMap,

            subMenu(menu, currentIndex) {
                return menu.buttons[currentIndex].subMenu;
            },

            openSubMenu(button) {
                if (button.querySelector('& ~ menu:popover-open')) {
                    return;
                }
                button.subMenu.showPopover();
            },

            Enter(menu, currentIndex) {
                const subMenu = this.subMenu(menu, currentIndex);
                this.at(subMenu.buttons, 0).focus();
            },

            Space(menu, currentIndex) {
                //FIXME: For some reason, the Space key doesn't close the popover
                this.at(menu.buttons, currentIndex).click();
                this.Enter(menu, currentIndex);
            },

            ArrowDown(menu, currentIndex) {
                this.at(menu.buttons, currentIndex).click();
                this.openSubMenu(this.at(menu.buttons, currentIndex));

                const subMenu = this.subMenu(menu, currentIndex);
                this.at(subMenu.buttons, 0).focus();
            },

            ArrowUp(menu, currentIndex) {
                this.at(menu.buttons, currentIndex).click();
                this.openSubMenu(this.at(menu.buttons, currentIndex));

                const subMenu = this.subMenu(menu, currentIndex);
                this.at(subMenu.buttons, -1).focus();
            }
        }
    }

    get subMenuNavMap() {
        return {
            ...this.#basicNavMap,

            ArrowUp(menu, currentIndex) {
                this.at(menu.buttons, currentIndex - 1).focus();
            },

            ArrowDown(menu, currentIndex) {
                this.at(menu.buttons, currentIndex + 1).focus();
            },

            ArrowLeft(menu) {
                menu.parentMenu.navigate('ArrowLeft');
            },

            ArrowRight(menu) {
                menu.parentMenu.navigate('ArrowRight');
            }
        }
    }
};