Merge branch 'develop'

README.md

@@ -12,14 +12,14 @@ An accessible polyfill for `<input type='time'/>` elements.
 
 Demo available here: https://dan503.github.io/time-input-polyfill/
 
-**Note:** If the recommended version in this documentation is out of sync with the npm version, this is because npm only allows readme edits to be committed through full releases. To prevent needless cache invalidation, I'll only update the recommended version number when there are actual changes to the polyfill code. The current recommended version is `1.0.1`. As long as you are using a version that is equal to or higher than that, you are using the latest version of the polyfill.
+**Note:** If the recommended version in this documentation is out of sync with the npm version, this is because npm only allows readme edits to be committed through full releases. To prevent needless cache invalidation, I'll only update the recommended version number when there are actual changes to the polyfill code. The current recommended version is `1.0.5`. As long as you are using a version that is equal to or higher than that, you are using the latest version of the polyfill.
 
 ## Fastest and easiest way to implement
 
 Add the following script element to your page:
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/[email protected].1"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected].5"></script>
 ```
 
 Alternatively you can download it via npm and use it through commonJS or an ES6 import statement.
@@ -47,7 +47,7 @@ You didn't load the actual polyfill onto the page, you loaded a much smaller aut
 1. The initialiser checks if the browser supports `input[type="time"]` elements.
 2. If it **does**, it skips the rest of the functionality.
 3. If it does **not**, it will:
-	1. load `https://cdn.jsdelivr.net/npm/[email protected].1/dist/time-input-polyfill.min.js` (the actual polyfill).
+	1. load `https://cdn.jsdelivr.net/npm/[email protected].5/dist/time-input-polyfill.min.js` (the actual polyfill).
 	2. Collect all existing `input[type="time"]` elements on the page.
 	3. Loop through each `input[type="time"]` element and apply the polyfill to it.
 
