test a11y with karma-accessibility-checker

.achecker.yml

@@ -0,0 +1,57 @@
+# optional - Specify the rule archive
+# i.e. For march rule archive use ruleArchive: 2017MayDeploy
+# Default: latest
+# Refer to README.md FAQ section below to get the rule archive ID.
+ruleArchive: latest
+
+# optional - Specify one or many policies to scan.
+# i.e. For one policy use policies: IBM_Accessibility_2017_02
+# i.e. Multiple policies: IBM_Accessibility_2017_02,IBM_Accessibility_BETA or refer to below as a list
+# Default: null (all policies)
+# Refer to README.md FAQ section below to get the policy ID.
+policies:
+    - IBM_Accessibility
+
+# optional - Specify one or many violation levels on which to fail the test
+#            i.e. If specified violation then the testcase will only fail if
+#                 a violation is found during the scan.
+# i.e. failLevels: violation
+# i.e. failLevels: violation,potential violation or refer to below as a list
+# Default: violation, potentialviolation
+failLevels:
+    - violation
+
+# optional - Specify one or many violation levels which should be reported
+#            i.e. If specified violation then in the report it would only contain
+#                 results which are level of violation.
+# i.e. reportLevels: violation
+# i.e. reportLevels: violation,potentialviolation or refer to below as a list
+# Default: violation, potentialviolation, recommendation, potentialrecommendation, manual
+reportLevels:
+    - violation
+    - potentialviolation
+    - recommendation
+    - potentialrecommendation
+    - manual
+
+# Optional - In what format types the results should be output in (json, html)
+# Default: json
+outputFormat:
+    - json
+
+# Optional - Specify labels that you would like associated to your scan
+#
+# i.e.
+#   label: Firefox,master,V12,Linux
+#   label:
+#       - Firefox
+#       - master
+#       - V12
+#       - Linux
+# Default: N/A
+label:
+    - master
+
+# optional - Where the scan results should be saved.
+# Default: results
+outputFolder: x-a11y

.config/karma.conf.js

@@ -113,9 +113,9 @@ module.exports = function(config) {
 		'HeadlessChrome': ['HeadlessChrome']
 	};
 
-	var reporters = ['mocha','coverage'];
+	var reporters = ['mocha','coverage','aChecker'];
 	if( process.env.TRAVIS_CI ){
-		reporters = ['mocha', 'coverage', 'coveralls']
+		reporters = ['mocha', 'coverage', 'coveralls','aChecker']
 	}
 
 	var browsers = targets[process.env.TARGET || 'HeadlessFirefox'];
