JQuery Mobile сила VoiceOver, чтобы сосредоточиться на титул после GotoPage

Question

С JQuery mobile и VoiceOver активной, после изменения страницы с

$.mobile.changePage("page1.html"); 

VoiceOver не сосредотачиваются на названии. Я хочу, чтобы заставить фокус VoiceOver прочитать название новой страницы

НЕ рабочих испытаний:

$(".ui-page-active .ui-title").click().focus().tap(); 
$(".ui-page-active .ui-title").trigger("create"); 
$(".ui-page-active .ui-title").attr("role","alert"); 
$(".ui-page-active .ui-title").attr("role","dialog"); 

тестовой страницы, не всегда работают https://jsfiddle.net/218xLbwd/14/

РЕШЕНИЕ: используйте событие forforeshow, чтобы сосредоточиться на названии. также благодаря Эрик Джонсон Д. за его усилия

//for Jquery till 1.4.0 
    $(document).on('pagebeforeshow', function() { 
    $(".ui-page-active > .ui-header h1").attr('tabindex', "-1"); 
    $(".ui-page-active > .ui-header h1").focus(); 
    }); 
    //for Jquery 1.6.0+ 
    $(document).on('pagecontainerbeforeshow', function() { 
    $(".ui-page-active > .ui-header h1").attr('tabindex', "-1"); 
    $(".ui-page-active > .ui-header h1").focus(); 
    }); 

Answer 1

UPDATE: Использование JQuery Mobile

Stackoverflow фрагмент кода не работает, так что видеть https://jsfiddle.net/EricOP/wo40z1m9/3/

HTML

<div data-role="header"> 
    <h1>Foo</h1> 
    </div> 

    <div data-role="content"> 
    <p>I'm first in the source order so I'm shown as the first page.</p> 
    <p>View internal page called <a id="barclick" href="#bar">bar</a></p> 
    </div> 

    <div data-role="footer"> 
    <h4>Page Footer</h4> 
    </div> 

</div> 

<!-- Start of second page --> 
<div data-role="page" id="bar"> 

    <div data-role="header"> 
    <h1>Bar</h1> 
    </div> 

    <div data-role="content"> 
    <p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.</p> 
    <p><a href="#foo">Back to foo</a></p> 
    </div> 

    <div data-role="footer"> 
    <h4>Page Footer</h4> 
    </div> 

</div> 

CSS

/* CSS to prevent weird blue border in Chrome after setting focus */ 
h2:focus { outline: 0; } 

JS

(function() { 
    // For changing to a specific page. 
    // Also see https://api.jquerymobile.com/pagecontainer/#event-beforeshow which was helpful for Sano. 
    $("#bar").on('pageshow', function(barPage) { 
    console.warn('Pageshow on bar, Sano.', barPage); 
    $("h1:visible").attr('tabindex', "-1"); 
    $("h1:visible").css('background-color', '#aaa'); 
    $("h1:visible").focus(); 
    }); 

    // For changing between all jQuery Mobile pages. https://api.jquerymobile.com/pagecontainer/#event-change 
    $(document).on('pagecontainerchange', function() { 
    console.warn('New cool event, that always triggers, Pagecontainerchange on document, Sano.'); 
    $("h1:visible").attr('tabindex', "-1"); 
    $("h1:visible").css('color', '#dd4814'); 
    $("h1:visible").focus(); 
    }); 

})(); 

Активация события (https://api.jquerymobile.com/pagecontainer/#event-change), обещание, или обратного вызова лучше, чем использовать синхронизированную ждать, так что можно избежать, не имея догадаться, сколько времени рендеринга изменения отображения.

Sano особо упоминается, что https://api.jquerymobile.com/pagecontainer/#event-beforeshow был полезным.

//for jQuery until 1.4.0 
    $(document).on('pagebeforeshow', function() { 
    $(".ui-page-active > .ui-header h1").attr('tabindex', "-1"); 
    $(".ui-page-active > .ui-header h1").focus(); 
    }); 
    //for jQuery 1.6.0+ (Also works for 1.4) 
    $(document).on('pagecontainerbeforeshow', function() { 
    $(".ui-page-active > .ui-header h1").attr('tabindex', "-1"); 
    $(".ui-page-active > .ui-header h1").focus(); 
    });