From 27d9d35ffd2ec9787374247b373d0cf96cdad3e8 Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Fri, 14 Nov 2014 01:15:54 +0000 Subject: [PATCH 1/3] Expand caveat for disabled fieldsets and links --- docs/_includes/css/forms.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/_includes/css/forms.html b/docs/_includes/css/forms.html index 5df36e282016..c558de96a81a 100644 --- a/docs/_includes/css/forms.html +++ b/docs/_includes/css/forms.html @@ -495,7 +495,7 @@

Disabled fieldsets

Caveat about link functionality of <a>

-

Our styles use pointer-events: none to try to disable the link functionality of <a class="btn btn-*"> buttons in this case, but that CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11. So to be safe, use custom JavaScript to disable such links.

+

By default, browsers will treat all native form controls (<input>, <select> and <button> elements) inside a <fieldset disabled> as disabled, preventing both keyboard and mouse interactions on them. However, if your form also includes <a ... class="btn btn-*"> elements, these will only be given a style of pointer-events: none. As noted in the section about disabled state for buttons (and specifically in the sub-section for anchor elements), this CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11, and won't prevent keyboard users from being able to focus or activate these links. So to be safe, use custom JavaScript to disable such links.

From 25cac1ea9a70ab192a4b4fb49b972de2f342d240 Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Fri, 14 Nov 2014 01:27:47 +0000 Subject: [PATCH 2/3] Redundant role="form" on
s --- docs/_includes/components/input-groups.html | 8 +-- docs/_includes/css/forms.html | 66 ++++++++++----------- docs/_includes/js/modal.html | 4 +- docs/customize.html | 2 +- docs/examples/jumbotron/index.html | 2 +- docs/examples/signin/index.html | 2 +- 6 files changed, 42 insertions(+), 42 deletions(-) diff --git a/docs/_includes/components/input-groups.html b/docs/_includes/components/input-groups.html index c94b60c11526..221fcad54b85 100644 --- a/docs/_includes/components/input-groups.html +++ b/docs/_includes/components/input-groups.html @@ -22,7 +22,7 @@

Basic example

Place one add-on or button on either side of an input. You may also place one on both sides of an input.

We do not support multiple add-ons on a single side.

We do not support multiple form-controls in a single input group.

- +
@ @@ -59,7 +59,7 @@

Basic example

Sizing

Add the relative form sizing classes to the .input-group itself and contents within will automatically resize—no need for repeating the form control size classes on each element.

- +
@ @@ -182,7 +182,7 @@

Button addons

Buttons with dropdowns

- +
@@ -252,7 +252,7 @@

Buttons with dropdowns

{% endhighlight %}

Segmented buttons

- +
diff --git a/docs/_includes/css/forms.html b/docs/_includes/css/forms.html index c558de96a81a..017f5f483b72 100644 --- a/docs/_includes/css/forms.html +++ b/docs/_includes/css/forms.html @@ -4,7 +4,7 @@

Forms

Basic example

Individual form controls automatically receive some global styling. All textual <input>, <textarea>, and <select> elements with .form-control are set to width: 100%; by default. Wrap labels and controls in .form-group for optimum spacing.

- +
@@ -27,7 +27,7 @@

Basic example

{% highlight html %} -
+
@@ -66,7 +66,7 @@

Always add labels

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 .sr-only class. There are further alternative methods of providing a label for assistive technologies, such as the aria-label, aria-labelledby or title attribute. If none of these is present, screen readers may resort to using the placeholder attribute, if present, but note that use of placeholder as a replacement for other labelling methods is not advised.

- +
@@ -91,7 +91,7 @@

Always add labels

{% highlight html %} -
+
@@ -120,7 +120,7 @@

Always add labels

Horizontal form

Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding .form-horizontal to the form. Doing so changes .form-groups to behave as grid rows, so no need for .row.

- +
@@ -150,7 +150,7 @@

Horizontal form

{% highlight html %} -
+
@@ -191,7 +191,7 @@

Type declaration required

Inputs will only be fully styled if their type is properly declared.

- +
@@ -206,7 +206,7 @@

Input groups

Textarea

Form control which supports multiple lines of text. Change rows attribute as necessary.

-
+
@@ -219,7 +219,7 @@

Checkboxes and radios

A checkbox or radio with the disabled attribute will be styled appropriately. To have the <label> for the checkbox or radio also display a "not-allowed" cursor when the user hovers over the label, add the .disabled class to your .radio, .radio-inline, .checkbox, .checkbox-inline, or <fieldset>.

Default (stacked)

-
+