@@ -126,7 +126,7 @@ module.exports = function(config) {
 
 	config.set({
 		basePath: '../',
-		frameworks: ['mocha', 'chai'],
+		frameworks: ['mocha', 'chai','aChecker'],
 		files: [
 			{
 				pattern: 'test/tests/esm-module.js',

.travis.yml

@@ -5,7 +5,7 @@ env:
     - TARGET=HeadlessChrome
     - TARGET=browserstack
 node_js:
-  - 14
+  - 12
 addons:
   firefox: "67.0"
 before_script:

package.json

@@ -58,6 +58,7 @@
     "grunt-shell": "^3.0.1",
     "jquery": "^3.5.1",
     "karma": "^6.1.1",
+    "karma-accessibility-checker": "^3.1.5",
     "karma-browserstack-launcher": "^1.6.0",
     "karma-chai": "^0.1.0",
     "karma-chrome-launcher": "^3.1.0",

src/tom-select.ts

@@ -15,7 +15,8 @@ import {
 	preventDefault,
 	addEvent,
 	loadDebounce,
-	isKeyDown
+	isKeyDown,
+	getId
 } from './utils';
 
 import {
@@ -85,6 +86,8 @@ export default class TomSelect extends MicroPlugin(MicroEvent){
 	constructor( input_arg: string|TomInput, settings:TomSettings ){
 		super();
 
+		instance_i++;
+
 		var dir;
 		var input				= getDom( input_arg ) as TomInput;
 
@@ -106,7 +109,7 @@ export default class TomSelect extends MicroPlugin(MicroEvent){
 		this.tabIndex			= input.tabIndex || 0;
 		this.is_select_tag		= input.tagName.toLowerCase() === 'select';
 		this.rtl				= /rtl/i.test(dir);
-
+		this.inputId			= getId(input, 'tomselect-'+instance_i);
 		this.isRequired			= input.required;
 
 
@@ -166,7 +169,6 @@ export default class TomSelect extends MicroPlugin(MicroEvent){
 	 */
 	setup(){
 
-		instance_i++;
 
 		var self = this;
 		var settings:TomSettings = self.settings;
@@ -181,7 +183,6 @@ export default class TomSelect extends MicroPlugin(MicroEvent){
 		var input					= self.input;
 		var control_id: string;
 		const passive_event			= { passive: true };
-		self.inputId				= input.getAttribute('id') || 'tomselect-'+instance_i;
 		const listboxId: string		= self.inputId +'-ts-dropdown';
 
 
@@ -201,7 +202,6 @@ export default class TomSelect extends MicroPlugin(MicroEvent){
 		dropdown			= self.render('dropdown');
 		addClasses(dropdown, settings.dropdownClass, inputMode);
 
-
 		dropdown_content	= getDom(`<div style="scroll-behavior: smooth;" role="listbox" id="${listboxId}">`)
 		addClasses(dropdown_content, settings.dropdownContentClass);
 		dropdown.append(dropdown_content);
@@ -231,17 +231,17 @@ export default class TomSelect extends MicroPlugin(MicroEvent){
 		control_input.setAttribute('role', 'combobox');
 		control_input.setAttribute('aria-expanded', 'false');
 		control_input.setAttribute('haspopup', 'listbox');
-		control_input.setAttribute('aria-owns', listboxId);
-
-		control_id = control_input.getAttribute('id');
-		if( !control_id ){
-			control_id = self.inputId + '-tomselected';
-			control_input.setAttribute('id', control_id);
-		}
+		control_input.setAttribute('aria-controls', listboxId);
+		control_id = getId(control_input,self.inputId + '-tomselected');
 
 		let query = "label[for='"+escapeQuery(self.inputId)+"']";
 		let label = document.querySelector(query);
-		if( label ) label.setAttribute('for', control_id);
+		if( label ){
+			label.setAttribute('for', control_id);
+			let label_id = getId(label,self.inputId+'-ts-label');
+			dropdown_content.setAttribute('aria-labelledby',label_id);
+		}
+
 
 		if(self.settings.copyClassesToDropdown) {
 			addClasses( dropdown, classes);
@@ -1062,6 +1062,7 @@ export default class TomSelect extends MicroPlugin(MicroEvent){
 
 		this.activeOption = option;
 		this.control_input.setAttribute('aria-activedescendant',option.getAttribute('id'));
+		option.setAttribute('aria-selected','true');
 		addClasses(option,'active');
 
 		height_menu		= this.dropdown_content.clientHeight;
@@ -1084,7 +1085,10 @@ export default class TomSelect extends MicroPlugin(MicroEvent){
 	 *
 	 */
 	clearActiveOption(){
-		if( this.activeOption ) removeClasses(this.activeOption,'active');
+		if( this.activeOption ){
+			removeClasses(this.activeOption,'active');
+			this.activeOption.removeAttribute('aria-selected');
+		}
 		this.activeOption = null;
 		this.control_input.removeAttribute('aria-activedescendant');
 	}
@@ -1309,6 +1313,7 @@ export default class TomSelect extends MicroPlugin(MicroEvent){
 				if( j > 0 ){
 					option_el = option_el.cloneNode(true) as HTMLElement;
 					removeClasses(option_el,'active');
+					option_el.removeAttribute('aria-selected');
 				}
 
 				groups[optgroup].appendChild(option_el);

src/utils.ts

@@ -150,3 +150,19 @@ export function isKeyDown( key_name:keyof (KeyboardEvent|MouseEvent), evt:Keyboa
 
 	return false;
 }
+
+
+/**
+ * Get the id of an element
+ * If the id attribute is not set, set the attribute with the given id
+ *
+ */
+export function getId(el:HTMLElement,id:string){
+	const existing_id = el.getAttribute('id');
+	if( existing_id ){
+		return existing_id;
+	}
+
+	el.setAttribute('id',id);
+	return id;
+}

test/support/base.js

@@ -5,6 +5,7 @@ window.has_focus = function(elem) {
 };
 
 var sandbox = document.createElement('div');
+sandbox.setAttribute('role','main');
 document.body.appendChild(sandbox);
 
 var IS_MAC      		= /Mac/.test(navigator.userAgent);

test/tests/a11y.js

@@ -0,0 +1,46 @@
+
+
+describe('A11Y Compliance', function() {
+
+	var html = `<div>
+				<label for="a11y-test">
+				<select multiple id="a11y-test" class="setup-here" placeholder="a11y test">
+					<option value="a">a</option>
+					<option value="b">b</option>
+					<option value="c">c</option>
+				</select>
+				</div>`;
+
+	it_n('setup', function(done) {
+
+		var test = setup_test(html);
+
+		aChecker.getCompliance(test.instance.wrapper, 'setup', function (results) {
+
+		    var returnCode = aChecker.assertCompliance(results);
+		    assert.equal( returnCode, 0, "A11Y Scan failed." + JSON.stringify(results) );
+		    done();
+		});
+
+	});
+
+	it_n('isOpen', function(done) {
+
+		var test = setup_test(html);
+
+		click(test.instance.control, function(){
+
+			assert.equal(test.instance.isOpen,true);
+
+			aChecker.getCompliance(test.instance.wrapper, 'isOpen', function (results) {
+
+			    var returnCode = aChecker.assertCompliance(results);
+			    assert.equal( returnCode, 0, "A11Y Scan failed." + JSON.stringify(results) );
+			    done();
+			});
+		});
+
+	});
+
+
+});