Fix/tabs accessibility (#360)

* Add aria support for tab dropdowns

* Fix: tabindex=-1 breaking tab navigation

* Update bootstrap.js version to match bootstrap.css, recognize aria-expanded

* Remove role=menu in dropdowns

Author: odero

_includes/scripts.html

@@ -1,5 +1,5 @@
 <script src="https://code.jquery.com/jquery-2.1.0.min.js"></script>
-<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
+<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 <script src="{{'/public/tabs.js' | prepend: site.baseurl | prepend: site.url}}"></script>
 <script src="{{'/public/combobox-autocomplete.js' | prepend: site.baseurl | prepend: site.url}}"></script>
 

pages/getting-started/understand-odata-in-6-steps.html

@@ -473,10 +473,11 @@ <h3 class="top-margin bottom-margin">Step 1: Requesting resources
 <ul class="nav nav-tabs" role="tablist">
 <li role="presentation" class="active"><a class="tab-link"  href="#http1" role="tab" aria-controls="http1"  data-toggle="tab">HTTP request</a></li>
 <li role="presentation" class="dropdown">
-<a class="tab-link"  href="#csharp1" role="tab" id="csharpDrop1" class="dropdown-toggle" data-toggle="dropdown" aria-controls="csharpDrop1-contents">C# &nbsp;<span class="caret"></span></a></p>
-<ul class="dropdown-menu tab-link"role="menu" aria-labelledby="csharpDrop1" id="csharpDrop1-contents">
-<li><a class="tab-link"  href="#csharpCodeGen1" tabindex="-1" role="tab" id="csharpCodeGen1-tab" data-toggle="tab" aira-controls="csharpCodeGen1">OData v4 Client Code Generator</a></li>
-<li><a class="tab-link"  href="#csharpSimpleOData1" tabindex="-1" role="tab" id="csharpSimpleOData1-tab" data-toggle="tab" aira-controls="csharpSimpleOData1">Simple.OData.Client</a></li>
+<a class="tab-link dropdown-toggle"  href="#csharp1" role="tab" id="csharpDrop1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-controls="csharpDrop1-contents">C# &nbsp;<span
+            class="caret"></span></a></p>
+<ul class="dropdown-menu tab-link"aria-labelledby="csharpDrop1" id="csharpDrop1-contents">
+<li><a class="tab-link"  href="#csharpCodeGen1" role="tab" id="csharpCodeGen1-tab" data-toggle="tab" aria-controls="csharpCodeGen1">OData v4 Client Code Generator</a></li>
+<li><a class="tab-link"  href="#csharpSimpleOData1" role="tab" id="csharpSimpleOData1-tab" data-toggle="tab" aria-controls="csharpSimpleOData1">Simple.OData.Client</a></li>
 </ul>
 </li>
 <li role="presentation"><a class="tab-link"  href="#olingo-js-1" role="tab" aria-controls="olingo-js-1" data-toggle="tab">Olingo JavaScript client</a></li>
@@ -580,10 +581,11 @@ <h3 class="top-margin bottom-margin">Step 2: Requesting an individual resource
 <ul class="nav nav-tabs" role="tablist">
 <li role="presentation" class="active"><a class="tab-link" href="#http2" role="tab" aria-controls="http2" data-toggle="tab">HTTP request</a></li>
 <li role="presentation" class="dropdown">
-<a class="tab-link" href="#csharp2" role="tab" id="csharpDrop2" class="dropdown-toggle" data-toggle="dropdown" aria-controls="csharpDrop2-contents">C# &nbsp;<span class="caret"></span></a></p>
-<ul class="dropdown-menu tab-link" role="menu" aria-labelledby="csharpDrop1" id="csharpDrop2-contents">
-<li><a class="tab-link" href="#csharpCodeGen2" tabindex="-1" role="tab" id="csharpCodeGen2-tab" data-toggle="tab" aira-controls="csharpCodeGen2">OData v4 Client Code Generator</a></li>
-<li><a class="tab-link" href="#csharpSimpleOData2" tabindex="-1" role="tab" id="csharpSimpleOData2-tab" data-toggle="tab" aira-controls="csharpSimpleOData2">Simple.OData.Client</a></li>
+<a class="tab-link dropdown-toggle" href="#csharp2" role="tab" id="csharpDrop2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-controls="csharpDrop2-contents">C# &nbsp;<span
+            class="caret"></span></a></p>
+<ul class="dropdown-menu tab-link" aria-labelledby="csharpDrop1" id="csharpDrop2-contents">
+<li><a class="tab-link" href="#csharpCodeGen2" role="tab" id="csharpCodeGen2-tab" data-toggle="tab" aria-controls="csharpCodeGen2">OData v4 Client Code Generator</a></li>
+<li><a class="tab-link" href="#csharpSimpleOData2" role="tab" id="csharpSimpleOData2-tab" data-toggle="tab" aria-controls="csharpSimpleOData2">Simple.OData.Client</a></li>
 </ul>
 </li>
 <li role="presentation"><a class="tab-link" href="#olingo-js-2" role="tab" aria-controls="olingo-js-2" data-toggle="tab">Olingo JavaScript client</a></li>
@@ -688,10 +690,11 @@ <h3 class="top-margin bottom-margin">Step 3: Queries
 <ul class="nav nav-tabs" role="tablist">
 <li role="presentation" class="active"><a class="tab-link" href="#http3" role="tab" aria-controls="http3" data-toggle="tab">HTTP request</a></li>
 <li role="presentation" class="dropdown">
-<a class="tab-link" href="#csharp3" role="tab" id="csharpDrop3" role="tab" class="dropdown-toggle" data-toggle="dropdown" aria-controls="csharpDrop3-contents">C# &nbsp;<span class="caret"></span></a></p>
-<ul class="dropdown-menu tab-link" role="menu" aria-labelledby="csharpDrop3" id="csharpDrop3-contents">
-<li><a class="tab-link" href="#csharpCodeGen3" tabindex="-1" role="tab" id="csharpCodeGen3-tab" data-toggle="tab" aira-controls="csharpCodeGen3">OData v4 Client Code Generator</a></li>
-<li><a class="tab-link" href="#csharpSimpleOData3" tabindex="-1" role="tab" id="csharpSimpleOData3-tab" data-toggle="tab" aira-controls="csharpSimpleOData3">Simple.OData.Client</a></li>
+<a class="tab-link dropdown-toggle" href="#csharp3" role="tab" id="csharpDrop3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-controls="csharpDrop3-contents">C#
+          &nbsp;<span class="caret"></span></a></p>
+<ul class="dropdown-menu tab-link" aria-labelledby="csharpDrop3" id="csharpDrop3-contents">
+<li><a class="tab-link" href="#csharpCodeGen3" role="tab" id="csharpCodeGen3-tab" data-toggle="tab" aria-controls="csharpCodeGen3">OData v4 Client Code Generator</a></li>
+<li><a class="tab-link" href="#csharpSimpleOData3" role="tab" id="csharpSimpleOData3-tab" data-toggle="tab" aria-controls="csharpSimpleOData3">Simple.OData.Client</a></li>
 </ul>
 </li>
 <li role="presentation"><a class="tab-link" href="#olingo-js-3" role="tab" aria-controls="olingo-js-3" data-toggle="tab">Olingo JavaScript client</a></li>
@@ -805,10 +808,11 @@ <h3 class="top-margin bottom-margin">Step 4: Creating a new resource
 <ul class="nav nav-tabs" role="tablist">
 <li role="presentation" class="active"><a class="tab-link" href="#http4" role="tab" aria-controls="http4"  data-toggle="tab">HTTP request</a></li>
 <li role="presentation" class="dropdown">
-<a class="tab-link" href="#csharp4" role="tab" id="csharpDrop4" class="dropdown-toggle" data-toggle="dropdown" aria-controls="csharpDrop4-contents">C# &nbsp;<span class="caret"></span></a></p>
-<ul class="dropdown-menu tab-link" role="menu" aria-labelledby="csharpDrop4" id="csharpDrop4-contents">
-<li><a class="tab-link" href="#csharpCodeGen4" tabindex="-1" role="tab" id="csharpCodeGen4-tab" data-toggle="tab" aira-controls="csharpCodeGen4">OData v4 Client Code Generator</a></li>
-<li><a class="tab-link" href="#csharpSimpleOData4" tabindex="-1" role="tab" id="csharpSimpleOData4-tab" data-toggle="tab" aira-controls="csharpSimpleOData4">Simple.OData.Client</a></li>
+<a class="tab-link dropdown-toggle" href="#csharp4" role="tab" id="csharpDrop4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-controls="csharpDrop4-contents">C# &nbsp;<span
+            class="caret"></span></a></p>
+<ul class="dropdown-menu tab-link" aria-labelledby="csharpDrop4" id="csharpDrop4-contents">
+<li><a class="tab-link" href="#csharpCodeGen4" role="tab" id="csharpCodeGen4-tab" data-toggle="tab" aria-controls="csharpCodeGen4">OData v4 Client Code Generator</a></li>
+<li><a class="tab-link" href="#csharpSimpleOData4" role="tab" id="csharpSimpleOData4-tab" data-toggle="tab" aria-controls="csharpSimpleOData4">Simple.OData.Client</a></li>
 </ul>
 </li>
 <li role="presentation"><a class="tab-link" href="#olingo-js-4" role="tab" aria-controls="olingo-js-4" data-toggle="tab">Olingo JavaScript client</a></li>
@@ -1068,10 +1072,11 @@ <h3 class="top-margin bottom-margin">Step 5: Relating resources
 <ul class="nav nav-tabs" role="tablist">
 <li role="presentation" class="active"><a class="tab-link" href="#http5" role="tab" aria-controls="http5"  data-toggle="tab">HTTP request</a></li>
 <li role="presentation" class="dropdown">
-<a class="tab-link" href="#csharp5" role="tab" id="csharpDrop5" class="dropdown-toggle" data-toggle="dropdown" aria-controls="csharpDrop5-contents">C# &nbsp;<span class="caret"></span></a></p>
-<ul class="dropdown-menu tab-link" role="menu" aria-labelledby="csharpDrop5" id="csharpDrop5-contents">
-<li><a class="tab-link" href="#csharpCodeGen5" tabindex="-1" role="tab" id="csharpCodeGen5-tab" data-toggle="tab" aira-controls="csharpCodeGen5">OData v4 Client Code Generator</a></li>
-<li><a class="tab-link" href="#csharpSimpleOData5" tabindex="-1" role="tab" id="csharpSimpleOData5-tab" data-toggle="tab" aira-controls="csharpSimpleOData5">Simple.OData.Client</a></li>
+<a class="tab-link dropdown-toggle" href="#csharp5" role="tab" id="csharpDrop5" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-controls="csharpDrop5-contents">C# &nbsp;<span
+            class="caret"></span></a></p>
+<ul class="dropdown-menu tab-link" aria-labelledby="csharpDrop5" id="csharpDrop5-contents">
+<li><a class="tab-link" href="#csharpCodeGen5" role="tab" id="csharpCodeGen5-tab" data-toggle="tab" aria-controls="csharpCodeGen5">OData v4 Client Code Generator</a></li>
+<li><a class="tab-link" href="#csharpSimpleOData5" role="tab" id="csharpSimpleOData5-tab" data-toggle="tab" aria-controls="csharpSimpleOData5">Simple.OData.Client</a></li>
 </ul>
 </li>
 <li role="presentation"><a class="tab-link" href="#olingo-js-5" role="tab" aria-controls="olingo-js-5" data-toggle="tab">Olingo JavaScript client</a></li>
@@ -1236,10 +1241,11 @@ <h3 class="top-margin bottom-margin">Step 6: Invoking a function
 <ul class="nav nav-tabs" role="tablist">
 <li role="presentation" class="active"><a class="tab-link" href="#http6" role="tab" aria-controls="http6"  data-toggle="tab">HTTP request</a></li>
 <li role="presentation" class="dropdown">
-<a class="tab-link" href="#csharp6" role="tab" id="csharpDrop6" class="dropdown-toggle" data-toggle="dropdown" aria-controls="csharpDrop1-contents">C# &nbsp;<span class="caret"></span></a></p>
-<ul class="dropdown-menu tab-link" role="menu" aria-labelledby="csharpDrop6" id="csharpDrop6-contents">
-<li><a class="tab-link" href="#csharpCodeGen6" tabindex="-1" role="tab" id="csharpCodeGen6-tab" data-toggle="tab" aira-controls="csharpCodeGen6">OData v4 Client Code Generator</a></li>
-<li><a class="tab-link" href="#csharpSimpleOData6" tabindex="-1" role="tab" id="csharpSimpleOData6-tab" data-toggle="tab" aira-controls="csharpSimpleOData6">Simple.OData.Client</a></li>
+<a class="tab-link dropdown-toggle" href="#csharp6" role="tab" id="csharpDrop6" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-controls="csharpDrop1-contents">C# &nbsp;<span
+            class="caret"></span></a></p>
+<ul class="dropdown-menu tab-link" aria-labelledby="csharpDrop6" id="csharpDrop6-contents">
+<li><a class="tab-link" href="#csharpCodeGen6" role="tab" id="csharpCodeGen6-tab" data-toggle="tab" aria-controls="csharpCodeGen6">OData v4 Client Code Generator</a></li>
+<li><a class="tab-link" href="#csharpSimpleOData6" role="tab" id="csharpSimpleOData6-tab" data-toggle="tab" aria-controls="csharpSimpleOData6">Simple.OData.Client</a></li>
 </ul>
 </li>
 <li role="presentation"><a class="tab-link" href="#olingo-js-6" role="tab" aria-controls="olingo-js-6" data-toggle="tab">Olingo JavaScript client</a></li>