Элемент svg <a>не отображает фокус на firefox - PullRequest
Новая
       41

Элемент svg <a>не отображает фокус на firefox

0 голосов
/ 25 февраля 2020

Я сталкиваюсь с барьером при навигации по клавиатуре в firefox, поскольку он относится к тегам SVG <a> внутри фреймов.

Воспроизвести то, с чем я имею дело. Запустите следующий фрагмент кода в firefox (на момент написания этой статьи 73.0.1 (64-разрядная версия) в Windows 10). Затем попытайтесь перемещаться между элементами с вкладками на странице с помощью клавиши Tab. Как вы увидите, первый iframe отрегулирует положение прокрутки окна, чтобы сфокусировать <a>. Однако второго фрейма не будет. Кроме того, если вы вручную измените положение прокрутки в этом фрейме, а затем нажмете кнопку табуляции, положение прокрутки будет сброшено до 0,0.

Эта проблема не возникает в Chrome.

Мой вопрос: есть ли кто-нибудь, кто может произвести желаемое поведение в Firefox? IE заставить второй iframe вести себя как первый?

Пока у меня есть следующий код: 

if(navigator.userAgent.toLowerCase().indexOf('firefox') > -1){
    forceScrollIntoViewOnFocus()
}

function forceScrollIntoViewOnFocus(){
    document.addEventListener('keyup', e => {
        if(e.key === "Tab") {
            const rect = document.activeElement.getBoundingClientRect()
            window.scrollTo(rect.x - 50, 0)
        }   
    })
}

И это работает до некоторой степени. Однако позиция прокрутки сначала перемещается на 0,0 на мгновение, а затем перемещается, чтобы вывести сфокусированный элемент в поле зрения, что приводит к визуальному взлому sh или толчку, что нежелательно. 

const htmlFrameDoc = `
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>

        main {
            display: flex;
        }

        div {
            margin-right: 800px;
        }
    </style>
</head>
<body>
    <main>
        <div><a href="http://google.com">link</a></div>
        <div><a href="http://google.com">link 2</a></div>
        <div><a href="http://google.com">link 3</a></div>
        <div><a href="http://google.com">link 4</a></div>
        <div><a href="http://google.com">link 5</a></div>
        <div><a href="http://google.com">link 6</a></div>
    </main>
</body>
</html>
`

const svgFrameDoc = `
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        svg {
            width: 2000px
        }

    </style>
</head>
<body>
    
<svg id="bcfc0609-76dc-45c5-a5bd-e0c1f9faf95a" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 1856 150.03">
    <title>test</title>
    <a href="http://google.com" tabindex="0">
        <circle cx="29.5" cy="119.53" r="29.5" style="fill: #c13030" />
    </a>
    <a href="http://google.com" tabindex="0">
        <circle cx="179.5" cy="76.53" r="29.5" style="fill: #c13030" />
    </a>
    <a href="http://google.com" tabindex="0">
        <circle cx="356.5" cy="60.53" r="29.5" style="fill: #c13030" />
    </a>
    <a href="http://google.com" tabindex="0">
        <circle cx="523.5" cy="83.53" r="29.5" style="fill: #c13030" />
    </a>
    <a href="http://google.com" tabindex="0">
        <circle cx="706.5" cy="119.53" r="29.5" style="fill: #c13030" />
    </a>
    <a href="http://google.com" tabindex="0">
        <circle cx="911.5" cy="83.53" r="29.5" style="fill: #c13030" />
    </a>
    <a href="http://google.com" tabindex="0">
        <circle cx="1177.5" cy="90.53" r="29.5" style="fill: #c13030" />
    </a>
    <a href="http://google.com" tabindex="0">
        <circle cx="1525.53" cy="29.5" r="29.5" style="fill: #c13030" />
    </a>
    <a href="http://google.com" tabindex="0">
        <circle cx="1826.5" cy="120.53" r="29.5" style="fill: #c13030" />
    </a>
</svg>
</body>
</html>
`

document.getElementById('html-iframe').setAttribute('srcdoc', htmlFrameDoc)
document.getElementById('svg-iframe').setAttribute('srcdoc', svgFrameDoc)
  <iframe id="html-iframe"></iframe>
  <iframe id="svg-iframe"></iframe>
...