Ajustement des styles de focus de tous les éléments focusables (#123)

Signed-off-by: Alexis Boulerice <[email protected]>
VilledeMontreal · Jun 12, 2024 · 7aa83f9 · 7aa83f9
1 parent 7afe7ee
commit 7aa83f9
Show file tree

Hide file tree

Showing 43 changed files with 361 additions and 222 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -12,8 +12,16 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 ### Changed
 - Styles - Typographie: Remplacement de Open Sans par la nouvelle police Montreal.
 - Components - Onglet: Modifications état onglet. Ajout variante onglets verticaux.
+- Global: Modification des états focus de la plupart des éléments pouvant recevoir le focus: boutons, liens, input.
+  Il y a 3 grandes familles de focus: normal, inversé et intérieur.
+  Normal pour les composant de base.
+  Inversé pour les composant sur fond foncé.
+  Intérieur pour les éléments pleine largeur.
 
-## Fixed
+### PatternLab
+- PL: Mise à jour des gabarits
+
+### Fixed
 - Components - Toasts: Ajustement fonction fermeture et styles boutons.
 
 

diff --git a/source/_patterns/02-components/barre-de-navigation/20-navbar-interne.mustache b/source/_patterns/02-components/barre-de-navigation/20-navbar-interne.mustache
@@ -1,14 +1,19 @@
 <nav class="main-navbar navbar navbar-dark navbar-expand w-100" role="navigation">
   {{# navbarInterneHasMenu}}
-  <button type="button" id="menu-interne-toggler" class="btn navbar-btn navbar-btn-icon btn-hide-label-sm ml-0" aria-expanded="false" aria-controls="slide-menu-left">
+  <button type="button" id="menu-interne-toggler" class="btn navbar-btn navbar-btn-icon btn-hide-label-sm ml-0{{# isHomeLink}} mr-2{{/ isHomeLink}}" aria-expanded="false" aria-controls="slide-menu-left">
     <span class="icon icon-menu" aria-hidden="true"></span>
     <span class="sr-only btn-label">Menu</span>
   </button>
   {{> components-main-menu-interne }}
   {{/ navbarInterneHasMenu}}
+  {{^ isHomeLink}}
   <div class="navbar-sitename">
     <span class="sitename">{{ applicationName }}</span>
   </div>
+  {{/ isHomeLink}}
+  {{# isHomeLink}}
+  <a class="navbar-brand" href="/">{{ applicationName }}</a>
+  {{/ isHomeLink}}
   <div class="navbar-div ml-auto">
     <div class="d-flex align-items-center">
       {{# navbarInterneHasSearch}}

diff --git a/source/_patterns/02-components/collapse/05-accordeons.json b/source/_patterns/02-components/collapse/05-accordeons.json
@@ -1,6 +1,5 @@
 {
   "accordion": {
-    "collapsibleClasses": "accordeon-listed",
     "collapsibleItem": [
       {
         "title": "Titre",

diff --git a/source/_patterns/02-components/collapse/_accordeon.json b/source/_patterns/02-components/collapse/_accordeon.json
@@ -1,5 +1,4 @@
 {
-  "collapsibleClasses": false,
   "collapsibleItem": [
     {
       "title": "Collapsible item #1",

diff --git a/source/_patterns/02-components/collapse/_accordeon.mustache b/source/_patterns/02-components/collapse/_accordeon.mustache
@@ -1,4 +1,4 @@
-<div id="accordion" class="{{ collapsibleClasses }}">
+<div id="accordion" class="accordeon-listed {{ collapsibleClasses }}">
   {{^ hideButton}}
   <button type="button" class="btn btn-accordion-collapse d-flex ml-auto" data-bs-toggle="collapse" aria-expanded="false">Tout ouvrir</button>
   {{/ hideButton}}

diff --git a/source/_patterns/02-components/entree-de-donnees/05-selects.json b/source/_patterns/02-components/entree-de-donnees/05-selects.json
@@ -50,5 +50,27 @@
         "formAriaInputError": true
       }
     }
+  ],
+  "selectDisabled": [
+    {
+      "formGroupClass": false,
+      "formGroupSelectID": "custom-select-disabled",
+      "formGroupSelectLabel": "Libellé",
+      "formGroupSelectClass": false,
+      "formGroupSelect": {
+        "defaultOption": "Option par défaut",
+        "options": [
+          {
+            "option-text" : "Option 1",
+            "option-value" : "option-1"
+          },
+          {
+            "option-text" : "Option 2",
+            "option-value" : "option-2"
+          }
+        ]
+      },
+      "formGroupSelectState": "disabled"
+    }
   ]
 }
diff --git a/source/_patterns/02-components/entree-de-donnees/05-selects.mustache b/source/_patterns/02-components/entree-de-donnees/05-selects.mustache
@@ -1,5 +1,5 @@
 <h4 class="pl-pattern-subtitle">Taille</h4>
-<div class="row list-unstyled">
+<div class="row">
   {{# selectSize }}
   <div class="col-xs-6 col-md-4">
     {{> components-select-item }}
@@ -8,10 +8,19 @@
 </div>
 
 <h4 class="pl-pattern-subtitle">Validation</h4>
-<div class="row list-unstyled">
+<div class="row">
   {{# selectValidation }}
   <div class="col-xs-6 col-md-4">
     {{> components-select-item }}
   </div>
   {{/ selectValidation}}
 </div>
+
+<h4 class="pl-pattern-subtitle">Désactivé</h4>
+<div class="row">
+  {{# selectDisabled }}
+  <div class="col-xs-6 col-md-4">
+    {{> components-select-item }}
+  </div>
+  {{/ selectDisabled}}
+</div>
diff --git a/source/_patterns/02-components/entree-de-donnees/_input-file-item-v2.mustache b/source/_patterns/02-components/entree-de-donnees/_input-file-item-v2.mustache
@@ -38,7 +38,7 @@
           <div class="font-size-xs-interface">{{ fileSize}}</div>
         </div>
         <div class="ml-2 dropdown">
-          <button class="btn btn-primary btn-reversed btn-icon" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="Button aria label">
+          <button class="btn btn-tertiary btn-squared btn-icon" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="Button aria label">
             <span class="icon icon-more-vertical" aria-hidden="true"></span>
           </button>
           {{> components-dropdown}}

diff --git a/source/_patterns/02-components/entree-de-donnees/_select-item.mustache b/source/_patterns/02-components/entree-de-donnees/_select-item.mustache
@@ -5,7 +5,7 @@
   {{# formGroupInputHelpText}}
   <span id="{{id}}" class="form-text">{{ text }}</span>
   {{/ formGroupInputHelpText}}
-  <select class="custom-select {{formGroupSelectClass}}" name="{{ formGroupSelectID }}" id="{{formGroupSelectID}}"{{^formGroupInputError}}{{# formGroupInputHelpText}} aria-describedby="{{id}}"{{/ formGroupInputHelpText}}{{/formGroupInputError}}{{#formGroupInputError}} aria-describedby="{{id}}" {{#formAriaInputError}} aria-invalid="true"{{/formAriaInputError}}{{/formGroupInputError}}{{# formGroupSelectRequired}} required{{/ formGroupSelectRequired}}>
+  <select class="custom-select {{formGroupSelectClass}}" name="{{ formGroupSelectID }}" id="{{formGroupSelectID}}"{{^formGroupInputError}}{{# formGroupInputHelpText}} aria-describedby="{{id}}"{{/ formGroupInputHelpText}}{{/ formGroupInputError}}{{# formGroupInputError}} aria-describedby="{{id}}" {{# formAriaInputError}} aria-invalid="true"{{/ formAriaInputError}}{{/ formGroupInputError}}{{# formGroupSelectState}} {{ formGroupSelectState}}{{/ formGroupSelectState}}{{# formGroupSelectRequired}} required{{/ formGroupSelectRequired}}>
     <option value="">{{ formGroupSelect.defaultOption}}</option>
     {{# formGroupSelect.options }}
       {{> components-option }}

diff --git a/source/_patterns/02-components/modale/00-modal-content.json b/source/_patterns/02-components/modale/00-modal-content.json
@@ -8,16 +8,16 @@
   "modalHasIcon": false,
   "modalFooter": {
     "buttons": [
-      {
-        "buttonType": "submit",
-        "buttonClass": "btn-primary",
-        "buttonText": "Action"
-      },
       {
         "buttonType": "button",
         "buttonClass": "btn-link",
         "buttonText": "Annuler",
         "buttonState": "data-dismiss=modal"
+      },
+      {
+        "buttonType": "submit",
+        "buttonClass": "btn-primary",
+        "buttonText": "Action"
       }
     ]
   }

diff --git a/source/_patterns/02-components/modale/01-modal-content~centred-icon.json b/source/_patterns/02-components/modale/01-modal-content~centred-icon.json
@@ -10,16 +10,16 @@
   },
   "modalFooter": {
     "buttons": [
+      {
+        "buttonType": "button",
+        "buttonClass": "btn-link",
+        "buttonText": "Annuler",
+        "buttonState": "data-dismiss=modal"
+      },
       {
         "buttonType": "submit",
         "buttonClass": "btn-primary",
         "buttonText": "Action"
-      },
-      {
-        "buttonType": "button",
-        "buttonClass": "btn-secondary",
-        "buttonText": "Action secondaire",
-        "buttonState": false
       }
     ]
   }

diff --git a/source/_patterns/02-components/modale/10-modal-sizes.json b/source/_patterns/02-components/modale/10-modal-sizes.json
@@ -9,16 +9,16 @@
       "modalBody": " <p>Et duo takimata elitr sit clita et accusam voluptua. Diam dolor duo et consetetur lorem gubergren, no gubergren diam tempor et sadipscing et et. Voluptua rebum et dolor sanctus gubergren.</p>",
       "modalFooter": {
         "buttons": [
-          {
-            "buttonType": "submit",
-            "buttonClass": "btn-primary",
-            "buttonText": "Action"
-          },
           {
             "buttonType": "button",
             "buttonClass": "btn-link",
             "buttonText": "Annuler",
             "buttonState": "data-dismiss=modal"
+          },
+          {
+            "buttonType": "submit",
+            "buttonClass": "btn-primary",
+            "buttonText": "Action"
           }
         ]
       }
@@ -32,16 +32,16 @@
       "modalBody": " <p>Et duo takimata elitr sit clita et accusam voluptua. Diam dolor duo et consetetur lorem gubergren, no gubergren diam tempor et sadipscing et et. Voluptua rebum et dolor sanctus gubergren.</p>",
       "modalFooter": {
         "buttons": [
-          {
-            "buttonType": "submit",
-            "buttonClass": "btn-primary",
-            "buttonText": "Action"
-          },
           {
             "buttonType": "button",
             "buttonClass": "btn-link",
             "buttonText": "Annuler",
             "buttonState": "data-dismiss=modal"
+          },
+          {
+            "buttonType": "submit",
+            "buttonClass": "btn-primary",
+            "buttonText": "Action"
           }
         ]
       }
@@ -55,16 +55,16 @@
       "modalBody": " <p>Et duo takimata elitr sit clita et accusam voluptua. Diam dolor duo et consetetur lorem gubergren, no gubergren diam tempor et sadipscing et et. Voluptua rebum et dolor sanctus gubergren.</p>",
       "modalFooter": {
         "buttons": [
-          {
-            "buttonType": "submit",
-            "buttonClass": "btn-primary",
-            "buttonText": "Action"
-          },
           {
             "buttonType": "button",
             "buttonClass": "btn-link",
             "buttonText": "Annuler",
             "buttonState": "data-dismiss=modal"
+          },
+          {
+            "buttonType": "submit",
+            "buttonClass": "btn-primary",
+            "buttonText": "Action"
           }
         ]
       }