Screen reader not reading model window automatically - html

I am trying on a JSP model window is not read automatically by a screen reader. This modal window is a second modal window first modal window is read automatically. But not the second model window.
Here is the code:
<div id=second-popup style="display:none" aria-live="polite" role="dialog">
<input type="hidden" id="none-label" value="nonetext"/>
<jsp:include page="somepagelinkhere.jsp" flush="true"/>
<html:hidden property="intialized"/>
<div class="div1">
<div class="div2">
<div class="div3">
<div class="div4">
<html:select styleId="" property="">
<html:options collection="" property="">
</html:select>
<html:select styleId="" property="">
<html:options collection="" property="">
</html:select>
</div>
<c:set var="var1"><bean:message /></c:set>
<input type="hidden" value="" id="removelabel">
<div class="div5">
<form:label property="" >
<select name="country" id="countrylabel" class="country" >
<option value="">${countrieslist}</option>
<c:forEach var="" items="">
<option value=""> ${countrieslists}</option>
</forEach>
</div>
<div id="city" class="citylist">
<form:label property="">
<select name="" id="" class="">
<option value=""></options>
</select>
</div>
</div>
</div>
</div>
,showhide: function(){
$("button").click(function(e){
e.preventDefault;
$("button").attr("aria-hidden","true");
$("second-popup").attr("style","display:block");
$("second-popup").attr("aria-hidden","false");
});
}
$(document).ready(function(){
$("first-popup").attr("tabindex",0);
$("first-popup").attr("tabindex",0);
$("Second-popup").focus();
});
In the above code first div contains second modal window content code blue print. I need this to be read automatically read by NVDA screen reader
and I tried by putting role="dialog" aria=labelledby="id" aria-describedby="" on the parent div, but still screen reader is not reading automatically.

I was able to make the screen reader automatically read the content of a modal overlay with a combination of the following on my overlay section:
aria-labelledby="title_id" aria-describedby="body_id" aria-live="assertive"
plus setting the focus to the autofocus element in the overlay content:
overlay.querySelector('*[autofocus]').focus();
It only worked with all these things together.

Related

Drop Down contents width is wider and out of screen

HI I have the following html and this is part of the html.
<div class="pad1x flex-row leftLblMode">
<div class="pad1x flex-col-xs-12 flex-col-sm-6">
<div style="">
<label for="kaf_16" id="klb_16" class="input-control-label">
Code
<span class="mandatory">*</span>
</label>
</div>
</div>
<div class="pad1x flex-col-xs-12 flex-col-sm-6">
<select name="kaf_16" id="kaf_16" aria-label="kaf_16" aria-required="true" data-sid="ddl_code" class="input-control" data-klookup="C_1" data-kcurrentval="" style="font-weight: bold;">
<option value="+01">+01</option>
<option value="+02">+02</option>
</select>
</div>
</div>
When clicked on drop down, the contents is showing out of the screen and I am viewing the contents in mobile view in the browser.
I tried the css as below but it is not working.
.tabularView .input-control{
position: relative;
}
I am trying to find the solution and learn in the process.

why is conditional rendering not working for form input in vuejs

I have a form with select options :
<div>
<select>
<option v-model="department" :value="n" v-for="n in ['Please select', 'Medicine', 'Dental']">{{n}}</option>
</select>
</div>
<div class="alignBtn">
<label><span> </span><input type="submit" v-on:click.prevent="generateSlip()" value="Submit" />
</label>
</div>
and based on the selection in the above I want to display header content:
<div v-if="{department} === 'Medicine'">
<h1>Option A</h1>
</div>
<div v-else>
<h1>Option B</h1>
</div>
but every time Option B is getting outputted .
I think that the v-model directive should be in the select element. You probably meant to do this ..
<div>
<select v-model="department">
<option :value="n" v-for="n in ['Please select', 'Medicine', 'Dental']">{{n}}</option>
</select>
</div>
<div class="alignBtn">
<label><span> </span><input type="submit" v-on:click.prevent="generateSlip()" value="Submit" />
</label>
</div>
You also don't need destructuring in this case. So you can use department in your equality comparison directly ..
<div v-if="department === 'Medicine'">
<h1>Option A</h1>
</div>
<div v-else>
<h1>Option B</h1>
</div>

