fix(v-b-modal): ensure trigger element is keyboard accessible if not a link or button, for A11Y

tmorehouse · web-flow · commit f8ddb8e541e2 · 2019-11-09T16:17:01.000-04:00
diff --git a/src/directives/modal/modal.js b/src/directives/modal/modal.js
@@ -32,9 +32,16 @@ const getTriggerElement = el => {
 }
 
 const setRole = trigger => {
-  // Only set a role if the trigger element doesn't have one
-  if (trigger && trigger.tagName !== 'BUTTON' && !hasAttr(trigger, 'role')) {
-    setAttr(trigger, 'role', 'button')
+  // Ensure accessibility on non button elements
+  if (trigger && trigger.tagName !== 'BUTTON') {
+    // Only set a role if the trigger element doesn't have one
+    if (!hasAttr(trigger, 'role')) {
+      setAttr(trigger, 'role', 'button')
+    }
+    // Add a tabindex is not a button or link, and tabindex is not provided
+    if (trigger.tagName !== 'A' && !hasAttr(trigger, 'tabindex')) {
+      setAttr(trigger, 'tabindex', '0')
+    }
   }
 }
 

Original file line number	Diff line number	Diff line change
`@@ -32,9 +32,16 @@ const getTriggerElement = el => {`
`32`	`32`	`}`
`33`	`33`
`34`	`34`	`const setRole = trigger => {`
`35`		`- // Only set a role if the trigger element doesn't have one`
`36`		`- if (trigger && trigger.tagName !== 'BUTTON' && !hasAttr(trigger, 'role')) {`
`37`		`- setAttr(trigger, 'role', 'button')`
	`35`	`+ // Ensure accessibility on non button elements`
	`36`	`+ if (trigger && trigger.tagName !== 'BUTTON') {`
	`37`	`+ // Only set a role if the trigger element doesn't have one`
	`38`	`+ if (!hasAttr(trigger, 'role')) {`
	`39`	`+ setAttr(trigger, 'role', 'button')`
	`40`	`+ }`
	`41`	`+ // Add a tabindex is not a button or link, and tabindex is not provided`
	`42`	`+ if (trigger.tagName !== 'A' && !hasAttr(trigger, 'tabindex')) {`
	`43`	`+ setAttr(trigger, 'tabindex', '0')`
	`44`	`+ }`
`38`	`45`	`}`
`39`	`46`	`}`
`40`	`47`