Ionic InAppBrowser 焦點在 iOS 上落后

Question

問題
我有一個使用 Ionic4 的InAppBrowser打開的頁面。 瀏覽器打開正常，但焦點停留在上一個屏幕上。

這對於殘障用戶來說是一個問題，因為他們無法使用 Voiceover 等輔助工具瀏覽打開的瀏覽器。 當他們滑動時，它只是在打開的瀏覽器后面的元素上滑動。 該問題似乎與 iOS 無關（Android Talkback 正確地集中在應用內瀏覽器中）。

我試過的
到目前為止，我已經嘗試訂閱 'loadstop' 事件並執行 Javascript 以專注於瀏覽器中的 ID：

包.json

"ionic": "4.7.1",
"@ionic-native/in-app-browser": "^5.0.0"

---

導航點擊指令
我對這個指令的一些靈感來自這里的頂級 SO 答案。

import { InAppBrowser, InAppBrowserOptions } from '@ionic-native/in-app-browser/ngx';

...

defaultOptions_ios: InAppBrowserOptions = {
    footer: 'yes',
    location: 'no',
    enableViewportScale: 'yes',
    closebuttoncaption: 'Close',
    transitionstyle: 'fliphorizontal',
    usewkwebview: 'yes',
    hideurlbar: 'yes',
    hidenavigationbuttons: 'yes',
    footercolor: '#000000',
    toolbarcolor: '#000000',
    closebuttoncolor: '#ffffff',
    lefttoright: 'no'
};

constructor(
    private inAppBrowser: InAppBrowser) {
}

openBrowser(url) {
    let inAppBrowserRef = this.inAppBrowser.create(url, '_blank', defaultOptions_ios);
    
    inAppBrowserRef.on('loadstop').pipe(take(1)).subscribe(() => {
        inAppBrowserRef.executeScript({code: `
          const elementId = document.querySelector('id');
          if(elementId) {
            elementId.focus();
          }
        `});
      });
}

但是，焦點仍停留在前一個屏幕上。 我正在尋找另一種可能的解決方案，將重點放在 iOS 上的應用內瀏覽器上。

Answer 1

嘗試這個 ：

openBrowser(url) {
    let inAppBrowserRef = this.inAppBrowser.create(url, '_blank', defaultOptions_ios);
    
    inAppBrowserRef.on('loadstop').pipe(take(1)).subscribe(() => {
        inAppBrowserRef.executeScript({code: `
          const elementId = document.querySelector('id');
          if(elementId) {
            elementId.focus();
            elementId.blur();
          }
        `});
      });
}

或者試試這個，在 app.component.ts 中實現它：

      window.addEventListener('loadstart', (e) => {
        const elementFocused: any = document.querySelector('id');
        if (elementFocused) {
          elementFocused.blur();
          elementFocused.focus();
        }
      });

Answer 2

為了讓 Ionic inapp 瀏覽器獲得焦點，我最終必須做的是將 tabindex 應用到我正在關注的元素上。

inAppBrowserRef.on('loadstop').pipe(take(1)).subscribe(() => {
    inAppBrowserRef.executeScript({code: `
      const elementId = document.querySelector('id');
      if(elementId) {
        elementId.setAttribute('tabindex', '-1');
        elementId.focus();
      }
    `});
  });

它沒有，我發現它需要一個才能專注於它。 在我這樣做之后，它按預期工作。