From 10066ced97f96f806931601acea45467ae390049 Mon Sep 17 00:00:00 2001 From: Brahim Mahadi Wachilli Date: Fri, 9 Jun 2023 14:58:52 -0400 Subject: [PATCH 1/5] WCAG upgrade - Create test page for: Button --- common/button/button-en.html | 415 +++++++++++++++++++++++++++++++++++ common/button/button-fr.html | 413 ++++++++++++++++++++++++++++++++++ common/button/index.json-ld | 34 +++ 3 files changed, 862 insertions(+) create mode 100644 common/button/button-en.html create mode 100644 common/button/button-fr.html create mode 100644 common/button/index.json-ld diff --git a/common/button/button-en.html b/common/button/button-en.html new file mode 100644 index 000000000..f4b731191 --- /dev/null +++ b/common/button/button-en.html @@ -0,0 +1,415 @@ +{ + "title": "Buttons", + "language": "en", + "description": "Buttons page including working examples to test how various button styles appear and function", + "dateModified": "2023-06-09" +} +--- + +

On this page:

+ + + +

Purpose

+

Use buttons to create a call to action that entices the user to submit content from a form. Also, use buttons to take users to a webpage that provides additional information.

+ + + +

Basic use

+ +

Default

+

Use the button classes on a, button, or input elements to create visual consistency. The browser shows certain elements as a button. However, there is often a lack of visual consistency for each button type. Each browser can have a different button default appearance.

+ +

Working example

+
Default:
+ + + +Link + +
Styled:
+ + + +Link + +

Code Sample

+

+	// Default button:
+	<button type="submit">
+	Button
+	</button>
+	<input type="button" value="Input"/>
+	<input type="submit" value="Submit"/>
+	<a href="#" role="button">
+	Link
+	</a>
+
+	// Styled button:
+	<button class="btn btn-default" type="submit">
+	Button
+	</button>
+	<input class="btn btn-default" type="button" value="Input"/>
+	<input class="btn btn-default" type="submit" value="Submit"/>
+	<a class="btn btn-default" href="#" role="button">
+	Link
+	</a>
+
+ +

Enhanced use

+ +

Colours/Styles

+

Use to add colours to buttons. Colours signify various things such as a link to warning information (caution button) to a link to the next learning module (success button).

+

Working example

+ + + + + + + + +

Code sample

+

+	// Default:
+	<button type="button" class="btn btn-default">
+	Default
+	</button>
+
+	// Primary:
+	<button type="button" class="btn btn-primary">
+	Primary
+	</button>
+
+	// Success:
+	<button type="button" class="btn btn-success">
+	Success
+	</button>
+
+	// Info:
+	<button type="button" class="btn btn-info">
+	Info
+	</button>
+
+	// Warning:
+	<button type="button" class="btn btn-warning">
+	Warning
+	</button>
+
+	// Danger:
+	<button type="button" class="btn btn-danger">
+	Danger
+	</button>
+
+	// Link:
+	<button type="button" class="btn btn-link">
+	Link
+	</button>
+
+ +

Call to Action

+

Working example

+ + +

Code sample

+

+// Call to action button:
+<button type="button" class="btn btn-call-to-action">Call to Action</button>
+
+ + +

Sizing

+

Use to increase or decrease the size of a button.

+

Working example

+ + + + + +

Code sample

+

+	// Extra small button:
+	<button type="button" class="btn btn-default btn-xs">
+	Extra small button
+	</button>
+
+	// Small button:
+	<button type="button" class="btn btn-default btn-sm">
+	Small button
+	</button>
+
+	// Default button:
+	<button type="button" class="btn btn-default">
+	Default button
+	</button>
+
+	// Large button:
+	<button type="button" class="btn btn-default btn-lg">
+	Large button
+	</button>
+ +

Full Width

+

Use to create block level buttons (those that span the full width of a parent).

+

Working example

+ + +

Code sample

+

+// Block level button:
+<button type="button" class="btn btn-default btn-block">Button</button>
+
+ +

Active state

+

Use .active with button and a elements if you need to have a button look active at all times (usually for display or instructional purposes on fake buttons or links). When a user presses a button it appears in the active state (with an inset shadow, and darker background and border). For button and a elements, this is auto-styled in CSS via :active.

+

Working example

+ +Link + +

Code sample

+

+// Active button:
+<button type="button" class="btn btn-default active">Button</button>
+
+// Active link:
+<a class="btn btn-default active" href="#" role="button">
+Link
+</a>
+
+ +

Disabled state

+

Use to disable buttons and links (not clickable), and give them a faded appearance.

+

Working example

+ +Link + +

Code sample

+

+// Disabled button:
+<button type="button" class="btn btn-default disabled">Button</button>
+
+// Disabled link:
+<a class="btn btn-default disabled" href="#" role="button">
+Link
+</a>
+
+ +

Button groups (Horizontal)

+

Group a series of buttons together on a single line with the btn-group class.

+

Working Example

+
Default:
+
+ + + +
+ +
Large:
+
+ + + +
+ +
Small:
+
+ + + +
+ +
Extra small:
+
+ + + +
+ +
Justified (links):
+
+ Left + Middle + Right +
+ +
Justified (buttons):
+
+
+ +
+
+ +
+
+ +
+
+ +

Code sample

+
// Default:
+<div class="btn-group">
+	<button type="button" class="btn btn-default">...</button>
+</div>
+
+// Large button group:
+<div class="btn-group btn-group-lg">...
+</div>
+
+// Small button group:
+<div class="btn-group btn-group-sm">...
+</div>
+
+// Extra small button group:
+<div class="btn-group btn-group-xs">...
+</div>
+
+// Justified links:
+<div class="btn-group btn-group-justified">
+<a class="btn btn-default" href="#" role="button">...
+</a>
+</div>
+
+// Justified button group:
+<div class="btn-group btn-group-justified">
+<div class="btn-group">
+	<button type="button" class=" btn btn-default">...
+	</button>
+</div>...
+</div>
+
+ +

Button groups (Vertical)

+

Make a set of buttons appear vertically stacked rather than horizontally with the btn-group-vertical class.

+

Working Example

+
+ + + +
+ +

Code sample

+
// Vertical button group:
+<div class="btn-group-vertical">
+	<button type="button" class="btn btn-default">
+	Top
+	</button>
+	<button type="button" class="btn btn-default">
+	Middle
+	</button>
+	<button type="button" class="btn btn-default">
+	Bottom
+	</button>
+</div>
+ +

Button toolbar

+

Use to display multiple groups of buttons together on a single line with the btn-toolbar class.

+

Working Example

+ + +

Code sample

