Issue #3380233 by pdureau: Always use default() filter with random function()

templates/patterns/accordion/accordion.ui_patterns.yml

@@ -3,6 +3,10 @@ accordion:
   description: Used to condense space by hiding content and revealing it as needed. https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/accordeon
   category: Accordion
   settings:
+    accordion_id:
+      type: token
+      label: ID
+      description: "Must start with a letter. Randomly generated if empty."
     title_tag:
       type: select
       label: HTML tag for title

templates/patterns/accordion/pattern-accordion.html.twig

@@ -2,17 +2,17 @@
 
 {% if title %}
   <section{{ attributes.addClass('fr-accordion') }}>
-    {% set id = 'accordion-' ~ random() %}
+    {% set accordion_id = accordion_id|default('accordion-' ~ random()) %}
     {% set title_tag = title_tag|default('h3') %}
     <{{ title_tag }} class="fr-accordion__title">
       <button class="fr-accordion__btn"
               aria-expanded="{{ aria_expanded }}"
-              aria-controls="{{ id }}"
+              aria-controls="{{ accordion_id }}"
               type="button">
         {{ title }}
       </button>
     </{{ title_tag }}>
-    <div class="fr-collapse" id="{{ id }}">
+    <div class="fr-collapse" id="{{ accordion_id }}">
       {{ content }}
     </div>
   </section>

templates/patterns/breadcrumb/breadcrumb.ui_patterns.yml

@@ -14,3 +14,8 @@ breadcrumb:
         - text: Data
           attributes:
             data-name: "Test"
+  settings:
+    breadcrumb_id:
+      type: token
+      label: ID
+      description: "Must start with a letter. Randomly generated if empty."

templates/patterns/breadcrumb/pattern-breadcrumb.html.twig

 {% if items %}
-  {% set id = 'breadcrumb-'~random() %}
+  {% set breadcrumb_id = breadcrumb_id|default('breadcrumb-' ~ random()) %}
   <nav{{ attributes.addClass('fr-breadcrumb').setAttribute('role', 'navigation').setAttribute('aria-label', 'you are here:'|t) }}>
-    <button class="fr-breadcrumb__button" aria-expanded="false" aria-controls="{{ id }}">{{ 'See breadcrumbs'|t }}</button>
-    <div class="fr-collapse" id="{{ id }}">
+    <button class="fr-breadcrumb__button" aria-expanded="false" aria-controls="{{ breadcrumb_id }}">{{ 'See breadcrumbs'|t }}</button>
+    <div class="fr-collapse" id="{{ breadcrumb_id }}">
       <ol class="fr-breadcrumb__list">
         {% for item in items %}
           <li>

templates/patterns/header/header.ui_patterns.yml

@@ -2,6 +2,14 @@ header:
   label: Header
   description: The header allows users to identify what site they are on. It can provide access to search and certain key pages or features. https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/en-tete
   settings:
+    search_id:
+      type: token
+      label: Search ID
+      description: "For search modal. Must start with a letter. Randomly generated if empty."
+    mobile_menu_id:
+      type: token
+      label: Mobile menu ID
+      description: "For menu popup. Must start with a letter. Randomly generated if empty."
     logo_text:
       type: token
       label: Logo text

templates/patterns/header/pattern-header.html.twig

+{% set mobile_menu_id = mobile_menu_id|default('modal-' ~ random()) %}
+{% set search_id = search_id|default('modal-' ~ random()) %}
+
 <header{{ attributes.addClass('fr-header').setAttribute('role', 'banner') }}>
   <div class="fr-header__body">
     <div class="fr-container">
@@ -38,14 +41,12 @@
             {% if tools_search or navbar %}
               <div class="fr-header__navbar">
                 {% if tools_search %}
-                  {% set search_mid = 'modal-' ~ random() %}
-                  <button class="fr-btn--search fr-btn" data-fr-opened="false" aria-controls="{{ search_mid }}" title="{{ 'Search'|t }}">
+                  <button class="fr-btn--search fr-btn" data-fr-opened="false" aria-controls="{{ search_id }}" title="{{ 'Search'|t }}">
                     {{ 'Search'|t }}
                   </button>
                 {% endif %}
                 {% if navbar %}
-                  {% set mobile_menu_mid = 'modal-' ~ random() %}
-                  <button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="{{ mobile_menu_mid }}" aria-haspopup="menu" title="{{ 'Menu'|t }}" id="fr-btn-menu-mobile">
+                  <button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="{{ mobile_menu_id }}" aria-haspopup="menu" title="{{ 'Menu'|t }}" id="fr-btn-menu-mobile">
                     {{ 'Menu'|t }}
                   </button>
                 {% endif %}
