feat(dropdown): add role=presentation to <li> elements for improved a11y (#3996)

tmorehouse · jacobmllr95 · commit 464d257f709c · 2019-09-01T17:32:16.000+02:00
* chore(dropdown): add `role=presentation` to `&lt;li&gt;` elements

* Update dropdown-form.js

* Update dropdown-group.js

* Update dropdown-header.js

* Update dropdown-item-button.js

* Update dropdown-item.js

* Update dropdown-text.js
diff --git a/src/components/dropdown/dropdown-divider.js b/src/components/dropdown/dropdown-divider.js
@@ -15,7 +15,7 @@ export const BDropdownDivider = /*#__PURE__*/ Vue.extend({
   inheritAttrs: false,
   props,
   render(h, { props, data }) {
-    return h('li', [
+    return h('li', { attrs: { role: 'presentation' } }, [
       h(
         props.tag,
         mergeData(data, {
diff --git a/src/components/dropdown/dropdown-form.js b/src/components/dropdown/dropdown-form.js
@@ -14,7 +14,7 @@ export const BDropdownForm = /*#__PURE__*/ Vue.extend({
     }
   },
   render(h, { props, data, children }) {
-    return h('li', [
+    return h('li', { attrs: { role: 'presentation' } }, [
       h(
         BForm,
         mergeData(data, {
diff --git a/src/components/dropdown/dropdown-group.js b/src/components/dropdown/dropdown-group.js
@@ -62,14 +62,15 @@ export const BDropdownGroup = /*#__PURE__*/ Vue.extend({
       .join(' ')
       .trim()
 
-    return h('li', [
+    return h('li', { attrs: { role: 'presentation' } }, [
       header || h(),
       h(
         'ul',
         mergeData(data, {
           staticClass: 'list-unstyled',
           attrs: {
             id: props.id || null,
+            role: 'group',
             'aria-describedby': adb || null
           }
         }),
diff --git a/src/components/dropdown/dropdown-header.js b/src/components/dropdown/dropdown-header.js
@@ -23,7 +23,7 @@ export const BDropdownHeader = /*#__PURE__*/ Vue.extend({
   inheritAttrs: false,
   props,
   render(h, { props, data, children }) {
-    return h('li', [
+    return h('li', { attrs: { role: 'presentation' } }, [
       h(
         props.tag,
         mergeData(data, {
diff --git a/src/components/dropdown/dropdown-item-button.js b/src/components/dropdown/dropdown-item-button.js
@@ -43,7 +43,7 @@ export const BDropdownItemButton = /*#__PURE__*/ Vue.extend({
     }
   },
   render(h) {
-    return h('li', [
+    return h('li', { attrs: { role: 'presentation' } }, [
       h(
         'button',
         {
diff --git a/src/components/dropdown/dropdown-item.js b/src/components/dropdown/dropdown-item.js
@@ -37,7 +37,7 @@ export const BDropdownItem = /*#__PURE__*/ Vue.extend({
     }
   },
   render(h) {
-    return h('li', [
+    return h('li', { attrs: { role: 'presentation' } }, [
       h(
         BLink,
         {
diff --git a/src/components/dropdown/dropdown-text.js b/src/components/dropdown/dropdown-text.js
@@ -17,7 +17,7 @@ export const BDropdownText = /*#__PURE__*/ Vue.extend({
     }
   },
   render(h, { props, data, children }) {
-    return h('li', [
+    return h('li', { attrs: { role: 'presentation' } }, [
       h(
         props.tag,
         mergeData(data, {

Original file line number	Diff line number	Diff line change
`@@ -14,7 +14,7 @@ export const BDropdownForm = /#__PURE__/ Vue.extend({`
`14`	`14`	`}`
`15`	`15`	`},`
`16`	`16`	`render(h, { props, data, children }) {`
`17`		`- return h('li', [`
	`17`	`+ return h('li', { attrs: { role: 'presentation' } }, [`
`18`	`18`	`h(`
`19`	`19`	`BForm,`
`20`	`20`	`mergeData(data, {`
Original file line number	Diff line number	Diff line change
`@@ -43,7 +43,7 @@ export const BDropdownItemButton = /#__PURE__/ Vue.extend({`
`43`	`43`	`}`
`44`	`44`	`},`
`45`	`45`	`render(h) {`
`46`		`- return h('li', [`
	`46`	`+ return h('li', { attrs: { role: 'presentation' } }, [`
`47`	`47`	`h(`
`48`	`48`	`'button',`
`49`	`49`	`{`
Original file line number	Diff line number	Diff line change
`@@ -37,7 +37,7 @@ export const BDropdownItem = /#__PURE__/ Vue.extend({`
`37`	`37`	`}`
`38`	`38`	`},`
`39`	`39`	`render(h) {`
`40`		`- return h('li', [`
	`40`	`+ return h('li', { attrs: { role: 'presentation' } }, [`
`41`	`41`	`h(`
`42`	`42`	`BLink,`
`43`	`43`	`{`
Original file line number	Diff line number	Diff line change
`@@ -17,7 +17,7 @@ export const BDropdownText = /#__PURE__/ Vue.extend({`
`17`	`17`	`}`
`18`	`18`	`},`
`19`	`19`	`render(h, { props, data, children }) {`
`20`		`- return h('li', [`
	`20`	`+ return h('li', { attrs: { role: 'presentation' } }, [`
`21`	`21`	`h(`
`22`	`22`	`props.tag,`
`23`	`23`	`mergeData(data, {`