Popup-meny

Komponent: IPopupMenu

Innehåll

Teleport
Fokushantering
API

Popup-meny är en ramverkskomponent som används av navigeringsmenyn.

<template>
    <div>
        <button
            id="popup-menu-open-button"
            ref="popup-anchor"
            type="button"
            class="button button--secondary"
            @click="onClick"
            @keyup="onKeyUp"
            @keydown="onKeyDown"
        >
            Öppna popupmeny
        </button>

        <i-popup-menu
            id="popup-menu"
            v-model="selectedItem"
            v-model:focused-item="focusedItem"
            :items="items"
            :is-open="popupOpen"
            :anchor="getAnchor()"
            enable-keyboard-navigation
            @close="onClose"
        ></i-popup-menu>

        <pre>Selected item: {{ selectedItem }}</pre>
    </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { IPopupMenu } from "..";

const exampleItems = [
    { label: "Länk 1", key: "MENU_1" },
    { label: "Länk 2", key: "MENU_2" },
    { label: "Länk 3", key: "MENU_3" },
    { label: "Länk 4 (med href)", key: "MENU_HREF", href: "/" },
    {
        label: "Länk 5 (med href + target)",
        key: "MENU_EXTERN",
        href: "https://github.com/Forsakringskassan/designsystem",
        target: "_blank",
    },
];

const upKeys = ["Up", "ArrowUp"];
const downKeys = ["Down", "ArrowDown"];
const verticalKeys = [...upKeys, ...downKeys];
const preventKeys = ["Tab", ...verticalKeys];

export default defineComponent({
    name: "IPopupMenuExample",
    components: { IPopupMenu },
    data() {
        return {
            items: exampleItems,
            selectedItem: "",
            focusedItem: "",
            popupOpen: false,
        };
    },
    methods: {
        getAnchor(): HTMLElement {
            return this.$refs["popup-anchor"] as HTMLElement;
        },
        onClose(): void {
            this.popupOpen = false;
        },
        onClick(): void {
            this.popupOpen = !this.popupOpen;
        },
        onKeyUp(event: KeyboardEvent): void {
            if (!this.popupOpen) {
                return;
            }
            if (preventKeys.includes(event.key)) {
                event.preventDefault();
            }
        },
        onKeyDown(event: KeyboardEvent): void {
            if (!this.popupOpen) {
                return;
            }
            if (!preventKeys.includes(event.key)) {
                return;
            }

            const tabNext = event.key === "Tab" && !event.shiftKey;
            const focusPopup = tabNext || verticalKeys.includes(event.key);
            if (focusPopup) {
                event.preventDefault();
                const index = upKeys.includes(event.key) ? this.items.length - 1 : 0;
                this.focusedItem = this.items[index].key;
                return;
            }

            this.popupOpen = false;
        },
    },
});
</script>

Teleport

Komponenten använder IPopup och kommer därför att teleporteras till body-elementet när den visas som overlay. Detta kan ändras till valfritt element genom att ändra värdet för config.teleportTarget.

Fokushantering

Popupmenyn kräver att du själv sätter fokus till menyn ifrån knappen som öppnar den. Detta kan du göra genom att ange en key i v-model:focused-item som matchar ett objekt i items. Komponenten kommer då sätta fokus på det elementet som matchade objektet.

Se koden för ovan exempel för hur man kan hantera fokus till menyn i samband med tangentbordsnavigering.