@@ -79,9 +80,9 @@
             {% endif %}
             {# Header tools bottom (can be used for search bar) #}
             {% if tools_search %}
-              <div class="fr-header__search fr-modal" id="{{ search_mid }}">
+              <div class="fr-header__search fr-modal" id="{{ search_id }}">
                 <div class="fr-container fr-container-lg--fluid">
-                  <button class="fr-btn fr-btn--close" aria-controls="{{ search_mid }}" title="{{ 'Close'|t }}">{{ 'Close'|t }}</button>
+                  <button class="fr-btn fr-btn--close" aria-controls="{{ search_id }}" title="{{ 'Close'|t }}">{{ 'Close'|t }}</button>
                   {{ tools_search }}
                 </div>
               </div>
@@ -93,9 +94,9 @@
   </div>
   {% if navbar %}
     <div id="header-navigation">
-      <div class="fr-header__menu fr-modal" id="{{ mobile_menu_mid }}" aria-labelledby="fr-btn-menu-mobile">
+      <div class="fr-header__menu fr-modal" id="{{ mobile_menu_id }}" aria-labelledby="fr-btn-menu-mobile">
         <div class="fr-container">
-          <button class="fr-btn fr-btn--close" aria-controls="{{ mobile_menu_mid }}" title="{{ 'Close'|t }}">{{ 'Close'|t }}</button>
+          <button class="fr-btn fr-btn--close" aria-controls="{{ mobile_menu_id }}" title="{{ 'Close'|t }}">{{ 'Close'|t }}</button>
           <div class="fr-header__menu-links"></div>
           {{ navbar }}
         </div>

templates/patterns/nav_menu/nav_menu.ui_patterns.yml

@@ -14,7 +14,8 @@ nav_menu:
       preview: Main menu
     html_id:
       type: token
-      label: HTML id attribute
+      label: ID
+      description: "Must start with a letter. Randomly generated if empty."
   fields:
     items:
       type: menu

templates/patterns/nav_menu/pattern-nav-menu.html.twig

 {% if items %}
-  {% if not html_id %}
-    {% set html_id = 'main-menu-'~random() %}
-  {% endif %}
+  {% set html_id = html_id|default('main-menu-' ~ random()) %}
   <nav{{ attributes.addClass('fr-nav') }} role="navigation" aria-label="{{ menu_name }}" id="{{ html_id|clean_id }}">
     <ul class="fr-nav__list">
       {% if is_mega_menu %}

templates/patterns/side_menu/pattern-side-menu.html.twig

@@ -6,9 +6,7 @@
   {% set attributes = attributes.addClass('fr-sidemenu--' ~ position) %}
 {% endif %}
 
-{% if not html_id %}
-  {% set html_id = 'sidemenu-' ~ random() %}
-{% endif %}
+{% set html_id = html_id|default('sidemenu-' ~ random()) %}
 <nav{{ attributes.addClass('fr-sidemenu') }} role="navigation" aria-label="{{ menu_name }}" id="{{ html_id|clean_id }}">
   <div class="fr-sidemenu__inner">
     <button class="fr-sidemenu__btn" aria-controls="fr-sidemenu-wrapper-{{ html_id|clean_id }}" aria-expanded="false">{{ 'In this section'|t }}</button>

templates/patterns/side_menu/side_menu.ui_patterns.yml

@@ -18,7 +18,8 @@ side_menu:
       preview: right
     html_id:
       type: token
-      label: HTML id attribute
+      label: ID
+      description: "Used for collapse mechanism. Must start with a letter. Randomly generated if empty."
     menu_name:
       type: token
       label: Menu name

templates/patterns/summary/pattern-summary.html.twig

-{% set title_id = 'fr-summary-title--' ~ random() %}
+{% set title_id = title_id|default('fr-summary-title--' ~ random()) %}
 {% set title_tag = title_tag|default('p') %}
 <nav{{ attributes.addClass('fr-summary').setAttribute('role', 'navigation').setAttribute('aria-labelledby', title_id) }}>
   <{{ title_tag }} class="fr-summary__title" id="{{ title_id }}">{{ title }}</{{ title_tag }}>

templates/patterns/summary/summary.ui_patterns.yml

@@ -37,3 +37,7 @@ summary:
         h5: h5
         h6: h6
       preview: p
+    title_id:
+      type: token
+      label: Title ID
+      description: "Must start with a letter. Randomly generated if empty."