@@ -61,25 +61,25 @@ The following downloads the full polyfill in all browsers, take a look at the [a
 First check for `input[type="time"]` support.
 
 ```js
-var supportsTime = require('time-input-polyfill/core/helpers/supportsTime');
+var supportsTime = require('time-input-polyfill/supportsTime');
 
 if (!supportsTime) {
-	//Apply polyfill here
+  //Apply polyfill here
 }
 ```
 
 Then gather a list of all `input[type="time"]` elements on the page, and loop through them to apply the polyfill.
 
 ```js
-var supportsTime = require('time-input-polyfill/core/helpers/supportsTime');
+var supportsTime = require('time-input-polyfill/supportsTime');
 var TimePolyfill = require('time-input-polyfill');
 
 if (!supportsTime) {
-	// Converting to an array for IE support
-	var $$inputs = [].slice.call( document.querySelectorAll('input[type="time"]') );
-	$$inputs.forEach(function($input){
-		new TimePolyfill($input);
-	})
+  // Converting to an array for IE support
+  var $$inputs = [].slice.call( document.querySelectorAll('input[type="time"]') );
+  $$inputs.forEach(function($input){
+    new TimePolyfill($input);
+  })
 }
 ```
 
@@ -90,27 +90,27 @@ if (!supportsTime) {
 First check for `input[type="time"]` support.
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/[email protected].1/core/helpers/supportsTime.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected].5/core/helpers/supportsTime.js"></script>
 ```
 ```js
 if (!supportsTime) {
-	//Apply polyfill here
+  //Apply polyfill here
 }
 ```
 
 Then gather a list of all `input[type="time"]` elements on the page, and loop through them to apply the polyfill.
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/[email protected].1/core/helpers/supportsTime.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/[email protected].1/dist/time-input-polyfill.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected].5/core/helpers/supportsTime.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected].5/dist/time-input-polyfill.min.js"></script>
 ```
 ```js
 if (!supportsTime) {
-	// Converting to an array for IE support
-	var $$inputs = [].slice.call( document.querySelectorAll('input[type="time"]') );
-	$$inputs.forEach(function($input){
-		new TimePolyfill($input);
-	})
+  // Converting to an array for IE support
+  var $$inputs = [].slice.call( document.querySelectorAll('input[type="time"]') );
+  $$inputs.forEach(function($input){
+    new TimePolyfill($input);
+  })
 }
 ```
 
@@ -146,6 +146,38 @@ if ($input.polyfill) $input.polyfill.update();
 
 The `update()` method will return the input element that it was called on so it can be chained if you want.
 
+### All `$input` elements must have a label
+
+The polyfill will fail if the `$input` is missing a label.
+
+The following is a list of ways you can add a label to the `$input`. The list is in order from the **best** method to the **worst** method:
+
+1. Nesting the `$input` inside a `<label>` _(Doesn't require IDs to work)_
+	```html
+	<label>
+	  <span>Label text</span>
+	  <input type="time">
+	</label>
+	```
+2. Using the `for` attribute
+	```html
+	<label for="uniqueID">Label text</label>
+	<input type="time" id="uniqueID">
+	```
+3. Using the `aria-labelledby` attribute
+	```html
+	<p id="uniqueID">Label text</p>
+	<input type="time" aria-labelledby="uniqueID">
+	```
+4. Using the `title` attribute
+	```html
+	<input type="time" title="Label text">
+	```
+5. Using the `aria-label` attribute
+	```html
+	<input type="time" aria-label="Label text">
+	```
+
 ## Change log
 
 You can view the Change Log on the [GitHub Releases](https://github.com/Dan503/time-input-polyfill/releases) page.

auto.js

@@ -4,7 +4,7 @@ var loadJS = require('./core/helpers/loadJS');
 
 document.addEventListener("DOMContentLoaded", function() {
 	if (!supports_time) {
-		loadJS('https://cdn.jsdelivr.net/npm/[email protected].1/dist/time-input-polyfill.min.js', function(){
+		loadJS('https://cdn.jsdelivr.net/npm/[email protected].5/dist/time-input-polyfill.min.js', function(){
 			var $inputs = [].slice.call(document.querySelectorAll('input[type="time"]'));
 			$inputs.forEach(function($input) {
 				new TimePolyfill($input);

core/getters/get_ancestors.js

@@ -1,12 +1,18 @@
-
-module.exports = function ($input) {
-	var a = $input;
+// selector is optional, it allows for an early exit
+module.exports = function ($input, selectorString) {
+	var $elem = $input;
 
 	// https://stackoverflow.com/a/8729274/1611058
 	var ancestors = [];
-	while (a) {
-		ancestors.push(a);
-		a = a.parentNode;
+	while ($elem) {
+		ancestors.push($elem);
+		var matchesSelector = $elem.msMatchesSelector ?
+			$elem.msMatchesSelector(selectorString) :
+			$elem.matches(selectorString);
+		if (matchesSelector) {
+			return ancestors;
+		}
+		$elem = $elem.parentElement;
 	}
 
 	return ancestors;

core/getters/get_label.js

@@ -2,12 +2,52 @@
 var get_ancestors = require('./get_ancestors');
 
 module.exports = function get_label ($input) {
-	var $forLabel = document.querySelector('label[for="'+$input.id+'"]');
-	if ($forLabel) return $forLabel;
-
-	var ancestors = get_ancestors($input);
-	var $parentLabel = ancestors.filter(function($elem){
-		return $elem.nodeName === 'LABEL';
-	})[0];
-	return $parentLabel;
+
+	var labelText =
+		aria_labelledby($input) ||
+		aria_label($input) ||
+		for_attribute($input) ||
+		label_wrapper_element($input) ||
+		title_attribute($input);
+
+	if (labelText) return labelText;
+
+	console.error('Label text for input not found.', $input);
+	throw new Error('Cannot polyfill time input due to a missing label.');
+}
+
+function aria_labelledby($input){
+	var ariaLabelByID = $input.getAttribute('aria-labelledby');
+	if (ariaLabelByID) {
+		var $ariaLabelBy = document.getElementById(ariaLabelByID);
+		if ($ariaLabelBy) return $ariaLabelBy.textContent;
+	}
+	return false;
+}
+
+function aria_label($input){
+	var ariaLabel = $input.getAttribute('aria-label');
+	if (ariaLabel) return ariaLabel;
+	return false;
+}
+
+function for_attribute($input){
+	if ($input.id) {
+		var $forLabel = document.querySelector('label[for="'+$input.id+'"]');
+		if ($forLabel) return $forLabel.textContent;
+	}
+	return false;
+}
+
+function label_wrapper_element($input){
+	var ancestors = get_ancestors($input, 'label');
+	var $parentLabel = ancestors[ancestors.length - 1];
+	if ($parentLabel.nodeName == 'LABEL') return $parentLabel.textContent;
+	return false
+}
+
+function title_attribute($input){
+	var titleLabel = $input.getAttribute('title');
+	if (titleLabel) return titleLabel;
+	return false
 }