JAWs not read pdf resume in iframe pop up window

Question

User-944424728 posted

Hello, I have a preview link. When I click on that link, the resume in pdf pop up as a preview.  I tried to set the focus to read the pdf resume screen but screen reader/JAWs only read the behind screen/background and not the resume pop up screen.  How can I set the focus to read the pdf screen such as "John Doe" on the first line in pdf resume preview. Thank you.

--

$(document).ready(function () {
$('#<%=btnPreview.ClientID %>').click(function () {

<%-- $("#<%= ucResumePreview.FindControl("Preview").ClientId %>").focus();--%>
});
//PreviewModalExtender.Show()
//PreviewModalExtender.Focus()
</script>

--usercontrol

<td id="Preview" runat="server" align="center" style="background: url(../Handlers/Content/Images/Image.ashx?resume_preview.gif) center center;">

--

<!-- Ajax Modal Start -->
<asp:Button runat="server" ID="btnHidden" aria-label="Hidden Button" aria-hidden="true" Style="display: none" />
<Toolkit:ModalPopupExtender ID="PreviewModalExtender" TargetControlID="btnHidden" runat="server" PopupControlID="pnlPreview" BackgroundCssClass="modalBackground"
CancelControlID="btnModalCancel">
</Toolkit:ModalPopupExtender>
<!-- Draw Resume Format Tab Area -->
<asp:Panel ID="pnlPreview" runat="server" CssClass="ResumePreviewModalPopup" Style="display: none;" Width="630px">
<iframe id="frameResumePreview" runat="server" class="HPRwidth100 HPRgsiheight525" scrolling="yes"></iframe>
<table class="HPRwidth100">
<tr>
<td align="center">
<asp:Button ID="btnModalCancel" runat="server" class="formbutt" Text="<%$ Resources:strClose %>" Visible="true" ClientIDMode="Static" />
</td>
</tr>
</table>
</asp:Panel>
<!-- Ajax Modal End -->
</asp:Panel>

--

Protected Sub btnPreview_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnPreview.Click

If HaveChangesBeenMadeSinceInitialLoad() Then
Call SetResumeTemplateObjectProperties(False)

Session("PreviewTemplate") = _objResumeTemplate

frameResumePreview.Attributes("src") = "ResumePreview.aspx?changes=true&idnum=0&pu=1"
Else

frameResumePreview.Attributes("src") = "ResumePreview.aspx" & SecurityProcessor.Encrypt("idnum=" & _objResumeTemplate.ResTemplateID & "&pu=1")
End If

PreviewModalExtender.Show()

End Sub

--

in browser code:

<a id="ctl00_Main_content_btnPreview" title="Preview Sample Résumé with this Template" class="LinkHand" href="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$Main_content$btnPreview&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, true))" tabindex="0">Preview Sample Résumé with this Template</a>

Answer 1

User-893317190 posted

Hi aspvbnet,

 If you want to set foucus when pdf reload, you could try

 <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
        <script>
            $(function () {
            
                document.getElementById("frameResumePreview").onload = function () {
                    // To ensure the iframe is focus, change its contentEditable attribute so that it could be focused 
                    $(this.contentWindow.document).find("body").attr("contentEditable", true);
                     // the body of iframe focus
                    (this.contentWindow).document.body.focus();
                     // test whether it is focused
                   console.log(    $(this.contentWindow.document.body).is(":focus"));
                } 
            })
       
    </script>
         

If you use firefox , please refer to the link  https://stackoverflow.com/questions/1508348/set-focus-to-iframe-body-content-in-firefox?rq=1 to learn how to set focus in firefox.

Also try to use aria-labelledby attribute, check the link below for  JAWs and pop up window:

https://github.com/wet-boew/wet-boew/issues/6427

And this

https://stackoverflow.com/questions/32066728/accessibility-reading-out-modal-message-in-jaws

Best regards,

Ackerly Xu