+
// Button toolbar:
+<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
+	<div class="btn-group" role="group" aria-label="First group">
+		<button type="button" class="btn btn-default">
+		1
+		</button>
+		<button type="button" class="btn btn-default">
+		2
+		</button>
+		<button type="button" class="btn btn-default">
+		3
+		</button>
+		<button type="button" class="btn btn-default">
+		4
+		</button>
+	</div>
+
+	<div class="btn-group" role="group" aria-label="Second group">
+		<button type="button" class="btn btn-default">
+		5
+		</button>
+		<button type="button" class="btn btn-default">
+		6
+		</button>
+		<button type="button" class="btn btn-default">
+		7
+		</button>
+	</div>
+
+	<div class="btn-group" role="group" aria-label="Third group">
+		<button type="button" class="btn btn-default">
+		8
+		</button>
+	</div>
+</div>
+ +

Input Groups

+

Easily extend form controls by adding buttons, or button groups on either side of textual inputs with the input-group and input-group-btn classes.

+

Working Example

+
+
+ +
+ +
+ +
+ +
+ +
+
+ +

Code Sample

+
// Input groups:
+<div class="input-group mb-3">
+	<div class="input-group-btn">
+		<button class="btn btn-default" type="button">Button</button>
+	</div>
+	<input type="text" class="form-control">
+</div>
+
+<div class="input-group mb-3">
+	<input type="text" class="form-control">
+	<div class="input-group-btn">
+		<button class="btn btn-default" type="button">Button</button>
+	</div>
+</div>
+ +

Data-toggle buttons

+

Bootstrap’s .button styles can be applied to other elements, such as labels, to provide checkbox or radio style button toggling. Add data-toggle="buttons" to a .btn-group containing those modified buttons to enable their toggling behavior via JavaScript and add .btn-group-toggle to style the inputs within your buttons.

+ +
+

Currently, this feature is not functional as we do not implement Bootstrap's JavaScript.

+
diff --git a/common/button/button-fr.html b/common/button/button-fr.html new file mode 100644 index 000000000..9f07d6e54 --- /dev/null +++ b/common/button/button-fr.html @@ -0,0 +1,413 @@ +{ + "title": "Boutons", + "language": "fr", + "description": "Page des boutons comprenant des exemples de travail pour tester l'apparence et le fonctionnement de divers styles de boutons.", + "dateModified": "2023-06-09" +} +--- + +

Sur cette page:

+ + + +

Usage

+

Utilisez des boutons pour créer un appel à l'action qui incite l'utilisateur à soumettre du contenu à partir d'un formulaire. De plus, utilisez des boutons pour amener les utilisateurs à une page Web qui présente des renseignements supplémentaires.

+ +

Utilisation de base

+ +

Par défaut

+

Utilisez les catégories de boutons sur des éléments a, button, ou input afin de créer une uniformité visuelle. Le navigateur présente certains éléments comme un bouton. Toutefois, il manque d'uniformité visuelle pour chaque genre de bouton. L'apparence de bouton par défaut peut être différente pour chaque navigateur.

+ +

Exemple de travail

+
Par défaut:
+ + + +Lien + +
Stylisé:
+ + + +Lien + +

Code

+

+	// Bouton par défaut:
+	<button type="submit">
+	Bouton
+	</button>
+	<input type="button" value="Entrer"/>
+	<input type="submit" value="Soumettre"/>
+	<a href="#" role="button">
+	Link
+	</a>
+
+	// Bouton stylisé:
+	<button class="btn btn-default" type="submit">
+	Bouton
+	</button>
+	<input class="btn btn-default" type="button" value="Entrer"/>
+	<input class="btn btn-default" type="submit" value="Soumettre"/>
+	<a class="btn btn-default" href="#" role="button">
+	Lien
+	</a>
+
+ +

Utilisation améliorée

+ +

Couleurs/Styles

+

Utilisez pour ajouter des couleurs aux boutons. Les couleurs signifient notamment un lien vers des renseignements d'avertissement (bouton d'avertissement) à un lien vers le prochain module d'apprentissage (bouton succès).

+

Exemple de travail

+ + + + + + + + +

Code sample

+

+	// Défaut:
+	<button type="button" class="btn btn-default">
+	Défaut
+	</button>
+
+	// Primaire:
+	<button type="button" class="btn btn-primary">
+	Primaire
+	</button>
+
+	// Succès:
+	<button type="button" class="btn btn-success">
+	Succès
+	</button>
+
+	// Info:
+	<button type="button" class="btn btn-info">
+	Info
+	</button>
+
+	// Avertissement:
+	<button type="button" class="btn btn-warning">
+	Avertissement
+	</button>
+
+	// Danger:
+	<button type="button" class="btn btn-danger">
+	Danger
+	</button>
+
+	// Lien:
+	<button type="button" class="btn btn-link">
+	Lien
+	</button>
+
+ +

Appel à l'action

+

Exemple de travail

+ + +

Code

+

+// Bouton appel à l'action:
+<button type="button" class="btn btn-call-to-action">Appel à l'action</button>
+
+ + +

Taille

+

Utilisez pour augmenter ou diminuer la taille d'un bouton.

+

Exemple de travail

+ + + + + +

Code

+

+	// Très petit bouton:
+	<button type="button" class="btn btn-default btn-xs">
+	Très petit bouton 
+	</button>
+
+	// Petit bouton:
+	<button type="button" class="btn btn-default btn-sm">
+	Petit bouton
+	</button>
+
+	// Bouton par défaut:
+	<button type="button" class="btn btn-default">
+	Bouton par défaut
+	</button>
+
+	// Gros bouton:
+	<button type="button" class="btn btn-default btn-lg">
+	Gros bouton
+	</button>
+ +

Largeur maximale

+

Utilisez pour créer des boutons de blocage de niveau (ceux qui s'étend sur toute la largeur d'un contenant apparenté).

+

Exemple de travail

+ + +

Code

+

+// Bouton de blocage de niveau:
+<button type="button" class="btn btn-default btn-block">Button</button>
+
+ +

État d'activation

+

