Additional ARIA on navs and dropdown (#358)

* [nav] ARIA role

Adds role="navigation" when the b-nav is not inside a b-navbar

* [nav-toggle] ARIA

* [collapse] ARIA & emitting collapse state change

Whenever the show state changes, the 'event collapse::toggle::state' (with args id and state) is emitted on $root.

This event Used for setting aria states on controlling trigger element

aria-expanded attribute is set based on current state.

* [nav-toggle] ARIA states

Listens for state changes from collapse ('collapse::toggle::state') to set toggle aria atributes

* [nav-item-dropdown] ARIA atributes

* [nav-item-dropdown] ARIA attributes

* [dropdown] ARIA attributes

Removed dependency on generate-id

aria-labelledby attributes only present if ID is provided

* [collapse] Minor ARIA update

* [collapse] state handling

* [dropdown] ID handling adjustment

* [dropdown] minor update

* [dropdown] minor code cleanup

* [collapse] emit state on created

* [collapse] remove emit on create

* [dropdown] code cleanup

lib/components/collapse.vue

@@ -6,7 +6,7 @@
             @after-leave="clearHeight"
             name="collapse"
     >
-        <div :class="classObject" v-show="show">
+        <div :class="classObject" v-show="show" :aria-expanded="show ? 'true' : 'false'">
             <slot></slot>
         </div>
     </transition>
@@ -55,6 +55,7 @@
         methods: {
             toggle() {
                 this.show = !this.show;
+                this.emitState();
             },
             enter(el) {
                 el.style.height = 'auto';
@@ -78,16 +79,21 @@
             },
             clearHeight(el) {
                 el.style.height = null;
+            },
+            emitState() {
+                this.$root.$emit('collapse::toggle::state', this.id, this.state);
             }
         },
-
         created() {
             this.$root.$on('collapse::toggle', target => {
                 if (target !== this.id) {
                     return;
                 }
                 this.toggle();
             });
+        },
+        mounted() {
+            this.emitState();
         }
     };
 

lib/components/dropdown.vue

@@ -3,7 +3,7 @@
 
         <b-button :class="{'dropdown-toggle': !split, 'btn-link': link}"
                   ref="button"
-                  :id="_id"
+                  :id="id ? (id + '__BV_button_') : null"
                   :aria-haspopup="split ? null : 'true'"
                   :aria-expanded="split ? null : (visible ? 'true' : 'false')"
                   :variant="variant"
@@ -17,6 +17,7 @@
         <b-button :class="['dropdown-toggle','dropdown-toggle-split',{'btn-link': link}]"
                   v-if="split"
                   ref="toggle"
+                  :id="id ? (id + '__BV_toggle_') : null"
                   :aria-haspopup="split ? 'true' : null"
                   :aria-expanded="split ? (visible ? 'true' : 'false') : null"
                   :variant="variant"
@@ -30,7 +31,7 @@
         <div :class="['dropdown-menu',{'dropdown-menu-right': right}]"
              ref="menu"
              role="menu"
-             :aria-labelledby="split ? null : _id"
+             :aria-labelledby="id ? (id + (split ? '__BV_toggle_' : '__BV_button_')) : null"
              @keyup.esc="onEsc"
              @keydown.tab="onTab"
              @keydown.up="focusNext($event,true)"
@@ -45,18 +46,20 @@
 <script>
     import clickOut from '../mixins/clickout';
     import dropdown from '../mixins/dropdown';
-    import generateId from '../mixins/generate-id';
     import bButton from './button.vue';
 
     export default {
-        mixins: [clickOut, dropdown, generateId],
+        mixins: [clickOut, dropdown],
         components: {bButton},
         data() {
             return {
                 visible: false
             };
         },
         props: {
+            id: {
+                type: String
+            },
             toggleText: {
                 type: String,
                 default: 'Toggle Dropdown'

lib/components/nav-item-dropdown.vue

@@ -4,8 +4,9 @@
         <a :class="['nav-link', dropdownToggle, {disabled}]"
            href="#"
            ref="button"
+           :id="id ? (id + '__BV_button_') : null"
            aria-haspopup="true"
-           :aria-expanded="visible"
+           :aria-expanded="visible ? 'true' : 'false'"
            :disabled="disabled"
            @click.stop.prevent="toggle($event)"
            @keydown.enter.stop.prevent="toggle($event)"
@@ -17,7 +18,7 @@
         <div :class="['dropdown-menu',{'dropdown-menu-right': right}]"
              role="menu"
              ref="menu"
-             :aria-labelledby="'b_dropdown_button_' + _uid"
+             :aria-labelledby="id ? (id + '__BV_button_') : null"
              @keyup.esc="onEsc"
              @keydown.tab="onTab"
              @keydown.up="focusNext($event,true)"
@@ -49,6 +50,9 @@
             }
         },
         props: {
+            id: {
+                type: String
+            },
             caret: {
                 type: Boolean,
                 default: true

lib/components/nav-toggle.vue

@@ -3,6 +3,8 @@
             type="button"
             :aria-label="label"
             @click="onclick"
+            :aria-controls="target.id ? target.id : target"
+            :aria-explanded="toggleState"
     >
         <span class="navbar-toggler-icon"></span>
     </button>
@@ -19,7 +21,11 @@ export default {
             ];
         }
     },
-
+    data() {
+        return {
+            toggleState: false
+        };
+    },
     props: {
         label: {
             type: String,
@@ -33,7 +39,6 @@ export default {
             required: true
         }
     },
-
     methods: {
         onclick() {
             const target = this.target;
@@ -42,6 +47,13 @@ export default {
             }
             this.$root.$emit('collapse::toggle', this.target);
         }
+    },
+    created() {
+        this.$root.$on('collapse::toggle::state', (target, state) => {
+            if (target === this.target) {
+                this.toggleState = state;
+            }
+        });
     }
 };
 </script>

lib/components/nav.vue

@@ -1,5 +1,8 @@
 <template>
-    <component :is="type" :class="classObject">
+    <component :is="type"
+               :class="classObject"
+               :role="isNavBar ? null : 'navigation'"
+    >
         <slot></slot>
     </component>
 </template>