Skip to content
GitLab
    • Explore Projects Groups Snippets
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • B bootstrap
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 263
    • Issues 263
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 114
    • Merge requests 114
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Infrastructure Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Bootstrap
  • bootstrap
  • Merge requests
  • !9352

Give forms and search fields proper ARIA roles

  • Review changes

  • Download
  • Email patches
  • Plain diff
Merged Administrator requested to merge github/fork/kevinSuttle/aria-forms into 3.0.0-wip 11 years ago
  • Overview 0
  • Commits 1
  • Pipelines 0
  • Changes 3

Created by: kevinSuttle

http://blog.paciellogroup.com/2013/02/using-wai-aria-landmarks-2013/#tablex

http://www.w3.org/TR/wai-aria/roles#form

http://www.w3.org/TR/wai-aria/roles#search

Compare
  • 3.0.0-wip (base)

and
  • latest version
    a86f5d24
    1 commit, 2 years ago

3 files
+ 23
- 23

    Preferences

    File browser
    Compare changes
compone‎nts.html‎ +15 -15
css.‎html‎ +7 -7
customi‎ze.html‎ +1 -1
components.html
+ 15
- 15
  • View file @ a86f5d24

  • Edit in single-file editor

  • Open in Web IDE


@@ -532,7 +532,7 @@ base_url: "../"
</div>
<h2 id="input-groups-basic">Basic input group</h2>
<form class="bs-example bs-example-form">
<form class="bs-example bs-example-form" role="form">
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="Username">
@@ -569,7 +569,7 @@ base_url: "../"
<h2 id="input-groups-sizes">Optional sizes</h2>
<p>Add the relative form sizing classes to the <code>.input-group-addon</code>.</p>
<form class="bs-example bs-example-form">
<form class="bs-example bs-example-form" role="form">
<div class="input-group">
<span class="input-group-addon input-lg">@</span>
<input type="text" class="form-control input-lg" placeholder="Username">
@@ -692,7 +692,7 @@ base_url: "../"
<h2 id="input-groups-buttons-dropdowns">Buttons with dropdowns</h2>
<p></p>
<form class="bs-example bs-example-form">
<form class="bs-example bs-example-form" role="form">
<div class="row">
<div class="col-lg-6">
<div class="input-group">
@@ -762,7 +762,7 @@ base_url: "../"
{% endhighlight %}
<h2 id="input-groups-buttons-segmented">Segmented dropdown groups</h2>
<form class="bs-example bs-example-form">
<form class="bs-example bs-example-form" role="form">
<div class="row">
<div class="col-lg-6">
<div class="input-group">
@@ -1083,14 +1083,14 @@ base_url: "../"
<div class="bs-example">
<nav class="navbar" role="navigation">
<form class="navbar-form pull-left">
<form class="navbar-form pull-left" role="form">
<input type="text" class="form-control" style="width: 200px;">
<button type="submit" class="btn btn-default">Submit</button>
</form>
</nav>
<nav class="navbar" role="navigation">
<form class="navbar-form pull-left">
<form class="navbar-form pull-left" role="form">
<select name="" id="" class="form-control" style="width: 200px;">
<option value="1">1</option>
<option value="2">2</option>
@@ -1102,7 +1102,7 @@ base_url: "../"
</nav>
<nav class="navbar" role="navigation">
<form class="navbar-form pull-left">
<form class="navbar-form pull-left" role="form">
<input type="text" class="form-control" style="width: 200px;">
<input type="checkbox">
<button type="submit" class="btn btn-default">Submit</button>
@@ -1110,7 +1110,7 @@ base_url: "../"
</nav>
<nav class="navbar" role="navigation">
<form class="navbar-form pull-left">
<form class="navbar-form pull-left" role="form">
<input type="text" class="form-control" style="width: 200px;">
<label class="checkbox-inline">
<input type="checkbox"> Remember me
@@ -1121,7 +1121,7 @@ base_url: "../"
</div><!-- /example -->
{% highlight html %}
<form class="navbar-form pull-left">
<form class="navbar-form pull-left" role="form">
<input type="text" class="form-control" style="width: 200px;">
<button type="submit" class="btn btn-default">Submit</button>
</form>
@@ -1285,8 +1285,8 @@ body { padding-bottom: 70px; }
</ul>
</li>
</ul>
<form class="navbar-form pull-left" action="">
<input type="text" class="form-control col-lg-8" placeholder="Search">
<form class="navbar-form pull-left" action="" role="form">
<input type="text" class="form-control col-lg-8" placeholder="Search" role="search">
</form>
<ul class="nav navbar-nav pull-right">
<li><a href="#">Link</a></li>
@@ -1355,8 +1355,8 @@ body { padding-bottom: 70px; }
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<form class="navbar-form pull-left" action="">
<input type="text" class="form-control col-lg-8" placeholder="Search">
<form class="navbar-form pull-left" action="" role="form">
<input type="text" class="form-control col-lg-8" placeholder="Search" role="search">
</form>
</div><!-- /.nav-collapse -->
</div><!-- /.container -->
@@ -1405,8 +1405,8 @@ body { padding-bottom: 70px; }
</ul>
</li>
</ul>
<form class="navbar-form pull-left" action="">
<input type="text" class="form-control col-lg-8" placeholder="Search">
<form class="navbar-form pull-left" action="" role="form">
<input type="text" class="form-control col-lg-8" placeholder="Search" role="search">
</form>
<ul class="nav navbar-nav pull-right">
<li><a href="#">Link</a></li>
css.html
+ 7
- 7
  • View file @ a86f5d24

  • Edit in single-file editor

  • Open in Web IDE


