I have several "define this label in the resource bundle" bug in my recent sonarqube scan
Here is a sample of a line of my code that gets this bug:
<p id="weekly" onclick="weeklyFilter()">Weekly</p>
Sonarqube suggests to transform it this way:
<label for="username"><fmt:message key="login.label.username" />:</label>
<input type="text" id="username" name="username">
Any suggestions on how to implement this for <p>
Thank you
Related
I was resolving accessibility issues using ARC toolkit. And I am stuck on one issue i.e.:
And here is my component markup:
{/* <label htmlFor="first-name-input">FirstName</label> */}
<input
aria-label={'First Name'}
aria-required="true"
autoComplete="off"
type="text"
placeholder="First Name"
name="first_name"
value={inputValue}
onChange={handleChange}
/>
I've tried several ways, like used Label with htmlFor, and used aria-label but not able to get rid of this warning.
Specifications I'm referencing:
WCAG 2.0 A
WCAG 2.1 A
I'm receiving this error after auditing my product page in Chrome:
Form elements do not have associated labels
Failing Elements
input#quantity_5ce535030e171.input-text.qty.text
input#woocommerce-product-search-field-0.search-field
Labels clearly indicate input tags with for attribute.
Element #1:
<div class="quantity">
<label class="screen-reader-text" for="quantity_5ce535030e171">My product name</label>
<input type="number" id="quantity_5ce535030e171" class="input-text qty text" step="1" min="1" max="" name="quantity" value="1" title="Qty" size="4" inputmode="numeric">
</div>
Element #2:
<form role="search" method="get" class="woocommerce-product-search" action="https://example.com/example-product/">
<label class="screen-reader-text" for="woocommerce-product-search-field-0">Search for:</label>
<input type="search" id="woocommerce-product-search-field-0" class="search-field" placeholder="Search products…" value="" name="s">
<button type="submit" value="Search">Search</button>
<input type="hidden" name="post_type" value="product">
</form>
Is there anything incorrect in html or Chrome gives false errors?
Looks like this was a bug fixed in axe-core 3.2.0 according to this GitHub issue, but the fix is still not incorporated into Lighthouse as of Chrome version 75.0.3770.142.
Lighthouse uses Axe for the accessibility portion of its audit, but you can run Axe as a stand-alone Chrome extension. I ran the stand-alone extension (version 3.8.0 with axe-core 3.2.2) on a site I'm working on that uses visually hidden form labels and it passed; whereas Lighthouse still failed with the error you mentioned. From what I can tell, based on the learn more links from audit results, Lighthouse is using version 3.1 of axe-core.
As long as styles for .screen-reader-text don't use display:none;, visibility: hidden;, or zero out the width or height, it should pass the stand-alone Axe extension audit.
I am trying to prevent the browser giving me recommendations when I type into an input box. For example, if I type 'a' it will give me a list of items beginning with'a' that I have typed into an input box in my browser in the past.
I have tried autocomplete="false" but this doesnt work as far as I can tell. Autocomplete must be different to what I am looking for.
Perhaps it is a browser setting that cannot be controlled by the developer. Does anyone know if there is a way to do this?
It is working for me on this codepen link. It doesn't display prediction for email field, but it does show prediction for first name and last name field.
If it doesn't work for you then it must be your system software causing this. I'm using Chrome on Linux.
<form action="/action_page.php" autocomplete="on">
First name:<input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
E-mail: <input type="email" name="email" autocomplete="off"><br>
<input type="submit">
</form>
http://codepen.io/piyushpatel2005/pen/aJQaNN
I'm implementing your average SSL secured payment form, and I've been able to get Chrome to consistently autofill stored credit card entries from a logged-in Google account. However, I haven't been able to find the magical series of bits and config to coerce it into prompting me to save new credit card entries.
Lets take a stripped down set of payment fields:
<form action="/someroute" method="post" id="pmntForm" autocomplete="on">
<h2>Auto Fill Test</h2>
<label for="nameoncard">Name on Card</label>
<input type="text" id="nameoncard" name="nameoncard" autocomplete="cc-name">
<label for="ccnumber">Credit Card Number</label>
<input type="text" id="ccnumber" name="ccnumber" autocomplete="cc-number" />
<label for="cc-exp-month">Expiration Month</label>
<input type="number" id="cc-exp-month" name="cc-exp-month" autocomplete="cc-exp-month">
<label for="cc-exp-year">Expiration Year</label>
<input type="number" id="cc-exp-year" name="cc-exp-year" autocomplete="cc-exp-year">
<label for="cvv">CVV</label>
<input type="text" id="cvv" name="cvv" autocomplete="cc-csc">
<input type="submit" value="Submit" name="submit">
</form>
This does exactly what I want for autofilling existing cards in my Chrome account:
However if I enter a full set of new payment data; I expect that by the time the user clicks submit - Chrome should prompt to save the data as a new credit card entry (ironically this image is from a post of someone wanting to disable this):
Here's a jsfiddle in react, but it should answer your question.
Jsfiddle
<form name="ccform" action="">
<input name="cc-number" placeholder="Card Number" autocomplete="cc-number" />
<input name="cc-csc" placeholder="Security Code (CVC)" autocomplete="cc-csc" />
<input name="cc-exp-month" placeholder="MM" autocomplete="cc-exp-month" />
<input name="cc-exp-year" placeholder="YYYY" autocomplete="cc-exp-year" />
</form>
Resources:
How to trigger Autofill in Google Chrome?
How does Chrome detect Credit Card fields?
Chrome credit card autofill not being triggered
html5rocks: requestAutocomplete - take my money, not my time
You could also use the chrome dev tools to checkout other websites who have a working autocomplete form such as these:
Airbnb
creditcard.js
I'll add more when I find some
Not the perfect answer, but hope it helps! I will update when I find the completely correct solution. :)
i create app that runs selenium internet explorer webdriver.
the program work fine on my pc but when i trying it with the same driver on other pc
its throws exception on the first element saying that it can't find it.
no frames in this html.
The first thing i checked is html pagesource the difference was:
on my pc:
<input name="cId" tabindex="1" id="CNum" type="text" size="13" maxlength="10" value="" autocomplete="off">
on other pc:
<INPUT tabIndex=2 id=CNum maxLength=10 size=13 name=cId autocomplete="off">
my selenium code:
driver.FindElement(By.Id("CNum")).SendKeys("123");
what can it be (the html source in other computer without type and in many cases without quotes.)
Thank you.
Try with
driver.FindElement(By.name("cId")).SendKeys("123"); or
driver.findelement(by.cssselector("input[name='cId']")).sendkeys("123");