Skip to content
GitLab
Commit fbd7f2e0 authored by Cameron Cundiff's avatar Cameron Cundiff
Browse files

Add visibly hidden button text for screen reader users. 

[Finishes #10448]
parent a9b58181
Hide whitespace changes
Inline Side-by-side
Showing
with 36 additions and 8 deletions
+36 -8
components.html
+ 36
- 8
View file @ fbd7f2e0
...@@ -671,7 +671,10 @@ base_url: "../" ...@@ -671,7 +671,10 @@ base_url: "../"
<div class="bs-example"> <div class="bs-example">
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-default">Default</button> <button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li> <li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li> <li><a href="#">Another action</a></li>
...@@ -682,7 +685,10 @@ base_url: "../" ...@@ -682,7 +685,10 @@ base_url: "../"
</div><!-- /btn-group --> </div><!-- /btn-group -->
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li> <li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li> <li><a href="#">Another action</a></li>
...@@ -693,7 +699,10 @@ base_url: "../" ...@@ -693,7 +699,10 @@ base_url: "../"
</div><!-- /btn-group --> </div><!-- /btn-group -->
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li> <li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li> <li><a href="#">Another action</a></li>
...@@ -704,7 +713,10 @@ base_url: "../" ...@@ -704,7 +713,10 @@ base_url: "../"
</div><!-- /btn-group --> </div><!-- /btn-group -->
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li> <li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li> <li><a href="#">Another action</a></li>
...@@ -715,7 +727,10 @@ base_url: "../" ...@@ -715,7 +727,10 @@ base_url: "../"
</div><!-- /btn-group --> </div><!-- /btn-group -->
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li> <li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li> <li><a href="#">Another action</a></li>
...@@ -726,7 +741,10 @@ base_url: "../" ...@@ -726,7 +741,10 @@ base_url: "../"
</div><!-- /btn-group --> </div><!-- /btn-group -->
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li> <li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li> <li><a href="#">Another action</a></li>
...@@ -742,6 +760,7 @@ base_url: "../" ...@@ -742,6 +760,7 @@ base_url: "../"
<button type="button" class="btn btn-danger">Action</button> <button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"> <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span> <span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button> </button>
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li> <li><a href="#">Action</a></li>
...@@ -837,7 +856,10 @@ base_url: "../" ...@@ -837,7 +856,10 @@ base_url: "../"
<div class="btn-toolbar" role="toolbar"> <div class="btn-toolbar" role="toolbar">
<div class="btn-group dropup"> <div class="btn-group dropup">
<button type="button" class="btn btn-default">Dropup</button> <button type="button" class="btn btn-default">Dropup</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li> <li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li> <li><a href="#">Another action</a></li>
...@@ -848,7 +870,10 @@ base_url: "../" ...@@ -848,7 +870,10 @@ base_url: "../"
</div><!-- /btn-group --> </div><!-- /btn-group -->
<div class="btn-group dropup"> <div class="btn-group dropup">
<button type="button" class="btn btn-primary">Right dropup</button> <button type="button" class="btn btn-primary">Right dropup</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu pull-right" role="menu"> <ul class="dropdown-menu pull-right" role="menu">
<li><a href="#">Action</a></li> <li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li> <li><a href="#">Another action</a></li>
...@@ -864,6 +889,7 @@ base_url: "../" ...@@ -864,6 +889,7 @@ base_url: "../"
<button type="button" class="btn btn-default">Dropup</button> <button type="button" class="btn btn-default">Dropup</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span> <span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button> </button>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<!-- Dropdown menu links --> <!-- Dropdown menu links -->
...@@ -1133,6 +1159,7 @@ base_url: "../" ...@@ -1133,6 +1159,7 @@ base_url: "../"
<button type="button" class="btn btn-default" tabindex="-1">Action</button> <button type="button" class="btn btn-default" tabindex="-1">Action</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1">
<span class="caret"></span> <span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button> </button>
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li> <li><a href="#">Action</a></li>
...@@ -1152,6 +1179,7 @@ base_url: "../" ...@@ -1152,6 +1179,7 @@ base_url: "../"
<button type="button" class="btn btn-default" tabindex="-1">Action</button> <button type="button" class="btn btn-default" tabindex="-1">Action</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1">
<span class="caret"></span> <span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button> </button>
<ul class="dropdown-menu pull-right" role="menu"> <ul class="dropdown-menu pull-right" role="menu">
<li><a href="#">Action</a></li> <li><a href="#">Action</a></li>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment