I am working in a UI where a button will be replaced by a panel with small form that can not be closed. The button will disappear after the user clicks on it.
The problem is not about how to do it in JavaScript, The problem is about how to improve the accessibility.
I am trying to solve this problem as a button collapse, hide the button except for screen readers and manage the tabindex of this element after click to be sure no one can access again.
I create a codepen to explain the solution with a simplification of my solution, but seen to hacky for me.
https://codepen.io/luarmr/pen/oWbZYK
HTML:
<div>
<button onclick="showContent(this, 'action-box');" aria-expanded="false" aria-controls="action-box">Do you want to perform an action?
</button>
<div id="action-box" role="region" aria-label="We will do something in this box" aria-hidden="true">
<form action="some action">
<label for="myinput" class="control-label sr-only">
Introduce a value
</label>
<input class="form-control" type="text" name="myinput" value="" placeholder="introduce a value">
<input type="submit" value="send action">
</form>
</div>
</div>
JS:
function showContent(node, id) {
$(node).attr('aria-expanded', 'true')
.attr('tabindex','-1');
$('#'+id).attr('aria-hidden', 'false');
}
Should just add aria-expanded and move the focus to the new panel? I feel this solution overcomplicated.
Related
icheck-bootstrap is a pure css checkboxes and radio buttons for Twitter bootstrap. This implies it will work with any of the frontend libraries. At least that's the way I figured it... And indeed, his use from the readme of his github page for the library :Link to icheck-bootstrap demo with docs Does work it just has a side effect that I can live with.
In at lease one place where I'm trying to use this library, the component is in a modal dialog that is used to login to the site. Below is the html template code for the component:
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" aria-hidden="true" (click)="hideModal()">
<span aria-hidden="true">×</span>
</button>
<h3 class="modal-title-site text-center"> Login to Rove </h3>
</div>
<form #f="ngForm" (ngSubmit)="onSubmit()">
<div class="modal-body">
<div class="form-group login-username">
<div>
<input name="log" id="login-user" class="form-control input" size="20"
[(ngModel)]="model.email" placeholder="Enter User Email" type="email">
</div>
</div>
<div class="form-group login-password">
<div>
<input name="Password" id="login-password" class="form-control input" size="20"
[(ngModel)]="model.password" placeholder="Password" type="password">
</div>
</div>
<div class="col-lg-12">
<div class="form-group">
<span class="checkbox login-remember">
<input name="rememberme" value="forever" checked="checked"
[(ngModel)]="model.rememberMe" type="checkbox">
<label for="rememberme">Remember Me</label>
</span>
</div>
</div>
<div>
<div>
<input name="submit" class="btn btn-block btn-lg btn-primary" value="LOGIN" type="submit">
</div>
</div>
</div>
</form>
<div class="modal-footer">
<p class="text-center">
Not here before? <a data-toggle="modal" data-dismiss="modal"
href="#ModalSignup">Sign Up.</a> <br>
Lost your password?
</p>
</div>
The code above is without the icheck-bootstrap implemented code. Below I have changed the key lines of code that will implement the checkbox as per the readme documention on the github site
<div class="icheck-success checkbox login-remember">
<input id="rememberme" value="forever" checked="checked"
[(ngModel)]="model.rememberMe" type="checkbox">
<label for="rememberme">Remember Me</label>
</div>
this code works as per the readme, unfortunately, after the dialog has been closed the modality of the modal dialog stays and the main page behind it will not allow any input from keyboard or mouse.
Note the input tag in the effective lines, I have change from the name attribute, to the id attribute. That seems wrong to me but, it is as the documentation suggests and, the only way it will completely work. If I do not change the attribute from name to id the checkbox changes to the correct style but it will not check to show a true state. In fact if I remove the icheck-success class from the class attribute of the above div line the behavior is identical and the component will still not take input after the dialog box has been closed if I use the id attribute instead of the name attribute.
I'm using Angular V9 and the dialog component that I am using is from the Valor Software ngx-bootstrap library and, as stated, it works perfectly when I code the html input tag with the name attribute. Does any know of a workaround or possibly what is happening here? the styling is what I want on the site but not at the cost of not having the login dialog effectively lock the site up after you login.
Thanks for any info that you may have on this issue.
I have fix the problem I was having. The first part of the problem was that I was not asking the right question. I have edited the question to ask it in a better way, I think.
I have fixed the problem with the html below:
<div class="icheck-success checkbox login-remember">
<input id="rememberme" name="rememberme" [(ngModel)]="model.rememberMe" type="checkbox">
<label for="rememberme">Remember Me</label>
</div>
it seems I had to have a name attribute in the input tag for some reason that I'm not clear about at all but, this is what I did to get the modal dialog to truly clear from the page after close.
I have an <a> link which will only open if I right click it and click on "open in a new tab. If i just click it normally it just puts a "?" after the rest of the link, like this: "http://localhost:8011/login.html?".
Code:
<div class="login-page">
<div class="form">
<form class="login-form">
<input type="text" placeholder="Username" />
<input type="password" placeholder="Password" />
<button class="login">login</button>
<p class="message">Not registered? Create an account</p>
</form>
</div>
</div>
If i put target="_self" it still doesn't work. The two files are definitely in the same folder.
Your HTML is invalid. It is forbidden to put a <button> inside an <a>. Use a validator.
The effect you see is due to error recovery reacting badly and your clicks being handled by different elements.
will only open if I right click it and click on "open in a new tab
This is what happens when you right click on the <a> element.
If i just click it normally it just puts a "?" after the rest of the link
This is what happens when you submit a form using a submit button (and the form has no successful controls in it, which is the case here because none of your controls have names).
If you want a link, then use a link and only a link. Get rid of the <button> element.
If you want something that looks like a button then first think about what message you are sending to the user. Buttons do things. Links go places. Giving the user a visual signal that they are doing something is likely to be wrong.
If you still want a link that looks like a button, then style it with CSS.
That said, having a link marked Login which doesn't submit the form is just confusing. You should probably:
Keep the <button>
Get rid of the <a>
Give your form controls name attributes
Make the form use method="POST"
… and then write server side code to process the data so the login form can be used to login to the site.
You can change your HTML form to be as follows so that the form is submitted when login is clicked:
<div class="form">
<form class="login-form" method="POST" action="index.html">
<!-- user inputs -->
<input type="text" name="username" placeholder="Username" />
<input type="password" name="password" placeholder="Password" />
<!-- your submit button -->
<input type="submit" name="submit" value="login">
<!-- your other link -->
<p class="message">Not registered? Create an account</p>
</form>
</div>
This approach will be better than the current one for creating a login form.
This way you still have your button that will redirect to index.html without having to use a messy approach with <a> and <button>.
It's because you've a button, and it's trying to submit the form.
Try using bootstrap and give the <a> tag some classes, like this:
<div class="login-page">
<div class="form">
<form class="login-form">
<input type="text" placeholder="Username" />
<input type="password" placeholder="Password" />
login
<p class="message">Not registered? Create an account</p>
</form>
</div>
</div>
Or just give style to your <a> by css, but if you use the button, then you're submitting the form instead clicking the link.
EDIT: you could also wrap the <a> inside the button, so the link on the <a> will execute first instead of submitting the form
<button class="login">login</button>
I created a website called diditdrop.com. Within the website there is a form where the user enters a number and then submits the number. On the desktop version of the site, the form works great. On the mobile version, the form is not responsive (i.e. i tap on the screen and nothing focuses or pops up. Additionally, the button underneath it doesn't work either).
I'm not sure what to do. I've been stuck on it for a few hours now. I've pasted a snippet of my code below, however, it doesn't look too strange. If someone could take a look at my site, and then recommend a better way of implementing, I would sincerely appreciate it.
<form class = "form-inline" action="https://formspree.io/x#gmail.com" method="POST">
<div class= "form-group">
<span>
<input type="tel" id = "form1" placeholder="digits here" tabindex="1" class="boxed form-control" name="number"/><br>
</span>
<span>
<input type="submit" id = "buttonmove" class="btn boxed" value="get dat new new"name="number" />
</span>
</div>
</form>
Add the following code it will work:
add the style="float:left" to the image like below
<div id="pictureface" class="col-lg-6">
<img style="float:left" class="img-responsive" src="http://static.stereogum.com/uploads/2016/09/CtUYD4uWYAIB1MH-1475280486.jpg">
</div>
When I Press Login button one popup is shown.
In that popup I need default autofocus on Login Input field. Can I achieve that with HTML5/CSS only?
jsfiddle
<div class="main">
<div class="panel"> Log In
</div>
</div>
<!-- popup form #1 -->
<div class="popup">
<h2>Welcome Guest!</h2>
<p>Please enter your login and password here</p>
<div>
<label for="login">Login</label>
<input type="text" id="login" value="" autofocus />
</div>
<div>
<label for="password">Password</label>
<input type="password" id="password" value="" />
</div>
<input type="button" value="Log In" /> <a class="close" href="#close"></a>
</div>
autofocus is defined to work reliably only on page load. It is not really suited for situations where you are swapping, or opening, or unhiding DOM elements such as in a single-page application framework. You are likely to have to resort to handling the autofocusing yourself.
The Answer is not really effectively (with certainty).
I would suggest Javascript, as UnskilledFreak mentioned, on every click the focus is set
...
Log In
...
<!-- not javascript library needed -->
<!-- tested on Win7 and Chrome 37+ -->
Here is your fiddle updated: http://jsfiddle.net/6f9ge64f/2/
You should probably also check key-input for people that don't use a mouse.
Update:
it's a bit hacky, but you could try
...
Log In
...
<input type="text" id="login" value="" autofocus />
...
<a class="close" href="PATH-TO-FILE?c=2#close"></a>
...
<!-- tested with on Win7 and Chrome 37+ -->
where the PATH-TO-FILE is for example http://www.test.com/default.html (absolute or relative), and the ?c=1 and ?c=2 is any parameter, just to provoke a reload. like this you could use autofocus.
THIS WONT WORK IN JSFIDDLE since the HTML is embedded, but it works in the "real-world".
Update 2:
...
Log In
<!-- tested with on Win7 and Chrome 37+ -->
...
Here is the fiddle http://jsfiddle.net/6f9ge64f/6/
If you are using jQuery do something like this:
$( "#login-button" ).click(function() {
$( "#input" ).focus();
});
Autofocus attribute moves the focus to the specified input on page load. In this case #input is present in DOM but hidden; on clicking login button, the focus is removed.
Should probably use .focus() on the login click event handler
<input type="text" id="login" value="" />
<input type="text" id="login" value="" autofocus />
<input type="text" id="login" value="" />
http://jsfiddle.net/6f9ge64f/4/
autofocus works only on standard pageload, If you are using javascript/angular/react/jquery to modify elements after page load the active element changes, and autofocus wont work.
What I do is I wait for all the dom elements to load and process then set the active element
<script type="text/javascript">
$(document).ready(function() {
setTimeout(function() {
$("#input-field").focus();
}, 1500);
});
</script>
When you focus on a form element in a mobile browser, they come up with previous and next icons for easier navigation. However for some reason if I click next to what should be the end of that particular forms' input, if there is another form on the page, pressing next again will make it jump to the second form.
For example I have a log in form on the body of my page like so:
<form name="customer_login" id="customer_login" method="post" action="/login">
Email: <input type="email" name="customer[email]" id="customer_email" />
Passwird: <input type="password" name="customer[password]" id="customer_password" />
<button type="submit">Log In</button>
</form>
Then further down my page, in the footer I have a separate form for my newsletter:
<form name="newsletter" id="newsletter" method="post" action="/newsletter">
Subscribe: <input type="email" name="email" />
<button type="submit" name="submit" title="Sign Up">Go</button>
</form>
But once I'm focused on the password field in the log in form, the next button to me should become disabled or at least not jump to an entirely different form. Is this normal behavior for mobile browsers and forms? Or am I missing a form attribute which is not differentiating the two forms?
Try adding tabindex=1 to your input fields...see if that helps. By mobile, you using an iPhone? If so, those < and > arrows are essentially the TAB button on a keyboard, etc.
tabindex=1 value should increment in the order you want to "tab", etc.