Utilisez .active avec les éléments button et a si vous avez besoin qu'un bouton semble actif en tout temps (habituellement aux fins d'affichage et d'enseignement sur des boutons ou liens factices). Lorsqu'un utilisateur appuie sur un bouton, il semble être actif (avec une ombre interne, ainsi qu'un arrière-plan et une bordure plus foncés). Pour les éléments button et a, ils sont stylisés automatiquement dans CSS au moyen de :active.

+

Exemple de travail

+ +Lien + +

Code

+

+// Bouton actif:
+<button type="button" class="btn btn-default active">Bouton</button>
+
+// Lien actif:
+<a class="btn btn-default active" href="#" role="button">
+Lien
+</a>
+
+ +

État de désactivation

+

Utilisez pour désactiver des boutons et des liens (non cliquable) et donne une apparence décolorée.

+

Exemple de travail

+ +Lien + +

Code

+

+// Bouton désactivé:
+<button type="button" class="btn btn-default disabled">Bouton</button>
+
+// Lien désactivé:
+<a class="btn btn-default disabled" href="#" role="button">
+Lien
+</a>
+
+ +

Groupes de Bouton (Horizontale)

+

Regroupez une série de boutons sur une seule ligne avec la classe btn-group.

+

Exemple de travail

+
Par défaut:
+
+ + + +
+ +
Gros:
+
+ + + +
+ +
Petit:
+
+ + + +
+ +
Très petit:
+
+ + + +
+ +
Justifié (lien):
+
+ Gauche + Centré + Droite +
+ +
Justifié (boutons):
+
+
+ +
+
+ +
+
+ +
+
+ +

Code

+
// Par défaut:
+<div class="btn-group">
+	<button type="button" class="btn btn-default">...</button>
+</div>
+
+// Gros:
+<div class="btn-group btn-group-lg">...
+</div>
+
+// Petit:
+<div class="btn-group btn-group-sm">...
+</div>
+
+// Très petit:
+<div class="btn-group btn-group-xs">...
+</div>
+
+// Justifié (lien):
+<div class="btn-group btn-group-justified">
+<a class="btn btn-default" href="#" role="button">...
+</a>
+</div>
+
+// Justifié (boutons):
+<div class="btn-group btn-group-justified">
+<div class="btn-group">
+	<button type="button" class=" btn btn-default">...
+	</button>
+</div>...
+</div>
+
+ +

Groupes de Bouton (Verticale)

+

Faites apparaître un ensemble de boutons empilés verticalement plutôt qu'horizontalement avec la classe btn-group-vertical.

+

Exemple de travail

+
+ + + +
+ +

Code

+
// Groupes de Bouton (Verticale):
+<div class="btn-group-vertical">
+	<button type="button" class="btn btn-default">
+	Haut
+	</button>
+	<button type="button" class="btn btn-default">
+	Milieu
+	</button>
+	<button type="button" class="btn btn-default">
+	Bas
+	</button>
+</div>
+ +

Barres à outils

+

Utilisez pour afficher plusieurs groupes de boutons ensemble sur une seule ligne.

+

Example de Travail

+ + +

Code sample

+
// Barres à outils:
+<div class="btn-toolbar" role="toolbar" aria-label="Barres à outils avec groupes de boutons">
+	<div class="btn-group" role="group" aria-label="Premier groupe">
+		<button type="button" class="btn btn-default">
+		1
+		</button>
+		<button type="button" class="btn btn-default">
+		2
+		</button>
+		<button type="button" class="btn btn-default">
+		3
+		</button>
+		<button type="button" class="btn btn-default">
+		4
+		</button>
+	</div>
+
+	<div class="btn-group" role="group" aria-label="Deuxieme groupe">
+		<button type="button" class="btn btn-default">
+		5
+		</button>
+		<button type="button" class="btn btn-default">
+		6
+		</button>
+		<button type="button" class="btn btn-default">
+		7
+		</button>
+	</div>
+
+	<div class="btn-group" role="group" aria-label="Deuxieme groupe">
+		<button type="button" class="btn btn-default">
+		8
+		</button>
+	</div>
+</div>
+ +

Groupes d'entrée

+

Étendez facilement les contrôles de formulaire en ajoutant des boutons ou des groupes de boutons de chaque côté des entrées textuelles avec les classes input-group et input-group-btn.

+

Exemple de travail

+
+
+ +
+ +
+ +
+ +
+ +
+
+ +

Code

+
// Groupes d'entrée:
+<div class="input-group mb-3">
+	<div class="input-group-btn">
+		<button class="btn btn-default" type="button">Button</button>
+	</div>
+	<input type="text" class="form-control">
+</div>
+
+<div class="input-group mb-3">
+	<input type="text" class="form-control">
+	<div class="input-group-btn">
+		<button class="btn btn-default" type="button">Bouton</button>
+	</div>
+</div>
+ +

Boutons de basculement de données

+

Les styles .button de Bootstrap peuvent être appliqués à d'autres éléments, tels que les label, pour fournir un basculement de case à cocher ou de bouton radio. Ajoutez data-toggle="buttons" à un .btn-group contenant ces boutons modifiés pour activer leur comportement de basculement via JavaScript et ajoutez .btn-group-toggle pour styliser les input dans vos boutons.

+ +
+

Actuellement, cette fonctionnalité n'est pas fonctionnelle car nous n'implémentons pas le JavaScript de Bootstrap.

+
diff --git a/common/button/index.json-ld b/common/button/index.json-ld new file mode 100644 index 000000000..a2a4efff6 --- /dev/null +++ b/common/button/index.json-ld @@ -0,0 +1,34 @@ +{ + "@context": { + "@version": 2.0, + "dct": "http://purl.org/dc/terms/", + "title": { "@id": "dct:title", "@container": "@language" }, + "description": { "@id": "dct:description", "@container": "@language" }, + "modified": "dct:modified" + }, + "title": { + "en": "Buttons", + "fr": "Boutons" + }, + "description": { + "en": "Buttons page including working examples to test how various button styles appear and function", + "fr": "Page des boutons comprenant des exemples de travail pour tester l'apparence et le fonctionnement de divers styles de boutons." + }, + "modified": "2023-06-09", + "componentName": "button", + "status": "stable", + "pages": { + "docs": [ + { + "title": "Buttons", + "language": "en", + "path": "button-en.html" + }, + { + "title": "Boutons", + "language": "fr", + "path": "button-fr.html" + } + ] + } +} From 4b9454f7e8b6fd8383474996958370ef1fa3f27c Mon Sep 17 00:00:00 2001 From: Brahim Mahadi Wachilli Date: Wed, 14 Jun 2023 13:08:48 -0400 Subject: [PATCH 2/5] Button: Addressed Review Comments --- common/button/button-en.html | 149 +++++++++++++++++++---------------- common/button/button-fr.html | 149 +++++++++++++++++++---------------- 2 files changed, 163 insertions(+), 135 deletions(-) diff --git a/common/button/button-en.html b/common/button/button-en.html index f4b731191..6c31a2051 100644 --- a/common/button/button-en.html +++ b/common/button/button-en.html @@ -1,8 +1,10 @@ +--- { "title": "Buttons", "language": "en", + "altLangPage": "button-fr.html", "description": "Buttons page including working examples to test how various button styles appear and function", - "dateModified": "2023-06-09" + "dateModified": "2023-06-14" } --- @@ -11,8 +13,7 @@

On this page:

-

Purpose

-

Use buttons to create a call to action that entices the user to submit content from a form. Also, use buttons to take users to a webpage that provides additional information.

- - +

Button vs links

+
+
Button
+
A button will perform an action on the current page without moving the focus or without navigating the user away
+
Link
+
A link will send the user at a location, in the same page via an anchor (`#`) link or to an another page without sending any data over.
+
+

Do not use the role button on an anchor, use a button element instead.

Basic use

Default

-

Use the button classes on a, button, or input elements to create visual consistency. The browser shows certain elements as a button. However, there is often a lack of visual consistency for each button type. Each browser can have a different button default appearance.

Working example

-
Default:
+
Scaffolding (Default):
Link -
Styled:
+
With the default style:
@@ -52,7 +55,7 @@
Styled:

Code Sample


-	// Default button:
+	// Default button:
 	<button type="submit">
 	Button
 	</button>
@@ -62,7 +65,7 @@ 
Code Sample

 	Link
 	</a>
 
-	// Styled button:
+	// Styled button:
 	<button class="btn btn-default" type="submit">
 	Button
 	</button>
@@ -76,7 +79,7 @@ 
Code Sample

 
Enhanced use

 
 
Colours/Styles

-
Use to add colours to buttons. Colours signify various things such as a link to warning information (caution button) to a link to the next learning module (success button).

+
Colours signify various things such as a link to warning information (caution styled button). The text of that styled button will also contains word describing the state like "Warning notice".

 
Working example

 
 
@@ -85,53 +88,59 @@ 
Working example

 
 
 
+Link styled as a button
 
 
Code sample

 

-	// Default:
+	// Default:
 	<button type="button" class="btn btn-default">
 	Default
 	</button>
 
-	// Primary:
+	// Primary:
 	<button type="button" class="btn btn-primary">
 	Primary
 	</button>
 
-	// Success:
+	// Success:
 	<button type="button" class="btn btn-success">
 	Success
 	</button>
 
-	// Info:
+	// Info:
 	<button type="button" class="btn btn-info">
 	Info
 	</button>
 
-	// Warning:
+	// Warning:
 	<button type="button" class="btn btn-warning">
 	Warning
 	</button>
 
-	// Danger:
+	// Danger:
 	<button type="button" class="btn btn-danger">
 	Danger
 	</button>
 
-	// Link:
+	// Link:
 	<button type="button" class="btn btn-link">
 	Link
 	</button>
+
+	//Link styled as a button
+	<a class="btn btn-default" href="#">
+	Link styled as a button
+	</a>
 	

 
-
Call to Action

+
Supertask (Call to Action)

 
Working example

-
+
 
 
Code sample

 

-// Call to action button:
-<button type="button" class="btn btn-call-to-action">Call to Action</button>
+// Supertask (Call to Action) button:
+<button type="button" class="btn btn-call-to-action">Supertask (Call to Action)</button>
 

 
 
@@ -145,22 +154,22 @@ 
Working example

 
 
Code sample

 

-	// Extra small button:
+	// Extra small button:
 	<button type="button" class="btn btn-default btn-xs">
 	Extra small button
 	</button>
 
-	// Small button:
+	// Small button:
 	<button type="button" class="btn btn-default btn-sm">
 	Small button
 	</button>
 
-	// Default button:
+	// Default button:
 	<button type="button" class="btn btn-default">
 	Default button
 	</button>
 
-	// Large button:
+	// Large button:
 	<button type="button" class="btn btn-default btn-lg">
 	Large button
 	</button>

@@ -172,7 +181,7 @@ 
Working example

 
 
Code sample

 

-// Block level button:
+// Block level button:
 <button type="button" class="btn btn-default btn-block">Button</button>
 

 
@@ -184,10 +193,10 @@ 
Working example

 
 
Code sample

 

-// Active button:
+// Active button:
 <button type="button" class="btn btn-default active">Button</button>
 
-// Active link:
+// Active link:
 <a class="btn btn-default active" href="#" role="button">
 Link
 </a>
@@ -201,10 +210,10 @@ 
Working example

 
 
Code sample

 

-// Disabled button:
+// Disabled button:
 <button type="button" class="btn btn-default disabled">Button</button>
 
-// Disabled link:
+// Disabled link:
 <a class="btn btn-default disabled" href="#" role="button">
 Link
 </a>
@@ -262,30 +271,30 @@ 
Justified (buttons):

 
 
 
Code sample

-
// Default:
+
// Default:
 <div class="btn-group">
 	<button type="button" class="btn btn-default">...</button>
 </div>
 
-// Large button group:
+// Large button group:
 <div class="btn-group btn-group-lg">...
 </div>
 
-// Small button group:
+// Small button group:
 <div class="btn-group btn-group-sm">...
 </div>
 
-// Extra small button group:
+// Extra small button group:
 <div class="btn-group btn-group-xs">...
 </div>
 
-// Justified links:
+// Justified links:
 <div class="btn-group btn-group-justified">
 <a class="btn btn-default" href="#" role="button">...
 </a>
 </div>
 
-// Justified button group:
+// Justified button group:
 <div class="btn-group btn-group-justified">
 <div class="btn-group">
 	<button type="button" class=" btn btn-default">...
@@ -304,7 +313,7 @@ 
Working Example

 
 
 
Code sample

-
// Vertical button group:
+
// Vertical button group:
 <div class="btn-group-vertical">
 	<button type="button" class="btn btn-default">
 	Top
@@ -318,27 +327,27 @@ 
Code sample

 </div>

 
 
Button toolbar

-
Use to display multiple groups of buttons together on a single line with the btn-toolbar class.

+
Use to display multiple groups of buttons together on a single line with the btn-toolbar class. Note the use of this feature requires some additional requirements in order to comform to WCAG.

 
Working Example

 
 
 
Code sample

-
// Button toolbar:
+
// Button toolbar:
 <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
 	<div class="btn-group" role="group" aria-label="First group">
 		<button type="button" class="btn btn-default">
@@ -378,21 +387,21 @@ 
Input Groups

 
Easily extend form controls by adding buttons, or button groups on either side of textual inputs with the input-group and input-group-btn classes.

 
Working Example

 

-  

-    
-  

-  
+

+
+

+
 

 
 

-  
-   

-    
-  

+
+

+
+

 

 
 
Code Sample

-
// Input groups:
+
// Input groups:
 <div class="input-group mb-3">
 	<div class="input-group-btn">
 		<button class="btn btn-default" type="button">Button</button>
@@ -408,8 +417,12 @@ 
Code Sample

 </div>

 
 
Data-toggle buttons

-
Bootstrap’s .button styles can be applied to other elements, such as labels, to provide checkbox or radio style button toggling. Add data-toggle="buttons" to a .btn-group containing those modified buttons to enable their toggling behavior via JavaScript and add .btn-group-toggle to style the inputs within your buttons.

 
 

-  
Currently, this feature is not functional as we do not implement Bootstrap's JavaScript.

+	
Currently, this feature is not functional as we do not implement Bootstrap's JavaScript.

 

+
+
Bootstrap’s .button styles can be applied to other elements, such as labels, to provide checkbox or radio style button toggling. Add data-toggle="buttons" to a .btn-group containing those modified buttons to enable their toggling behavior via JavaScript and add .btn-group-toggle to style the inputs within your buttons.

+
+
Resource

+
Design system guidance on buttons

diff --git a/common/button/button-fr.html b/common/button/button-fr.html
index 9f07d6e54..bffdbc6fb 100644
--- a/common/button/button-fr.html
+++ b/common/button/button-fr.html
@@ -1,8 +1,10 @@
+---
 {
 	"title": "Boutons",
 	"language": "fr",
+	"altLangPage": "button-en.html",
 	"description": "Page des boutons comprenant des exemples de travail pour tester l'apparence et le fonctionnement de divers styles de boutons.",
-	"dateModified": "2023-06-09"
+	"dateModified": "2023-06-14"
 }
 ---
 
@@ -11,8 +13,7 @@ 
Sur cette page:

 
 
-
Usage

-
Utilisez des boutons pour créer un appel à l'action qui incite l'utilisateur à soumettre du contenu à partir d'un formulaire. De plus, utilisez des boutons pour amener les utilisateurs à une page Web qui présente des renseignements supplémentaires.

+
Bouton contre liens

+

+
Bouton

+
Un bouton effectuera une action sur la page actuelle sans déplacer le focus ou sans éloigner l'utilisateur

+
Lien

+
Un lien enverra l'utilisateur à un emplacement, dans la même page via un lien d'ancrage (`#`) ou vers une autre page sans envoyer de données.

+

+
N'utilisez pas le bouton de rôle sur une ancre, utilisez plutôt un élément de bouton.

 
 
Utilisation de base

 
 
Par défaut

-
Utilisez les catégories de boutons sur des éléments a, button, ou input afin de créer une uniformité visuelle. Le navigateur présente certains éléments comme un bouton. Toutefois, il manque d'uniformité visuelle pour chaque genre de bouton. L'apparence de bouton par défaut peut être différente pour chaque navigateur.

 
 
Exemple de travail

-
Par défaut:

+
Échafaudage (par défaut):

 
 
 
 Lien
 
-
Stylisé:

+
Avec le style par défaut:

 
 
 
@@ -50,7 +55,7 @@ 
Stylisé:

 
 
Code

 

-	// Bouton par défaut:
+	// Bouton par défaut:
 	<button type="submit">
 	Bouton
 	</button>
@@ -60,7 +65,7 @@ 
Code

 	Link
 	</a>
 
-	// Bouton stylisé:
+	// Bouton stylisé:
 	<button class="btn btn-default" type="submit">
 	Bouton
 	</button>
@@ -74,7 +79,7 @@ 
Code

 
Utilisation améliorée

 
 
Couleurs/Styles

-
Utilisez pour ajouter des couleurs aux boutons. Les couleurs signifient notamment un lien vers des renseignements d'avertissement (bouton d'avertissement) à un lien vers le prochain module d'apprentissage (bouton succès).

