Does anybody know how to hint to the Dashlane browser plug-in to leave an <input> text field alone?
For most browser password managers, setting the auto-complete property to off works, Eg: <input type='text' autocomplete='off' />.
For LastPass, this additional attribute is recommended: data-lpignore="true".
I have no idea what this might be for Dashlane. I have noticed that the attributes data-kwimpalastatus="alive" and data-kwimpalaid="xxxx-x" (where xxxx-x is an auto-generated identifier) are added to my page, so this looks like a sensible place to start, but I've not had much joy figuring out the magic incantation...
In case anyone asks, the only other browser extensions I'm using are DuckDuckGo and Google Docs offline, so it's a reasonably safe bet that the datakwimpala* attributes are down to Dashlane.
Does anyone have any ideas??
Thanks!
Dashlane is using the attribute data-form-type to know what type of value it should use to prefill the input.
If you set this attribute with a value "other", it will stop Dashlane from prepopulating your input fields.
See example below :
<input type="text" autocomplete="off" data-lpignore="true" data-form-type="other" />
Note 1: There is also the attribute "data-lpignore" for lastpass, and also "autocomplete" for the rest.
Note 2 : The "data-form-type" attribute can be used to tell Dashlane how to pre-fill as well. There are other values you can use for this attribute like : billing, change_password, contact, forgot_password, identity, login, newsletter, other, payment, register search, shopping_basket, shipping
Daniel from Dashlane here. We recently switched our analysis engine to ML and we have a solution for you. Just add the data-form-type attribute with value "other" to any field you want us to ignore.
For more information, we released a public spec available here.
tl;dr disabling autofill on specific input fields is not supported and not currently on their roadmap.
I spoke to Dashlane's Support just now, here is a shortened summary:
ME: I'm looking for information on how to disable Dashlane
autocomplete for specific form fields, but couldn't find anything at
https://support.dashlane.com/. I've created an example here to
demonstrate and would welcome any help.
DASHLANE: Right now we can only stop Dashlane for a specific page or
website never for specific fields
ME: do you know if there are any plans to allow Developers to disable
autofill for specific fields? My real example is a postcode/zip code
field which has its own autocomplete which lists addresses which match
the postcode you entered - and the dashlane autofill dialog appearing
over the top of it presents a problem to users of our sites.
DASHLANE: I understand how this may affect your Users I'm so sorry,
for now, we don't have it on our roadmap, But I will be sharing your
feedback with our Product Team, who are always looking to integrate
our users' input into their plans for upcoming updates to Dashlane.
ME: Are there any JavaScript variables or other
changes to the webpage we can look for, so that we could disable our
own autocomplete feature for dashlane users? so they're not presented
with 2 which clash? We'd use that information to turn ours off, so the
only one in use would be Dashlane's, which can't be disabled.
DASHLANE: We don't have a "blueprint" of the code in order to provide
any JavaScript code
ME: If some kind of attribute (ideally
autocomplete="off" which seems to be the standard) could be supported
it would be a huge help, this is a cause of abandonment in our
checkout process and I'm sure it must affect other websites as well as
ours. Thanks for your time.
DASHLANE: Let's hope this can be a reality in the future
The example I mentioned is reproduced here:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Disabling Dashlane Form AutoComplete?</title>
</head>
<body>
<h1>Disabling Dashlane Form AutoComplete?</h1>
<p>
As a web developer, how can I instruct Dashlane not to display a prompt to
autocomplete a particular form field?
</p>
<p>
In this example, the Last Name field has
<code>autocomplete="off"</code> but DashLane still displays an autofill
dialog when you focus on that element.
</p>
<p>
Thanks
</p>
<fieldset>
<legend>Example Form</legend>
<form action="https://output.jsbin.com/setopoyawi" method="GET">
<ul>
<li>
<label>
First Name
<input name="first-name" type="text" autocomplete="given-name" />
</label>
</li>
<li>
<label>
Last Name
<input name="last-name" type="text" autocomplete="off" />
</label>
</li>
<li>
<label>
Password
<input
name="password"
type="password"
autocomplete="new-password"
/>
</label>
</li>
</ul>
<button type="submit">Submit</button>
</form>
</fieldset>
<h2>References</h2>
<ul>
<li>
<a
href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete"
>https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete</a
>
</li>
<li>
<a
href="https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion"
>https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion</a
>
</li>
</ul>
</body>
</html>
You don't really provide the code you are working on, so I don't know for sure if this is you are looking for, but when I tried the following code, Dashlane didn't display its icon in the fields, and was therefore no longer able to autofill them.
I just changed the <label>contents: 'Name' becomes 'Enter Name', and 'Address' becomes 'Enter Address'.
I tried successfully it in Chrome, Firefox and Safari.
Let us know if this was helpful for you.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Index</title>
</head>
<body>
<form action="#" method="POST">
<label>Enter Name: </label><input type="text" name="name">
<label>Enter Address: </label><input type="text" name="address">
<input type="submit" value="OK">
</form>
</body>
</html>
Had the same problem with a searchable react-select component which stalled (!) the browser when leaving the field. I could only get rid of the grey Dashlane icon in the input field by moving the following button to the left of the input field (it was in the same row right of the input field before). It seems that they identify relevant input fields by checking if there is a button to the right in the same row. I observed that if the button is not to the right of the input field but in the next row, the Dashlane icon also does not appear.
It looks like dashlane tracks the name and the placeholder property of the input, but not the label as far as i know.
Changing the name of the input to something Dashlane would not be able to recognize helped. So instead of "country" i changed it to "cnt", which solved the problem.
Although, if you need to really add these keywords in the placeholder, you might need to get creative.
Making a custom input where placeholder is empty and add a "fake placeholder" on top could be the way?
I put a check box on the input function to make a secret comment on one post and put a secret comment function.
The first post was applied without any problem, but the problem is that when I put a secret comment on the second post and click on the check box, the first check box is selected. If you click on the check box of the third post, the check box of the first post is selected. And I think it's a check box problem, but how do we solve this problem?
I didn't seem to explain well, so I brought it to the picture to see what my post looked like....;D
https://imgur.com/dCgA1Z7
<form action="#">
<p class="secretWrap">
<label for="secret">
<input type="checkbox" id="secret" class="checkbox" name="secret" />
<span>SECRET</span>
</label>
</p>
</form>
https://jsfiddle.net/4wd56t7a/
It's because you're using the same 'id' and 'for' attributes on both of your checkboxes. They need to be unique or else you're associating that label with the first instance of the id.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label
I'm creating a from that has validation errors show below the related inputs. To make the form more accessible I have added aria-lives to div that will hold the error message. With having more than one aria-live will this make it worse for the users?
<div
id="awesome-id">
<label for="awesome-id--input">
This is a label
</label>
<input
type="tel"
id="awesome-id--input"
required>
<div
role="region"
aria-live="polite"
id="awesome-id--error-message">
</div>
</div>
<div
id="another-id">
<label for="another-id--input">
This is another label
</label>
<input
type="tel"
id="another-id--input"
required>
<div
role="region"
aria-live="polite"
id="another-id--error-message">
</div>
</div>
You can have multiple aria-live containers - especially since they are “polite”, they should wait until it’s quiet to give you the feedback. Whether this is also a good experience for your users, you should simply test with a screen-reader (or, preferably, conduct user-tests).
However, I would remove the role=“region”. This is the specification of the Region element at MDN Web Docs:
The region role should be reserved for sections of content sufficiently important that users will likely want to navigate to the section easily and to have it listed in a summary of the page.
Landmarks like Region allow the user to quickly navigate to them. But adding all error messages to that list of landmarks would just muddy it in my opinion. Instead you should consider adding role=“alert”.
Also, make sure that the error container having aria-live is present at the page on load - even though it is empty. Otherwise some browsers will not know to listen for changes in it.
Lastly, remember to also toggle aria-invalid=“true/false” on the input to provide the screen-reader with proper feedback.
I'm trying to duplicate the search box on this site : https:clearviewlibrary.org over on a Wordpress install here: https://news.clearviewlibrary.org
I was able to get the search box to execute a search on the external site with this code:
<div>
<form method="get" action="javascript:void(0)"
onsubmit="window.open('http://www.wsld.info/#section=search&term<%=Config%>#section=search&term='+this.term.value+'', '_blank');return true;">
<label>
<input type="text" class="searchform" name="term" placeholder="Search Our Catalog" /></label>
</form>
</div>
but I'm stumped on how to go about adding the additional search functionality and radio buttons.
I've tried taking the code from the clearviewlibrary.org site, but that didn't work. I also saw this, but would rather not have the two buttons : HTML form action search, one text box, 2 buttons, 2 possible results
Thanks,
Brad
I have a page that is rendered through xulrunner service. There is a form and a button under the form.
For accessibility requirement, I forced the focus on the text field within the form when the user navigates to this page. However, sometimes JAWS always reads the Post Comment button label. Sometimes, JAWS reads the aria-label “Enter Comments”.
Here is the code:
<body onLoad="document.addcommentform.comment.focus()">
<input type="textarea" aria-label="Enter Comments" title="{$enterComment}" name="comment" />
<input class="Button" type="submit" value="{$postComment}" />
I also tried to put a visible label on the UI like this. I did more testing and found out the behavior is pretty the same.
<label for="addcommentform">Please enter comment
<form method="get" action="{$self}" name="addcommentform">
<textarea title="{$enterComment}" name="comment" class="commentarea" </textarea>
<input class="Button" type="submit" value="{$postComment}" />
</form>
</label>
I think it is related to this known bug https://bugzilla.mozilla.org/show_bug.cgi?id=133771
But does anybody known any workaround to this issue?
I'm a Jaws user and don't know of a way around this. Since Jaws tends to create it's own model of pages in a virtual buffer things can behave slightly differently then you would expect. To confirm or disprove weather it's a Jaws specific bug I would suggest trying out NVDA an open source and quite good Windows screen reader.