Add aria-expanded and aria-controls to docs navbar toggle

Also, use id rather class name for the navigation, as it's unique and
lets us use correct aria-controls (and without the use of id,
aria-expanded does not get updated correctly by the current dropdown
toggle script)

diff --git a/docs/_includes/nav/main.html b/docs/_includes/nav/main.html
index 530430615001b670ec3dc6171e1fcf7a3b14b440..01f7fac06a912bcd969b56a625131b38dee428b9 100644 (file)
--- a/docs/_includes/nav/main.html
+++ b/docs/_includes/nav/main.html
@@ -1,7 +1,7 @@
 <header class="navbar navbar-static-top bs-docs-nav" id="top" role="banner">
   <div class="container">
     <div class="navbar-header">
-      <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
+      <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#bs-navbar" aria-controls="bs-navbar" aria-expanded="false">
         <span class="sr-only">Toggle navigation</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
@@ -9,7 +9,7 @@
       </button>
       <a href="../" class="navbar-brand">Bootstrap</a>
     </div>
-    <nav class="collapse navbar-collapse bs-navbar-collapse">
+    <nav id="bs-navbar" class="collapse navbar-collapse">
       <ul class="nav navbar-nav">
         <li{% if page.slug == "getting-started" %} class="active"{% endif %}>
           <a href="../getting-started/">Getting started</a>