Design issue with the bootstrap based form in iphone browser

I have a blog page where user can post comments, comment form shows up as a bootstrap modal when user click on a link or button.
This website is designed in asp.net webform just in case information is helpful
Since i cant put all the code i have just put related code of the page with css & JS.
This form works fine on Desktop browser and also on samsung browser but same breaks on iphone.
Form has multiple fields for input Name, Email, Country, Comments etc
When i start to enter Name cursor show below the Name inputbox and when i enter email cursor show almost two row below the email input feild..
I am adding screen for reference and also Codepen link
1[]2
I am not sure why it is breaking as i am not able to debut it in Iphone
<div class="modal fade in" id="commentModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="display: block;" aria-hidden="false">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Comment</h4>
</div>
<div class="modal-body">
<!--- UpdatePanel -->
<div id="MainContent_UpdatePanel1">
<!--- Code -HERE -->
<div id="MainContent_pnlForm">
<div class="comment-intro-w">
<span id="MainContent_lblCommentMsg" class="txtLabelComment">All fields are mandatory.</span>
</div>
<div data-val-validationgroup="vgCommentForm" id="MainContent_vsCommentForm" class="validation-sum" data-valsummary="true" style="display:none;">
</div>
<div class="comment-fullname-w">
<input name="ctl00$MainContent$txtCommentFullName" id="MainContent_txtCommentFullName" tabindex="1" class="txt-comment-fn" placeholder="Full Name" type="text">
<span data-val-controltovalidate="MainContent_txtCommentFullName" data-val-errormessage="Name can't be blank" data-val-validationgroup="vgCommentForm" id="MainContent_rfv1" class="dp-comment-validation" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid"
data-val-initialvalue="" style="visibility:hidden;">Name can't be blank</span>
</div>
<div class="comment-email-w">
<input name="ctl00$MainContent$txtCommentEmail" id="MainContent_txtCommentEmail" tabindex="1" class="txt-comment-fn" placeholder="Email" type="text">
<span data-val-controltovalidate="MainContent_txtCommentEmail" data-val-errormessage="Email can't be blank" data-val-validationgroup="vgCommentForm" id="MainContent_rfvEmail" class="dp-comment-validation" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid"
data-val-initialvalue="" style="visibility:hidden;">Email can't be blank</span>
<span data-val-controltovalidate="MainContent_txtCommentEmail" data-val-errormessage="Enter correct email" data-val-validationgroup="vgCommentForm" id="MainContent_revEmail" class="dp-comment-validation" data-val="true" data-val-evaluationfunction="RegularExpressionValidatorEvaluateIsValid"
data-val-validationexpression="\w+([-+.']\w+)*#\w+([-.]\w+)*\.\w+([-.]\w+)*" style="visibility:hidden;">Enter correct email</span>
</div>
<div class="comment-country-w">
<select name="ctl00$MainContent$ddCountry" id="MainContent_ddCountry" tabindex="3" class="dd-comment-country">
<option value="">Country</option>
<option value="AF">Afghanistan</option>
<option value="AL">Albania</option>
</select>
<span data-val-controltovalidate="MainContent_ddCountry" data-val-errormessage="Select Country" data-val-validationgroup="vgCommentForm" id="MainContent_rfvddC" class="dp-comment-validation" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid"
data-val-initialvalue="" style="visibility:hidden;">Select Country</span>
</div>
<div class="comment-message-w">
<textarea name="ctl00$MainContent$txtCommentMessage" rows="5" cols="20" id="MainContent_txtCommentMessage" tabindex="4" class="txt-comment-msg" placeholder="Message"></textarea>
<span data-val-controltovalidate="MainContent_txtCommentMessage" data-val-errormessage="Message can't be blank" data-val-validationgroup="vgCommentForm" id="MainContent_rfvmsg" class="dp-comment-validation" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid"
data-val-initialvalue="" style="visibility:hidden;">Message can't be blank</span>
</div>
<div class="comment-anonymous-w">
<span class="chk-anonymous"><input id="MainContent_cbAnonymous" name="ctl00$MainContent$cbAnonymous" type="checkbox"><label for="MainContent_cbAnonymous">I wish to be anonymous. Do not publish my name with my comment.</label></span>
</div>
<div class="comment-btnsave-w">
<input name="ctl00$MainContent$btnSaveComments" value="Post Comment" onclick="ClientSideClick(this);WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$MainContent$btnSaveComments", "", true, "vgCommentForm", "", false, true))"
id="MainContent_btnSaveComments" class="buttonPopups" type="button">
</div>
</div>
<!--- Code -HERE -->
</div>
<!--- UpdatePanel -->
</div>
</div>
</div>
</div>
I found the solution it seems to work .modal-open { position: fixed; width: 100%; }
It seems like a bug in iOS. Any other solution is welcome
Personally, position: fixed scroll to top automatically. Quite annoying !
To avoid penalizing other devices and versions I apply this fix only to the appropriate versions of iOS.
For the javascript/jQuery
$(document).ready(function() {
// Detect ios 11_0_x affected
// NEED TO BE UPDATED if new versions are affected
var ua = navigator.userAgent,
iOS = /iPad|iPhone|iPod/.test(ua),
iOS11 = /OS 11_0_1|OS 11_0_2|OS 11_0_3|OS 11_1/.test(ua);
// ios 11 bug caret position
if ( iOS && iOS11 ) {
// Add CSS class to body
$("body").addClass("iosBugFixCaret");
}
}
For the CSS
/* Apply CSS to iOS affected versions only */
body.iosBugFixCaret.modal-open { position: fixed; width: 100%; }
Reference Source iOS 11 Safari bootstrap modal text area outside of cursor

Getting keyboard focus on modal once open without JavaScript

Once I click on a button on the main page a modal opens up with a list of items for the user to select from. The content within my modal is not getting focus when the modal is opened instead when I press tab - I see it tabbing through the rest of the items on the homepage (background) before actually getting into the modal.
How can I get my modal content to get focus once open rather than having to tab through the main page before reaching the modal?
Here is my code for the modal:
<div role="dialog" aria-modal="true" class="modal">
<div class="modal-dialog override">
<div class="modal-content">
<div class="section">
<header class="section-header">
<button tabindex="0" class="pull-right win-icon win-icon-Clear" (click)="close()" title="close-dialog"></button>
</header>
<div class="section-body">
<ng-content select=".modal-body"></ng-content>
</div>
</div>
</div>
</div>
</div>
This is my method for opening the modal:
public open() {
this.modal.open();
this.myService.getUsers()
.subscribe((data: ClassRoster[]) => {
this.classData = data;
});
}
You can use the autofocus attribute
The autofocus attribute is a boolean attribute.
When present, it specifies that an element should automatically get focus when the page loads.
<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php">
First name: <input type="text" name="fname" autofocus><br>
Last name: <input type="text" name="lname"><br>
<input type="submit">
</form>
<p><strong>Note:</strong> The autofocus attribute of the input tag is not supported in Internet Explorer 9 and earlier versions.</p>
</body>
</html>
Without JavaScript
Give your button the autofocus attribute:
<div role="dialog" aria-modal="true" class="modal">
<div class="modal-dialog override">
<div class="modal-content">
<div class="section">
<header class="section-header">
<button autofocus tabindex="0" class="pull-right win-icon win-icon-Clear" (click)="close()" title="close-dialog"></button>
</header>
<div class="section-body">
<ng-content select=".modal-body"></ng-content>
</div>
</div>
</div>
</div>
</div>
The reason that you have to do it to the button and cannot apply it straight to the div because autofocus only works on input, textarea, select and button. It's not ideal, but it works.
With JavaScript
Make your modal opening function like this:
public open() {
this.modal.open();
document.querySelector('.modal').focus();
this.myService.getUsers()
.subscribe((data: ClassRoster[]) => {
this.classData = data;
});
}

How to put control id based on parent control reference/ID to avoid conflict

i am facing one issue due to one button control existed with same ID at two place in single page.
As i have created a custom field for jira which is appear on issue view screen and edit screen both.
"Edit" screen is just be a DIV and appear as display none till edit is clicked else issue view screen is appear (both on single page).
my created button existed on both the area.
How can we keep the condition like -
if parent is "DIV - edit" then keep different ID of button
ELSE
another ID of button. ? or any another way of jquery to resolve this conflict issue.
Below is stuff which shows same control at two place:
issue view screen stuff on a page:
.... .....
<li id="rowForcustomfield_11200" class="item">
<div class="wrap">
<strong title="final Dynamic Value" class="name">final Dynamic Value:</strong>
<div id="customfield_11200-val" class="value type-dynamicvalue editable-field active"
data-fieldtype="dynamicvalue">
<form id="customfield_11200-form" class="ajs-dirty-warning-exempt" action="#">
<div class="inline-edit-fields">
<div class="field-group">
<table id="customfield_11200:maintable">
<tbody>
<tr width="15%">
<tr width="15%">
<tr width="15%">
<tr width="15%">
<tr width="15%">
<tr width="15%">
<tr width="15%">
</tbody>
</table>
<input type="button" value="add" id="finaladd" />**PROBLEM CONTROL**
<input type="button" value="remove" id="finalremove" />**PROBLEM CONTROL**
</div>
</div>
<span class="overlay-icon throbber" />
<div class="save-options" tabindex="1">
</form>
</div>
</div>
</li>
......
....
..
note: i have highlighted above with tag comment as "PROBLEM CONTROL
Another stuff on same page for edit issue screen div:
.......
.............
<div id="edit-issue-dialog" class="aui-popup box-shadow aui-dialog-open popup-width-custom aui-dialog-content-ready"
style="width: 810px; margin-left: -405px; margin-top: -263.5px;">
<h2 class="aui-popup-heading">
<div class="aui-popup-content">
<div class="qf-container">
<div class="qf-unconfigurable-form">
<form action="#" name="jiraform" class="aui">
<div class="form-body" style="max-height: 419px;">
<input type="hidden" name="id" value="11100" />
<input type="hidden" name="atl_token" value="BP8Q-WXN6-SKX3-NB5M|6533762274aaa5d16f14dbbe010917f161596d8d|lin" />
<div class="content">
<div class="aui-tabs horizontal-tabs" id="horizontal">
<ul class="tabs-menu">
<div class="tabs-pane" id="tab-0">
<div class="tabs-pane active-pane" id="tab-1">
<div class="field-group aui-field-something">
<div class="field-group">
<div class="field-group">
<div class="field-group">
<label for="customfield_11200">
final Dynamic Value</label>
<table id="customfield_11200:maintable">
<input type="button" value="add" id="finaladd" /> **PROBLEM CONTROL**
<input type="button" value="remove" id="finalremove" /> **PROBLEM CONTROL**
</div>
</div>
</div>
<div class="field-group aui-field-wikiedit comment-input">
</div>
</div>
<div class="buttons-container form-footer">
</form>
</div>
</div>
</div>
</div>
.....
...
..
NOTE: above highlighted issue at PROBLEM CONTROL tag comment.
I think you can differentiate by using the id edit-issue-dialog
if($("#edit-issue-dialog").length){
//u r in edit form, and do your stuff
}else{
//in create form do your stuff
}