Components fixes

id-sk · Jun 8, 2023 · c42ad74 · c42ad74
1 parent a6dd1d5
commit c42ad74
Show file tree

Hide file tree

Showing 11 changed files with 31 additions and 18 deletions.
diff --git a/app/views/komponenty/examples/exampleIntroBlock.njk b/app/views/komponenty/examples/exampleIntroBlock.njk
@@ -40,5 +40,6 @@
       item:"Dokumenty",
       href:"#"
     }],
-    searchEnabled: true
+    searchEnabled: true,
+    searchId: 'idsk-intro-block-search'
 })}}
diff --git a/app/views/komponenty/examples/exampleIntroBlock1.njk b/app/views/komponenty/examples/exampleIntroBlock1.njk
@@ -41,5 +41,6 @@
       href:"#"
     }],
     classBackground: "app-pane-transparent",
-    searchEnabled: true
+    searchEnabled: true,
+    searchId: 'idsk-intro-block-search-1'
 })}}
diff --git a/app/views/komponenty/examples/exampleIntroBlock3.njk b/app/views/komponenty/examples/exampleIntroBlock3.njk
@@ -20,5 +20,6 @@
       item:"Dokumenty",
       href:"#"
     }],
-  searchEnabled: true
+  searchEnabled: true,
+  searchId: 'idsk-intro-block-search-2'
 })}}
diff --git a/app/views/komponenty/examples/exampleTable-3.njk b/app/views/komponenty/examples/exampleTable-3.njk
@@ -56,6 +56,7 @@
   }),
   caption: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.",
   maxRowsView: 20,
+  radioOptionsLegend: "Vyberte krajinu",
   radioOptions: [
     {
       title: "Slovensko",

diff --git a/app/views/komponenty/registracia-na-podujatie.njk b/app/views/komponenty/registracia-na-podujatie.njk
@@ -67,7 +67,7 @@
                 tag: "input",
                 name: "name",
                 type: "text",
-                autocomplete: true,
+                autocomplete: "given-name",
                 required: true
               },
               {
@@ -76,7 +76,7 @@
                 tag: "input",
                 name: "surname",
                 type: "text",
-                autocomplete: true,
+                autocomplete: "family-name",
                 required: true
               },
               {
@@ -86,15 +86,15 @@
                 tag: "input",
                 name: "email",
                 type: "email",
-                autocomplete: true,
+                autocomplete: "email",
                 required: true
               },
               {
                 label: "Organizácia",
                 tag: "input",
                 name: "organization",
                 type: "text",
-                autocomplete: true
+                autocomplete: "organization"
               },
               {
                 label: "Miesto konania podujatia",

diff --git a/src/idsk/components/intro-block/intro-block.yaml b/src/idsk/components/intro-block/intro-block.yaml
@@ -45,6 +45,10 @@ params:
     type: string
     required: false
     description: Determines whether search should be part of intro block.
+  - name: searchId
+    tyoe: string
+    required: false
+    description: Custom ID for search in intro block.
   - name: headline
     type: string
     required: false

diff --git a/src/idsk/components/intro-block/template.njk b/src/idsk/components/intro-block/template.njk
@@ -14,7 +14,7 @@
                 {% if params.searchEnabled %}
                     {% from "../../components/search-component/macro.njk" import idskSearchComponent %}
                     {{ idskSearchComponent({
-                        id : 'intro-block-search'
+                        id : params.searchId
                     }) }}
                     {% if params.bottomMenu %}
                       <div>

diff --git a/src/idsk/components/registration-for-event/registration-for-event.yaml b/src/idsk/components/registration-for-event/registration-for-event.yaml
@@ -65,28 +65,28 @@ examples:
           tag: input
           name: name
           type: text
-          autocomplete: true
+          autocomplete: given-name
           required: true
         - label: Priezvisko
           error: Zadajte priezvisko.
           tag: input
           name: surname
           type: text
-          autocomplete: true
+          autocomplete: family-name
           required: true
         - label: Emailová adresa
           hint: Sem zadajte emailovú adresu v tvare [email protected]
           error: Zadajte správnu emailovú adresu.
           tag: input
           name: email
           type: email
-          autocomplete: true
+          autocomplete: email
           required: true
         - label: Organizácia
           tag: input
           name: organization
           type: text
-          autocomplete: true
+          autocomplete: organization
         - label: Miesto konania podujatia
           tag: select
           name: city

diff --git a/src/idsk/components/table/_table.scss b/src/idsk/components/table/_table.scss
@@ -37,7 +37,7 @@
 
         .govuk-radios__item {
           display: flex;
-          float: none;
+          float: left;
           margin-right: 0;
           padding: 0;
           margin-left: govuk-spacing(4);

diff --git a/src/idsk/components/table/table.yaml b/src/idsk/components/table/table.yaml
@@ -19,6 +19,10 @@ params:
     type: object
     required: false
     description: Filter component inside table.
+  - name: radioOptionsLegend
+    type: string
+    required: false
+    description: Legend for radio options. Accessible with screen readers.
   - name: radioOptions
     type: array
     required: false

diff --git a/src/idsk/components/table/template.njk b/src/idsk/components/table/template.njk
@@ -18,13 +18,14 @@
           <div class="govuk-form-group">
             <div class="govuk-radios govuk-radios--inline">
               <fieldset class="govuk-fieldset">
+                <legend class="govuk-visually-hidden">{{ params.radioOptionsLegend }}</legend>
                 {% for radio in params.radioOptions.slice(0, 2) %}
-                    <div class="govuk-radios__item">
-                        <input class="govuk-radios__input" type="radio" name="radio-{{ params.uniqueId }}" id="radio-{{ params.uniqueId + '-' + loop.index }}" value="{{ radio.value }}" {% if loop.index == 1 %}checked=""{% endif %}>
-                        <label class="govuk-label govuk-radios__label" for="radio-{{ params.uniqueId }}">{{ radio.title }}</label>
-                    </div>
-                  </fieldset>
+                  <div class="govuk-radios__item">
+                    <input title="{{ radio.title }}" class="govuk-radios__input" type="radio" name="radio-{{ params.uniqueId }}" id="radio-{{ params.uniqueId + '-' + loop.index }}" value="{{ radio.value }}" {% if loop.index == 1 %}checked=""{% endif %}>
+                    <label class="govuk-label govuk-radios__label" for="radio-{{ params.uniqueId }}">{{ radio.title }}</label>
+                  </div>
                 {% endfor %}
+              </fieldset>
             </div>
           </div>
         </div>