+
Les couleurs signifient diverses choses telles qu'un lien vers des informations d'avertissement (bouton de style attention). Le texte de ce bouton stylisé contiendra également un mot décrivant l'état comme "Avis d'avertissement".

 
Exemple de travail

 
 
@@ -83,53 +88,59 @@ 
Exemple de travail

 
 
 
+Lien sous forme de bouton
 
 
Code sample

 

-	// Défaut:
+	// Défaut:
 	<button type="button" class="btn btn-default">
 	Défaut
 	</button>
 
-	// Primaire:
+	// Primaire:
 	<button type="button" class="btn btn-primary">
 	Primaire
 	</button>
 
-	// Succès:
+	// Succès:
 	<button type="button" class="btn btn-success">
 	Succès
 	</button>
 
-	// Info:
+	// Info:
 	<button type="button" class="btn btn-info">
 	Info
 	</button>
 
-	// Avertissement:
+	// Avertissement:
 	<button type="button" class="btn btn-warning">
 	Avertissement
 	</button>
 
-	// Danger:
+	// Danger:
 	<button type="button" class="btn btn-danger">
 	Danger
 	</button>
 
-	// Lien:
+	// Lien:
 	<button type="button" class="btn btn-link">
 	Lien
 	</button>
+
+	//Lien sous forme de bouton
+	<a class="btn btn-default" href="#">
+	Lien sous forme de bouton
+	</a>
 	

 
-
Appel à l'action

