Skip to content

Commit

Permalink
Fix/tabs accessibility (#360)
Browse files Browse the repository at this point in the history 
* 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
  • Loading branch information
@odero
odero authored Sep 23, 2023
1 parent b6bb125 commit 967789c
Show file tree
Hide file tree
Showing 2 changed files with 31 additions and 25 deletions.
2 changes: 1 addition & 1 deletion _includes/scripts.html
View file
Original file line number Diff line number Diff line change
@@ -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>

Expand Down
54 changes: 30 additions & 24 deletions pages/getting-started/understand-odata-in-6-steps.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down

0 comments on commit 967789c

Please sign in to comment.