@@ -1242,7 +1242,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h2 id="forms-example">Basic example</h2>
<p>Individual form controls automatically receive some global styling. All textual <code>&lt;input&gt;</code>, <code>&lt;textarea&gt;</code>, and <code>&lt;select&gt;</code> elements with <code>.form-control</code> are set to <code>width: 100%;</code> by default. Wrap labels and controls in <code>.form-group</code> for optimum spacing.</p>
<form class="bs-example">
<form class="bs-example" role="form">
<fieldset>
<legend>Legend</legend>
<div class="form-group">
@@ -1267,7 +1267,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</fieldset>
</form><!-- /example -->
{% highlight html %}
<form>
<form role="form">
<fieldset>
<legend>Legend</legend>
<div class="form-group">
@@ -1304,7 +1304,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h4>Always add labels</h4>
<p>Screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the <code>.sr-only</code> class.</p>
</div>
<form class="bs-example form-inline">
<form class="bs-example form-inline" role="form">
<label class="sr-only" for="exampleInputEmail">Email address</label>
<input type="text" class="form-control" id="exampleInputEmail" placeholder="Enter email">
<label class="sr-only" for="exampleInputPassword">Password</label>
@@ -1317,7 +1317,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<button type="submit" class="btn btn-default">Sign in</button>
</form><!-- /example -->
{% highlight html %}
<form class="form-inline">
<form class="form-inline" role="form">
<label class="sr-only" for="exampleInputEmail">Email address</label>
<input type="text" class="form-control" id="exampleInputEmail" placeholder="Enter email">
<label class="sr-only" for="exampleInputPassword">Password</label>
@@ -1362,7 +1362,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div>
</form>
{% highlight html %}
<form class="form-horizontal">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail" class="col-lg-2 control-label">Email</label>
<div class="col-lg-10">
@@ -1544,7 +1544,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div>
</form>
{% highlight html %}
<form class="form-horizontal">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail2" class="col-lg-2 control-label">Email</label>
<div class="col-lg-10">
@@ -1616,7 +1616,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</fieldset>
</form>
{% highlight html %}
<form class="form-inline">
<form class="form-inline" role="form">
<fieldset disabled>
<div class="form-group">
<label for="disabledInput">Disabled input</label>
customize.html
+ 1
- 1
  • View file @ a86f5d24

  • Edit in single-file editor

  • Open in Web IDE


@@ -8,7 +8,7 @@ base_url: "../"
<!-- Customize
================================================== -->
<form class="bs-customizer">
<form class="bs-customizer" role="form">
<div class="bs-docs-section" id="less-section">
<div class="page-header">
<button class="btn btn-default toggle" type="button">Toggle all</button>
0 Assignees
None
Assign to
0 Reviewers
None
Request review from
Labels
0
None
0
None
    Assign labels
  • Manage project labels

Milestone
v3.0.0
v3.0.0
None
Time tracking
No estimate or time spent
Lock merge request
Unlocked
1
1 participant
Administrator
Reference: twbs/bootstrap!9352
Source branch: github/fork/kevinSuttle/aria-forms

Menu

Explore Projects Groups Snippets