+
Supertâche (Appel à l'action)

 
Exemple de travail

-
+
 
 
Code

 

-// Bouton appel à l'action:
-<button type="button" class="btn btn-call-to-action">Appel à l'action</button>
+// Bouton Supertâche (Appel à l'action):
+<button type="button" class="btn btn-call-to-action">Supertâche (Appel à l'action)</button>
 

 
 
@@ -143,22 +154,22 @@ 
Exemple de travail

 
 
Code

 

-	// Très petit bouton:
+	// Très petit bouton:
 	<button type="button" class="btn btn-default btn-xs">
-	Très petit bouton 
+	Très petit bouton
 	</button>
 
-	// Petit bouton:
+	// Petit bouton:
 	<button type="button" class="btn btn-default btn-sm">
 	Petit bouton
 	</button>
 
-	// Bouton par défaut:
+	// Bouton par défaut:
 	<button type="button" class="btn btn-default">
 	Bouton par défaut
 	</button>
 
-	// Gros bouton:
+	// Gros bouton:
 	<button type="button" class="btn btn-default btn-lg">
 	Gros bouton
 	</button>

@@ -170,7 +181,7 @@ 
Exemple de travail

 
 
Code

 

-// Bouton de blocage de niveau:
+// Bouton de blocage de niveau:
 <button type="button" class="btn btn-default btn-block">Button</button>
 

 
@@ -182,10 +193,10 @@ 
Exemple de travail

 
 
Code

 

-// Bouton actif:
+// Bouton actif:
 <button type="button" class="btn btn-default active">Bouton</button>
 
-// Lien actif:
+// Lien actif:
 <a class="btn btn-default active" href="#" role="button">
 Lien
 </a>
@@ -199,10 +210,10 @@ 
Exemple de travail

 
 
Code

 

-// Bouton désactivé:
+// Bouton désactivé:
 <button type="button" class="btn btn-default disabled">Bouton</button>
 
-// Lien désactivé:
+// Lien désactivé:
 <a class="btn btn-default disabled" href="#" role="button">
 Lien
 </a>
@@ -260,30 +271,30 @@ 
Justifié (boutons):

 
 
 
Code

-
// Par défaut:
+
// Par défaut:
 <div class="btn-group">
 	<button type="button" class="btn btn-default">...</button>
 </div>
 
-// Gros:
+// Gros:
 <div class="btn-group btn-group-lg">...
 </div>
 
-// Petit:
+// Petit:
 <div class="btn-group btn-group-sm">...
 </div>
 
-// Très petit:
+// Très petit:
 <div class="btn-group btn-group-xs">...
 </div>
 
-// Justifié (lien):
+// Justifié (lien):
 <div class="btn-group btn-group-justified">
 <a class="btn btn-default" href="#" role="button">...
 </a>
 </div>
 
-// Justifié (boutons):
+// Justifié (boutons):
 <div class="btn-group btn-group-justified">
 <div class="btn-group">
 	<button type="button" class=" btn btn-default">...
@@ -302,7 +313,7 @@ 
Exemple de travail

 
 
 
Code

-
// Groupes de Bouton (Verticale):
+
// Groupes de Bouton (Verticale):
 <div class="btn-group-vertical">
 	<button type="button" class="btn btn-default">
 	Haut
@@ -316,27 +327,27 @@ 
Code

 </div>

 
 
Barres à outils

-
Utilisez pour afficher plusieurs groupes de boutons ensemble sur une seule ligne.

+
Utilisez pour afficher plusieurs groupes de boutons ensemble sur une seule ligne. Notez que l'utilisation de cette fonctionnalité nécessite certaines exigences supplémentaires afin de se conformer aux WCAG.

 
Example de Travail

 
 
 
Code sample

-
// Barres à outils:
+
// Barres à outils:
 <div class="btn-toolbar" role="toolbar" aria-label="Barres à outils avec groupes de boutons">
 	<div class="btn-group" role="group" aria-label="Premier groupe">
 		<button type="button" class="btn btn-default">
@@ -376,21 +387,21 @@ 
Groupes d'entrée

 
Étendez facilement les contrôles de formulaire en ajoutant des boutons ou des groupes de boutons de chaque côté des entrées textuelles avec les classes input-group et input-group-btn.

 
Exemple de travail

 

-  

-    
-  

-  
+

+
+

+
 

 
 

-  
-   

-    
-  

+
+

+
+

 

 
 
Code

-
// Groupes d'entrée:
+
// Groupes d'entrée:
 <div class="input-group mb-3">
 	<div class="input-group-btn">
 		<button class="btn btn-default" type="button">Button</button>
@@ -406,8 +417,12 @@ 
Code

 </div>

 
 
Boutons de basculement de données

-
Les styles .button de Bootstrap peuvent être appliqués à d'autres éléments, tels que les label, pour fournir un basculement de case à cocher ou de bouton radio. Ajoutez data-toggle="buttons" à un .btn-group contenant ces boutons modifiés pour activer leur comportement de basculement via JavaScript et ajoutez .btn-group-toggle  pour styliser les input dans vos boutons.

 
 

-  
Actuellement, cette fonctionnalité n'est pas fonctionnelle car nous n'implémentons pas le JavaScript de Bootstrap.

+	
Actuellement, cette fonctionnalité n'est pas fonctionnelle car nous n'implémentons pas le JavaScript de Bootstrap.

 

+
+
Les styles .button de Bootstrap peuvent être appliqués à d'autres éléments, tels que les label, pour fournir un basculement de case à cocher ou de bouton radio. Ajoutez data-toggle="buttons" à un .btn-group contenant ces boutons modifiés pour activer leur comportement de basculement via JavaScript et ajoutez .btn-group-toggle  pour styliser les input dans vos boutons.

+
+
Ressource

+
Guidage du système de conception sur les boutons


From ace7d536d91dfd927b5f06702efe785f05be78d7 Mon Sep 17 00:00:00 2001
From: Brahim Mahadi Wachilli 
Date: Thu, 13 Jul 2023 14:13:27 -0400
Subject: [PATCH 3/5] Updated working examples

---
 common/button/button-en.html | 12 +++++-------
 common/button/button-fr.html | 12 +++++-------
 common/button/index.json-ld  |  2 +-
 3 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/common/button/button-en.html b/common/button/button-en.html
index 6c31a2051..348d32c4a 100644
--- a/common/button/button-en.html
+++ b/common/button/button-en.html
@@ -36,18 +36,16 @@ 
Button vs links

 
 
Do not use the role button on an anchor, use a button element instead.

 
-
Basic use

+
Basic use (Default)

 
-
Default

-
-
Working example

-
Scaffolding (Default):

+
Working example

+
Scaffolding (Default):

 
 
 
 Link
 
-
With the default style:

+
With the default style:

 
 
 
@@ -88,7 +86,7 @@ 
Working example

 
 
 
-Link styled as a button
+Anchor <a> styled as a button
 
 
Code sample

 

diff --git a/common/button/button-fr.html b/common/button/button-fr.html
index bffdbc6fb..d56e0addd 100644
--- a/common/button/button-fr.html
+++ b/common/button/button-fr.html
@@ -36,18 +36,16 @@ 
Bouton contre liens

 
 
N'utilisez pas le bouton de rôle sur une ancre, utilisez plutôt un élément de bouton.

 
-
Utilisation de base

+
Utilisation de base (Par défaut)

 
-
Par défaut

-
-
Exemple de travail

-
Échafaudage (par défaut):

+
Exemple de travail

+
Échafaudage (par défaut):

 
 
 
 Lien
 
-
Avec le style par défaut:

+
Avec le style par défaut:

 
 
 
@@ -88,7 +86,7 @@ 
Exemple de travail

 
 
 
-Lien sous forme de bouton
+Ancre <a> sous forme de bouton
 
 
Code sample

 

diff --git a/common/button/index.json-ld b/common/button/index.json-ld
index a2a4efff6..984d44484 100644
--- a/common/button/index.json-ld
+++ b/common/button/index.json-ld
@@ -18,7 +18,7 @@
 	"componentName": "button",
 	"status": "stable",
 	"pages": {
-		"docs": [
+		"examples": [
 			{
 				"title": "Buttons",
 				"language": "en",

From c13d93685e1ac98c7d33a3e8aa8faf4481aa75bc Mon Sep 17 00:00:00 2001
From: Brahim Mahadi Wachilli 
Date: Tue, 22 Aug 2023 14:26:39 -0400
Subject: [PATCH 4/5] Addressed Requested Changes

---
 common/button/button-en.html | 105 ++++++++++++++++++-----------------
 common/button/button-fr.html |   8 +--
 2 files changed, 58 insertions(+), 55 deletions(-)

diff --git a/common/button/button-en.html b/common/button/button-en.html
index 348d32c4a..9e6c769e7 100644
--- a/common/button/button-en.html
+++ b/common/button/button-en.html
@@ -4,18 +4,18 @@
 	"language": "en",
 	"altLangPage": "button-fr.html",
 	"description": "Buttons page including working examples to test how various button styles appear and function",
-	"dateModified": "2023-06-14"
+	"dateModified": "2023-08-24"
 }
 ---
 
 
On this page:

 
 
 
-
Button vs links

+
 

 
Button

 
A button will perform an action on the current page without moving the focus or without navigating the user away

@@ -49,7 +50,7 @@ 
With the default style:

 
 
 
-Link
+Link
 
 
Code Sample

 

@@ -59,7 +60,7 @@ 
Code Sample

 	</button>
 	<input type="button" value="Input"/>
 	<input type="submit" value="Submit"/>
-	<a href="#" role="button">
+	<a href="#">
 	Link
 	</a>
 
@@ -69,16 +70,16 @@ 
Code Sample

 	</button>
 	<input class="btn btn-default" type="button" value="Input"/>
 	<input class="btn btn-default" type="submit" value="Submit"/>
-	<a class="btn btn-default" href="#" role="button">
+	<a class="btn btn-default" href="#">
 	Link
 	</a>
 

 
-
Enhanced use

+
 
-
Colours/Styles

+
Colours/Styles

 
Colours signify various things such as a link to warning information (caution styled button). The text of that styled button will also contains word describing the state like "Warning notice".

-
Working example

+
Working example

 
 
 
@@ -131,8 +132,8 @@ 
Code sample

 	</a>
 	

 
-
Supertask (Call to Action)

-
Working example

+
Supertask (Call to Action)

+
Working example

 
 
 
Code sample

@@ -142,9 +143,9 @@ 
Code sample

 

 
 
-
Sizing

+
Sizing

 
Use to increase or decrease the size of a button.

-
Working example

+
Working example

 
 
 
@@ -172,9 +173,9 @@ 
Code sample

 	Large button
 	</button>

 
-
Full Width

+
Full Width

 
Use to create block level buttons (those that span the full width of a parent).

-
Working example

+
Working example

 
 
 
Code sample

@@ -183,9 +184,9 @@ 
Code sample

 <button type="button" class="btn btn-default btn-block">Button</button>
 

 
-
Active state

+
Active state

 
Use .active with button and a elements if you need to have a button look active at all times (usually for display or instructional purposes on fake buttons or links). When a user presses a button it appears in the active state (with an inset shadow, and darker background and border). For button and a elements, this is auto-styled in CSS via :active.

-
Working example

+
Working example

 
 Link
 
@@ -200,9 +201,9 @@ 
Code sample

 </a>
 

 
-
Disabled state

+
Disabled state

 
Use to disable buttons and links (not clickable), and give them a faded appearance.

-
Working example

+
Working example

 
 Link
 
@@ -217,45 +218,45 @@ 
Code sample

 </a>
 

 
-
Button groups (Horizontal)

+
Button groups (Horizontal)

 
Group a series of buttons together on a single line with the btn-group class.

-
Working Example

-
Default:

+
Working Example

+
Default:

 

 	
 	
 	
 

 
-
Large:

+
Large:

 

 	
 	
 	
 

 
-
Small:

+
Small:

 

 	
 	
 	
 

 
-
Extra small:

+
Extra small:

 

 	
 	
 	
 

 
-
Justified (links):

+
Justified (links):

 

 	Left
 	Middle
 	Right
 

 
-
Justified (buttons):

+
Justified (buttons):

 

 	

 		
@@ -301,9 +302,9 @@ 
Code sample

 </div>
 

 
-
Button groups (Vertical)

+
Button groups (Vertical)

 
Make a set of buttons appear vertically stacked rather than horizontally with the btn-group-vertical class.

-
Working Example

+
Working Example

 

 	
 	
@@ -324,9 +325,9 @@ 
Code sample

 	</button>
 </div>

 
-
Button toolbar

+
Button toolbar

 
Use to display multiple groups of buttons together on a single line with the btn-toolbar class. Note the use of this feature requires some additional requirements in order to comform to WCAG.

-
Working Example

+
Working Example

 

 
-
Input Groups

+
Input Groups

 
Easily extend form controls by adding buttons, or button groups on either side of textual inputs with the input-group and input-group-btn classes.

-
Working Example

-

-

+
Working Example

+

+
 
-

+
 
 

 
-

+

 
-

+
 
-

+
 

 
 
Code Sample

 
// Input groups:
-<div class="input-group mb-3">
-	<div class="input-group-btn">
+<div class="input-group">
+	<span class="input-group-btn">
 		<button class="btn btn-default" type="button">Button</button>
-	</div>
+	</span>
 	<input type="text" class="form-control">
 </div>
 
-<div class="input-group mb-3">
+<div class="input-group">
 	<input type="text" class="form-control">
-	<div class="input-group-btn">
+	<span class="input-group-btn">
 		<button class="btn btn-default" type="button">Button</button>
-	</div>
+	</span>
 </div>

 
-
Data-toggle buttons

+
Data-toggle buttons

 
 

 	
Currently, this feature is not functional as we do not implement Bootstrap's JavaScript.

 

 
-
Bootstrap’s .button styles can be applied to other elements, such as labels, to provide checkbox or radio style button toggling. Add data-toggle="buttons" to a .btn-group containing those modified buttons to enable their toggling behavior via JavaScript and add .btn-group-toggle to style the inputs within your buttons.

+
Bootstrap’s .button styles can be applied to other elements, such as labels, to provide checkbox or radio style button toggling. Add data-toggle="buttons" to a .btn-group containing those modified buttons to enable their toggling behavior via JavaScript and add .btn-group-toggle to style the inputs within your buttons. More info can be found here: Bootstrap components

+
+
We are currently working on adding similiar functionality in the future. More info can be found in this pull request on GitHub.

 
-
Resource

+
Resource

 
Design system guidance on buttons

diff --git a/common/button/button-fr.html b/common/button/button-fr.html
index d56e0addd..85d95c12e 100644
--- a/common/button/button-fr.html
+++ b/common/button/button-fr.html
@@ -4,7 +4,7 @@
 	"language": "fr",
 	"altLangPage": "button-en.html",
 	"description": "Page des boutons comprenant des exemples de travail pour tester l'apparence et le fonctionnement de divers styles de boutons.",
-	"dateModified": "2023-06-14"
+	"dateModified": "2023-08-24"
 }
 ---
 
@@ -49,7 +49,7 @@ 
Avec le style par défaut:

 
 
 
-Lien
+Lien
 
 
Code

 

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

 	</button>
 	<input type="button" value="Entrer"/>
 	<input type="submit" value="Soumettre"/>
-	<a href="#" role="button">
+	<a href="#">
 	Link
 	</a>
 
@@ -69,7 +69,7 @@ 
Code

 	</button>
 	<input class="btn btn-default" type="button" value="Entrer"/>
 	<input class="btn btn-default" type="submit" value="Soumettre"/>
-	<a class="btn btn-default" href="#" role="button">
+	<a class="btn btn-default" href="#">
 	Lien
 	</a>
 


From 341c0b9d0320e6c8869810531b1a48e3dd8e9446 Mon Sep 17 00:00:00 2001
From: Brahim Mahadi Wachilli 
Date: Fri, 1 Sep 2023 14:23:57 -0400
Subject: [PATCH 5/5] Matched DOM structure between both pages

---
 common/button/button-en.html |  5 +--
 common/button/button-fr.html | 70 ++++++++++++++++++------------------
 2 files changed, 36 insertions(+), 39 deletions(-)

diff --git a/common/button/button-en.html b/common/button/button-en.html
index 9e6c769e7..e1555c460 100644
--- a/common/button/button-en.html
+++ b/common/button/button-en.html
@@ -4,7 +4,7 @@
 	"language": "en",
 	"altLangPage": "button-fr.html",
 	"description": "Buttons page including working examples to test how various button styles appear and function",
-	"dateModified": "2023-08-24"
+	"dateModified": "2023-09-01"
 }
 ---
 
@@ -13,7 +13,6 @@ 
On this page:

 

 
-
-
 
Colours/Styles

 
Colours signify various things such as a link to warning information (caution styled button). The text of that styled button will also contains word describing the state like "Warning notice".

 
Working example

diff --git a/common/button/button-fr.html b/common/button/button-fr.html
index 85d95c12e..ce12cc920 100644
--- a/common/button/button-fr.html
+++ b/common/button/button-fr.html
@@ -4,16 +4,15 @@
 	"language": "fr",
 	"altLangPage": "button-en.html",
 	"description": "Page des boutons comprenant des exemples de travail pour tester l'apparence et le fonctionnement de divers styles de boutons.",
-	"dateModified": "2023-08-24"
+	"dateModified": "2023-09-01"
 }
 ---
 
 
Sur cette page:

 
 
 
-
Bouton contre liens

+
 

 
Bouton

 
Un bouton effectuera une action sur la page actuelle sans déplacer le focus ou sans éloigner l'utilisateur

@@ -74,11 +74,9 @@ 
Code

 	</a>
 

 
-
Utilisation améliorée

-
-
Couleurs/Styles

+
Couleurs/Styles

 
Les couleurs signifient diverses choses telles qu'un lien vers des informations d'avertissement (bouton de style attention). Le texte de ce bouton stylisé contiendra également un mot décrivant l'état comme "Avis d'avertissement".

-
Exemple de travail

+
Exemple de travail

 
 
 
@@ -131,8 +129,8 @@ 
Code sample

 	</a>
 	

 
-
Supertâche (Appel à l'action)

-
Exemple de travail

+
Supertâche (Appel à l'action)

+
Exemple de travail

 
 
 
Code

@@ -142,9 +140,9 @@ 
Code

 

 
 
-
Taille

+
Taille

 
Utilisez pour augmenter ou diminuer la taille d'un bouton.

-
Exemple de travail

+
Exemple de travail

 
 
 
@@ -172,9 +170,9 @@ 
Code

 	Gros bouton
 	</button>

 
-
Largeur maximale

+
Largeur maximale

 
Utilisez pour créer des boutons de blocage de niveau (ceux qui s'étend sur toute la largeur d'un contenant apparenté).

-
Exemple de travail

+
Exemple de travail

 
 
 
Code

@@ -183,9 +181,9 @@ 
Code

 <button type="button" class="btn btn-default btn-block">Button</button>
 

 
-
État d'activation

+
État d'activation

 
Utilisez .active avec les éléments button et a si vous avez besoin qu'un bouton semble actif en tout temps (habituellement aux fins d'affichage et d'enseignement sur des boutons ou liens factices). Lorsqu'un utilisateur appuie sur un bouton, il semble être actif (avec une ombre interne, ainsi qu'un arrière-plan et une bordure plus foncés). Pour les éléments button et a, ils sont stylisés automatiquement dans CSS au moyen de  :active.

-
Exemple de travail

+
Exemple de travail

 
 Lien
 
@@ -200,9 +198,9 @@ 
Code

 </a>
 

 
-
État de désactivation

+
État de désactivation

 
Utilisez pour désactiver des boutons et des liens (non cliquable) et donne une apparence décolorée.

-
Exemple de travail

+
Exemple de travail

 
 Lien
 
@@ -217,45 +215,45 @@ 
Code

 </a>
 

 
-
Groupes de Bouton (Horizontale)

+
Groupes de Bouton (Horizontale)

 
Regroupez une série de boutons sur une seule ligne avec la classe btn-group.

-
Exemple de travail

-
Par défaut:

+
Exemple de travail

+
Par défaut:

 

 	
 	
 	
 

 
-
Gros:

+
Gros:

 

 	
 	
 	
 

 
-
Petit:

+
Petit:

 

 	
 	
 	
 

 
-
Très petit:

+
Très petit:

 

 	
 	
 	
 

 
-
Justifié (lien):

+
Justifié (lien):

 

 	Gauche
 	Centré
 	Droite
 

 
-
Justifié (boutons):

+
Justifié (boutons):

 

 	

 		
@@ -301,9 +299,9 @@ 
Code

 </div>
 

 
-
Groupes de Bouton (Verticale)

+
Groupes de Bouton (Verticale)

 
Faites apparaître un ensemble de boutons empilés verticalement plutôt qu'horizontalement avec la classe btn-group-vertical.

-
Exemple de travail

+
Exemple de travail

 

 	
 	
@@ -324,9 +322,9 @@ 
Code

 	</button>
 </div>

 
-
Barres à outils

+
Barres à outils

 
Utilisez pour afficher plusieurs groupes de boutons ensemble sur une seule ligne. Notez que l'utilisation de cette fonctionnalité nécessite certaines exigences supplémentaires afin de se conformer aux WCAG.

-
Example de Travail

+
Example de Travail
-

Groupes d'entrée

+

Groupes d'entrée

Étendez facilement les contrôles de formulaire en ajoutant des boutons ou des groupes de boutons de chaque côté des entrées textuelles avec les classes input-group et input-group-btn.

-

Exemple de travail

+

Exemple de travail

@@ -414,13 +412,15 @@

Code

</div> </div> -

Boutons de basculement de données

+

Boutons de basculement de données

Actuellement, cette fonctionnalité n'est pas fonctionnelle car nous n'implémentons pas le JavaScript de Bootstrap.

-

Les styles .button de Bootstrap peuvent être appliqués à d'autres éléments, tels que les label, pour fournir un basculement de case à cocher ou de bouton radio. Ajoutez data-toggle="buttons" à un .btn-group contenant ces boutons modifiés pour activer leur comportement de basculement via JavaScript et ajoutez .btn-group-toggle pour styliser les input dans vos boutons.

+

Les styles .button de Bootstrap peuvent être appliqués à d'autres éléments, tels que les label, pour fournir un basculement de case à cocher ou de bouton radio. Ajoutez data-toggle="buttons" à un .btn-group contenant ces boutons modifiés pour activer leur comportement de basculement via JavaScript et ajoutez .btn-group-toggle pour styliser les input dans vos boutons. Plus d’informations peuvent être trouvées ici : Composants d'amorçage

+ +

Nous travaillons actuellement à l'ajout de fonctionnalités similaires à l'avenir. Plus d'informations peuvent être trouvées dans cette pull request sur GitHub.

-

Ressource

+

Ressource

Guidage du système de conception sur les boutons