polymerelements / gold-cc-expiration-input Goto Github PK

Issues with the hint text:
On Chrome / Mac / VoiceOver: The hint text for MM / YY is reading as "blank".
On Chrome on Windows with NVDA, it just reads as "edit" without any context of the hint text.
On Firefox with NVDA, the experience is similar and reads as "edit" but also speaks "has auto complete" which I don't think is true.

Please note that Chrome OS + ChromeVox is able to read the hint text MM / YY just fine, but this is not the case on other OS / browser / screen reader combos.

Contrast: the contrast of the hint text for MM / YY is poor. Please make the text a bit darker.

Audit results:
[Severe] Controls and media elements should have labels (8)
[Warning] Text elements should have a reasonable contrast ratio (6)
Not applicable tests (9)

Go to component demo page - none of the fields are pre-filled, even though they have value attribute set.

The result of this bug is that on a form, this control has value set, but looks like it needs to be filled out / blank.

Has this element (or all the Gold elements for that concern) been deprecated?
If not will they be upgraded to Polymer 2?
I don't see any branch letting me suppose so at the moment

It would be great to specify "YY" placeholder for year field, and "MM" for month field.
But currently the same one placeholder is used for both
https://github.com/PolymerElements/gold-cc-expiration-input/blob/master/date-input.html#L72
https://github.com/PolymerElements/gold-cc-expiration-input/blob/master/date-input.html#L90

Here's the PR that turns on shadow dom: #33

When supplying a 'name' attribute to gold-cc-expiration-input, it does not appear to be reflected on any contained html form element. Consequently it is not possible to get a value using form.<element_name>.value

Realise there is some complexity here given that there are actually 2 inputs, but it's a little unintuitive given that other form elements do not have this behaviour/constraint. Perhaps there should be a hidden form element whose name/value achieve the desired outcome?

Tabbing into this input from another input, first shows focus rectangle around whole control, instead of setting focus into month field.

Tested on Chrome.

Description

Check this jsbin https://jsbin.com/ginujab/edit?html,output
At the beginning input has a value "02/24"
When I erase "4" value becomes "02/2"
When I erase last digit - "2" - input value does not change and remains "02/2"
Even if I delete everything from input, value remains "02/2"
It happens because of this condition in the code https://github.com/PolymerElements/gold-cc-expiration-input/blob/master/gold-cc-expiration-input.html#L151

Expected outcome

As a developer, when user deletes some digits, I want to get actual value which is in the input, even if value is invalid.

Actual outcome

When user deletes some digits, I get some strange non-actual and invalid value "02/2" even if there's nothing in inputs or only "0" or "02"..

Live Demo

https://jsbin.com/ginujab/edit?html,output

Steps to reproduce

Check this jsbin https://jsbin.com/ginujab/edit?html,output
At the beginning input has a value "02/24"
Erase "4" - value will become "02/2"
Erase last digit - "2" - input value will not change and will remain "02/2"
Even if you delete everything from input, value remains "02/2"

Browsers Affected

• Chrome
• Firefox
• Safari 9
• Safari 8
• Safari 7
• Edge
• IE 11
• IE 10

e.g. 12/15; 11/15 works as expected

(Issue based off Polymer website demo at time of entry)

gold-cc-expiration-input does not accept numbers typed via the numpad as valid.

When filling out an expiration date it would be nice if typing 1/16 would work just like 1 Tab 16

In my project on Chrome, version 1.0.3 the bottom line is lower than in other paper-input based elements. This is noticeable when placing gold-cc-expiration-input in the same row as another input. version 1.0.2 looks fine on Chrome. On Firefox both versions have too low bottom line.
In https://github.com/notwaldorf/polymer-gold-elements-demo both versions look fine on Chrome and with too low bottom line on Firefox.
After comparing my project with the gold elements demo it turns out that with paper-input 1.0.0 dependency is what makes gold-cc-expiration-input look fine on Chrome. paper-input 1.0.3 causes the too low bottom line on Chrome. Either way on Firefox this always happens.

gold-cc-expiration-input's code is not following the same standards as other elements. gold-cc-expiration-input's javascript code is outside the . All other elements have javascript code inside the tags

Current gold-cc-expiration-input code:

...
<dom-module>
   ...
</dom-module>
<script>
   ...
</script>

Expected:

...
<dom-module>
   ...
   <script>
      ...
   </script>
</dom-module>

A similar issue has been fixed for other elements like paper-fab. Please check PolymerElements/paper-fab#53 for details.

Label is always floating in gold-cc-expiration-input

You can see here in code https://github.com/PolymerElements/gold-cc-expiration-input/blob/master/gold-cc-expiration-input.html#L63 that always-float-label is always set.

<paper-input-container id="container"
        always-float-label
        attr-for-value="date"

For example, in gold-cc-input everything is OK
https://github.com/PolymerElements/gold-cc-input/blob/master/gold-cc-input.html#L87

<paper-input-container id="container"
   disabled$="[[disabled]]"
   no-label-float="[[noLabelFloat]]"
   always-float-label="[[_computeAlwaysFloatLabel(alwaysFloatLabel,placeholder)]]"

Please, make no-label-float working for gold-cc-expiration-input
All other gold inputs make label floating only when user inputs data, this input label is floating always.

When calling form.reset(), form fields are all visibly cleared, but the actual value of the gold-cc-expiration-input is not.

Related to #23.