govuk_publishing_components 35.15.5 → 35.16.1

data/app/views/govuk_publishing_components/components/docs/option_select.yml

@@ -0,0 +1,343 @@
+name: Option select
+description: A scrollable list of checkboxes to be displayed on a form where one might
+  otherwise use a multi-select
+body:
+accessibility_criteria: |
+  The option select must:
+
+  - indicate that the option select is expandable/collapsible
+  - indicate the initial state of expandable content
+  - indicate where the state of expandable content has changed
+
+  The option select inputs must:
+
+  - have a margin to the right when the box is scrollable so that users can interact with a scrollbar without accidentally clicking an option
+  - only include an `aria-controls` attribute if an element with the ID specified exists on the page
+  - be [grouped with a label](https://www.w3.org/WAI/GL/wiki/Using_grouping_roles_to_identify_related_form_controls)
+
+  The option select filter must:
+
+  - be focusable with a keyboard
+  - indicate when it has keyboard focus
+  - inform the user that is it an editable field
+  - inform the user when there are matches, or if there are no matches
+  - inform the user as the number of matches changes
+examples:
+  default:
+    data:
+      key: market_sector
+      title: Market sector
+      options_container_id: list_of_sectors
+      options:
+      - value: aerospace
+        label: Aerospace
+        id: aerospace
+      - value: agriculture-environment-and-natural-resources
+        label: Agriculture, environment and natural resources
+        id: agriculture-environment-and-natural-resources
+      - value: building-and-construction
+        label: Building and construction
+        id: building-and-construction
+      - value: chemicals
+        label: Chemicals
+        id: chemicals
+      - value: clothing-footwear-and-fashion
+        label: Clothing, footwear and fashion
+        id: clothing-footwear-and-fashion
+      - value: defence
+        label: Defence
+        id: defence
+      - value: distribution-and-service-industries
+        label: Distribution and Service Industries
+        id: distribution-and-service-industries
+      - value: electronics-industry
+        label: Electronics Industry
+        id: electronics-industry
+      - value: energy
+        label: Energy
+        id: energy
+      - value: engineering
+        label: Engineering
+        id: engineering
+      - value: financial-services
+        label: Financial services
+        id: financial-services
+      - value: fire-police-and-security
+        label: Fire, police, and security
+        id: fire-police-and-security
+      - value: food-manufacturing
+        label: Food manufacturing
+        id: food-manufacturing
+      - value: giftware-jewellery-and-tableware
+        label: Giftware, jewellery and tableware
+        id: giftware-jewellery-and-tableware
+  with_option_pre_checked:
+    data:
+      key: with_checked_value_set
+      title: List of options
+      options_container_id: list_of_vegetables
+      options:
+      - value: potatoes
+        label: Potatoes
+        checked: true
+      - value: carrots
+        label: Carrots
+        id: carrots
+      - value: mash
+        label: Mash
+        id: mash
+  with_aria_controls:
+    description: |
+      aria_controls_id adds an [`aria-controls` attribute](https://tink.uk/using-the-aria-controls-attribute/) to each checkbox input. This makes it easier for users of assitive tech to jump from them to the part of the page they’re updating.
+
+      The aria_controls_id must be set to the ID of an element that’s on the page or it won’t be included.
+    data:
+      key: with_aria-control_set
+      title: List of options (with aria controls)
+      aria_controls_id: wrapper
+      options_container_id: list_of_countries
+      options:
+      - value: britain
+        label: Britain
+        id: britain
+      - value: france
+        label: France
+        id: france
+      - value: spain
+        label: Spain
+        id: spain
+  closed_on_load:
+    data:
+      key: closed_on_load
+      title: List of hats
+      closed_on_load: true
+      options_container_id: list_of_hats
+      options:
+      - value: bobble_hat
+        label: Bobble hat
+        id: bobble_hat
+      - value: fez
+        label: Fez
+        id: fez
+      - value: sombrero
+        label: Sombrero
+        id: sombrero
+  with_tracking:
+    data:
+      key: list_of_shoes
+      title: List of shoes
+      options_container_id: list_of_shoes
+      options:
+      - value: trainers
+        label: Trainers
+        id: trainers
+        data_attributes:
+          track_category: "filterClicked"
+          track_action: "List of shoes"
+          track_label: "trainers"
+          track_options:
+            dimension28: 1
+      - value: plimsolls
+        label: Plimsolls
+        id: plimsolls
+        data_attributes:
+          track_category: "filterClicked"
+          track_action: "List of shoes"
+          track_label: "plimsolls"
+          track_options:
+            dimension28: 1
+      - value: high_heels
+        label: High heels
+        id: high_heels
+        data_attributes:
+          track_category: "filterClicked"
+          track_action: "List of shoes"
+          track_label: "high_heels"
+          track_options:
+            dimension28: 1
+  with_filter:
+    description: Adds a filter to allow users to narrow the checkboxes down. Checkboxes will only show if they match what the user has typed, or if they are already checked. The filter is case insensitive and strips out punctuation characters and duplicate whitespace, and sees '&' and 'and' as the same, to make filtering easier.
+    data:
+      key: filter_demo
+      title: Countries
+      options_container_id: list_of_countries_to_filter
+      show_filter: true
+      options:
+      - value: afghanistan
+        label: Afghanistan
+        id: afghanistan
+      - value: albania
+        label: Albania
+        id: albania
+      - value: algeria
+        label: Algeria
+        id: algeria
+        checked: true
+      - value: american_samoa
+        label: American Samoa
+        id: american_samoa
+      - value: andorra
+        label: Andorra
+        id: andorra
+        checked: true
+      - value: angola
+        label: Angola
+        id: angola
+      - value: anguilla
+        label: Anguilla
+        id: anguilla
+      - value: antigua_and_barbuda
+        label: Antigua and Barbuda
+        id: antigua_and_barbuda
+      - value: argentina
+        label: Argentina
+        id: argentina
+      - value: armenia
+        label: Armenia
+        id: armenia
+      - value: aruba
+        label: Aruba
+        id: aruba
+      - value: australia
+        label: Australia
+        id: australia
+      - value: austria
+        label: Austria
+        id: austria
+      - value: azerbaijan
+        label: Azerbaijan
+        id: azerbaijan
+      - value: bahamas
+        label: Bahamas
+        id: bahamas
+      - value: bahrain
+        label: Bahrain
+        id: bahrain
+      - value: bangladesh
+        label: Bangladesh
+        id: bangladesh
+      - value: barbados
+        label: Barbados
+        id: barbados
+      - value: belarus
+        label: Belarus
+        id: belarus
+      - value: belgium
+        label: Belgium
+        id: belgium
+      - value: belize
+        label: Belize
+        id: belize
+      - value: benin
+        label: Benin
+        id: benin
+      - value: bermuda
+        label: Bermuda
+        id: bermuda
+      - value: bhutan
+        label: Bhutan
+        id: bhutan
+      - value: bolivia
+        label: Bolivia
+        id: bolivia
+      - value: cote
+        label: Cote d’Ivoire
+        id: cote
+      - value: sthelena
+        label: St Helena, Ascension and Tristan da Cunha
+        id: sthelena
+      - value: trinidad
+        label: Trinidad & Tobago
+        id: trinidad
+  large:
+    description: When `large` is set to `true`, the option-select container has an increased max-height of 600px, allowing more checkbox items to be visible.
+    data:
+      key: large_demo
+      title: Countries
+      options_container_id: list_of_countries_to_filter_large
+      large: true
+      options:
+      - value: afghanistan
+        label: Afghanistan
+        id: afghanistanLargeExample
+      - value: albania
+        label: Albania
+        id: albaniaLargeExample
+      - value: algeria
+        label: Algeria
+        id: algeriaLargeExample
+      - value: american_samoa
+        label: American Samoa
+        id: american_samoaLargeExample
+      - value: andorra
+        label: Andorra
+        id: andorraLargeExample
+      - value: angola
+        label: Angola
+        id: angolaLargeExample
+      - value: anguilla
+        label: Anguilla
+        id: anguillaLargeExample
+      - value: antigua_and_barbuda
+        label: Antigua and Barbuda
+        id: antigua_and_barbudaLargeExample
+      - value: argentina
+        label: Argentina
+        id: argentinaLargeExample
+      - value: armenia
+        label: Armenia
+        id: armeniaLargeExample
+      - value: aruba
+        label: Aruba
+        id: arubaLargeExample
+      - value: australia
+        label: Australia
+        id: australiaLargeExample
+      - value: austria
+        label: Austria
+        id: austriaLargeExample
+      - value: azerbaijan
+        label: Azerbaijan
+        id: azerbaijanLargeExample
+      - value: bahamas
+        label: Bahamas
+        id: bahamasLargeExample
+      - value: bahrain
+        label: Bahrain
+        id: bahrainLargeExample
+      - value: bangladesh
+        label: Bangladesh
+        id: bangladeshLargeExample
+      - value: barbados
+        label: Barbados
+        id: barbadosLargeExample
+      - value: belarus
+        label: Belarus
+        id: belarusLargeExample
+      - value: belgium
+        label: Belgium
+        id: belgiumLargeExample
+      - value: belize
+        label: Belize
+        id: belizeLargeExample
+      - value: benin
+        label: Benin
+        id: beninLargeExample
+      - value: bermuda
+        label: Bermuda
+        id: bermudaLargeExample
+      - value: bhutan
+        label: Bhutan
+        id: bhutanLargeExample
+      - value: bolivia
+        label: Bolivia
+        id: boliviaLargeExample
+      - value: cote
+        label: Cote d'Ivoire
+        id: coteLargeExample
+      - value: sthelena
+        label: St Helena, Ascension and Tristan da Cunha
+        id: sthelenaLargeExample
+      - value: trinidad
+        label: Trinidad & Tobago
+        id: trinidadLargeExample

data/config/locales/ar.yml

@@ -23,6 +23,7 @@ ar:
         other: "%{count} صفحات"
         two:
         zero:
+      preview_aria_label:
       preview_link:
       reference: 'مرجع: %{reference}'
       request_format_cta: طلب تنسيق يمكن الاطلاع عليه.
@@ -140,6 +141,10 @@ ar:
       close_modal: إغلاق مربع الحوار المشروط
     notice:
       banner_title:
+    option_select:
+      found_single:
+      found_multiple:
+      selected:
     organisation_schema:
       all_content_search_description: العثور عن كل المحتوى من %{organisation}
     previous_and_next_navigation:

data/config/locales/az.yml

@@ -19,6 +19,7 @@ az:
       page:
         one:
         other: "%{count} səhifə"
+      preview_aria_label:
       preview_link:
       reference: 'İst: %{reference}'
       request_format_cta: İstifadə edilə bilən format tələb edin.
@@ -137,6 +138,10 @@ az:
       close_modal: Modal dialoqu bağla
     notice:
       banner_title:
+    option_select:
+      found_single:
+      found_multiple:
+      selected:
     organisation_schema:
       all_content_search_description: "%{organisation}-dan bütün məzmunu tap"
     previous_and_next_navigation:

data/config/locales/be.yml

@@ -21,6 +21,7 @@ be:
         many:
         one: 1 старонка
         other: "%{count} старонкi"
+      preview_aria_label:
       preview_link:
       reference: 'Спасылка: %{reference}'
       request_format_cta: Запрасіць файл у іншым фармаце.
@@ -143,6 +144,10 @@ be:
       close_modal: Зачыніць мадальны дыялог
     notice:
       banner_title:
+    option_select:
+      found_single:
+      found_multiple:
+      selected:
     organisation_schema:
       all_content_search_description: Шукаць увесь змест з %{organisation}
     previous_and_next_navigation:

data/config/locales/bg.yml

@@ -19,6 +19,7 @@ bg:
       page:
         one: 1-ва страница
         other: "%{count} страници"
+      preview_aria_label:
       preview_link:
       reference: 'Реф: %{reference}'
       request_format_cta: Поискайте достъпен формат.
@@ -141,6 +142,10 @@ bg:
       close_modal: Затваряне на модалния диалог
     notice:
       banner_title:
+    option_select:
+      found_single:
+      found_multiple:
+      selected:
     organisation_schema:
       all_content_search_description: Намиране на цялото съдържание от %{organisation}
     previous_and_next_navigation:

data/config/locales/bn.yml

@@ -19,6 +19,7 @@ bn:
       page:
         one: 1 পেজ
         other: "%{count} পেজ"
+      preview_aria_label:
       preview_link:
       reference: 'সুত্র: %{reference}'
       request_format_cta: একটি প্রবেশযোগ্য ফরম্যাটের অনুরোধ করুন।
@@ -138,6 +139,10 @@ bn:
       close_modal: ক্লোজ মোডাল ডায়ালগ
     notice:
       banner_title:
+    option_select:
+      found_single:
+      found_multiple:
+      selected:
     organisation_schema:
       all_content_search_description: "%{organisation}-এর সকল বিষয়বস্তু খুঁজে বের করুন"
     previous_and_next_navigation:

data/config/locales/cs.yml

@@ -20,6 +20,7 @@ cs:
         few:
         one: Strana 1
         other: "%{count} stránek"
+      preview_aria_label:
       preview_link:
       reference: 'Odkaz: %{reference}'
       request_format_cta: Vyžádejte si přístupný formát.
@@ -142,6 +143,10 @@ cs:
       close_modal: Zavření modálního dialogu
     notice:
       banner_title:
+    option_select:
+      found_single:
+      found_multiple:
+      selected:
     organisation_schema:
       all_content_search_description: Najít veškerý obsah z %{organisation}
     previous_and_next_navigation:

data/config/locales/cy.yml

@@ -23,6 +23,7 @@ cy:
         other: "%{count} o dudalennau"
         two:
         zero:
+      preview_aria_label:
       preview_link:
       reference: 'Cyfeirnod: %{reference}'
       request_format_cta: Gwneud cais am fformat hygyrch.
@@ -141,6 +142,10 @@ cy:
       close_modal: Cau'r ddeialog foddol
     notice:
       banner_title:
+    option_select:
+      found_single:
+      found_multiple:
+      selected:
     organisation_schema:
       all_content_search_description: Dod o hyd i'r holl gynnwys gan %{organisation}
     previous_and_next_navigation:

data/config/locales/da.yml

@@ -19,6 +19,7 @@ da:
       page:
         one: 1 side
         other: "%{count} sider"
+      preview_aria_label:
       preview_link:
       reference: 'Henvisning: %{reference}'
       request_format_cta: Anmod om et tilgængeligt format.
@@ -138,6 +139,10 @@ da:
       close_modal: Luk den modale dialog
     notice:
       banner_title:
+    option_select:
+      found_single:
+      found_multiple:
+      selected:
     organisation_schema:
       all_content_search_description: Find alt indhold fra %{organisation}
     previous_and_next_navigation:

data/config/locales/de.yml

@@ -19,6 +19,7 @@ de:
       page:
         one: 1 Seite
         other: "%{count} Seiten"
+      preview_aria_label:
       preview_link:
       reference: 'Ref: %{reference}'
       request_format_cta: Fordern Sie ein zugängliches Format an.
@@ -141,6 +142,10 @@ de:
       close_modal: Dialog schließen
     notice:
       banner_title:
+    option_select:
+      found_single:
+      found_multiple:
+      selected:
     organisation_schema:
       all_content_search_description: Alle Inhalte von %{organisation} finden
     previous_and_next_navigation:

data/config/locales/dr.yml

@@ -19,6 +19,7 @@ dr:
       page:
         one: صفحهء 1
         other: "%{count} صفحات"
+      preview_aria_label:
       preview_link:
       reference: "%{reference}:مرجع"
       request_format_cta: یک فارمت قابل دسترس را درخواست کنید.
@@ -139,6 +140,10 @@ dr:
       close_modal: دیالوگ کیفی را بسته نمایید
     notice:
       banner_title:
+    option_select:
+      found_single:
+      found_multiple:
+      selected:
     organisation_schema:
       all_content_search_description: تمام محتویات را از اینجا بدست بیاورید %{organisation}
     previous_and_next_navigation:

data/config/locales/el.yml

@@ -19,6 +19,7 @@ el:
       page:
         one: 1 σελίδα
         other: "%{count} σελίδες"
+      preview_aria_label:
       preview_link:
       reference: 'Αναφ.: %{reference}'
       request_format_cta: Ζητήστε μια προσβάσιμη μορφή.
@@ -137,6 +138,10 @@ el:
       close_modal: Κλείσιμο παράθυρου διαλόγου
     notice:
       banner_title:
+    option_select:
+      found_single:
+      found_multiple:
+      selected:
     organisation_schema:
       all_content_search_description: Εύρεση όλου του περιεχομένου από τον οργανισμό %{Organization}
     previous_and_next_navigation:

data/config/locales/en.yml

@@ -16,10 +16,11 @@ en:
     attachment:
       opendocument_html: This file is in an <a href='https://www.gov.uk/guidance/using-open-document-formats-odf-in-your-organisation' target=%{target} class='govuk-link'>OpenDocument</a> format
       order_a_copy: Order a copy
-      preview_link: View online
       page:
         one: 1 page
         other: "%{count} pages"
+      preview_aria_label: View %{title} online
+      preview_link: View online
       reference: 'Ref: %{reference}'
       request_format_cta: Request an accessible format.
       request_format_details_html: If you use assistive technology (such as a screen reader) and need a version of this document in a more accessible format, please email <a href='mailto:%{alternative_format_contact_email}' target='_blank' class='govuk-link'>%{alternative_format_contact_email}</a>. Please tell us what format you need. It will help us if you say what assistive technology you use.
@@ -256,6 +257,10 @@ en:
       close_modal: Close modal dialogue
     notice:
       banner_title: Important
+    option_select:
+      found_single: option found
+      found_multiple: options found
+      selected: selected
     organisation_schema:
       all_content_search_description: Find all content from %{organisation}
     previous_and_next_navigation:

data/config/locales/es-419.yml

@@ -19,6 +19,7 @@ es-419:
       page:
         one: 1 página
         other: "%{count} páginas"
+      preview_aria_label:
       preview_link:
       reference: 'Referencia: %{reference}'
       request_format_cta: Solicite un formato accesible.
@@ -137,6 +138,10 @@ es-419:
       close_modal: Cerrar diálogo modal
     notice:
       banner_title:
+    option_select:
+      found_single:
+      found_multiple:
+      selected:
     organisation_schema:
       all_content_search_description: Buscar todo el contenido de %{organisation}
     previous_and_next_navigation:

data/config/locales/es.yml

@@ -19,6 +19,7 @@ es:
       page:
         one: 1 página
         other: "%{count} páginas"
+      preview_aria_label:
       preview_link:
       reference: 'Ref.: %{reference}'
       request_format_cta: Solicitar un formato accesible.
@@ -137,6 +138,10 @@ es:
       close_modal: Cierre el cuadro de diálogo modal
     notice:
       banner_title:
+    option_select:
+      found_single:
+      found_multiple:
+      selected:
     organisation_schema:
       all_content_search_description: Buscar todo el contenido de %{organization}
     previous_and_next_navigation:

data/config/locales/et.yml

@@ -19,6 +19,7 @@ et:
       page:
         one: 1 leht
         other: "%{count} lehte"
+      preview_aria_label:
       preview_link:
       reference: 'Viide: %{reference}'
       request_format_cta: Taotlege juurdepääsetavat vormingut.
@@ -140,6 +141,10 @@ et:
       close_modal: Sule modaalne dialoog
     notice:
       banner_title:
+    option_select:
+      found_single:
+      found_multiple:
+      selected:
     organisation_schema:
       all_content_search_description: Leidke kogu ettevõtte %{organization} sisu
     previous_and_next_navigation:

data/config/locales/fa.yml

@@ -19,6 +19,7 @@ fa:
       page:
         one:
         other: "%{count} صفحه"
+      preview_aria_label:
       preview_link:
       reference: 'مرجع: %{reference}'
       request_format_cta: درخواست یک قالب با قابلیت دسترسی بهتر.
@@ -136,6 +137,10 @@ fa:
       close_modal: بستن گفتگوی مودال
     notice:
       banner_title:
+    option_select:
+      found_single:
+      found_multiple:
+      selected:
     organisation_schema:
       all_content_search_description: یافتن تمام محتوا از %{organisation}
     previous_and_next_navigation:

data/config/locales/fi.yml

@@ -19,6 +19,7 @@ fi:
       page:
         one: 1 sivu
         other: "%{count} pages"
+      preview_aria_label:
       preview_link:
       reference: 'Viite: %{reference}'
       request_format_cta: Pyydä helppokäyttöistä muotoa.
@@ -139,6 +140,10 @@ fi:
       close_modal: Sulje modaalinen vuoropuhelu
     notice:
       banner_title:
+    option_select:
+      found_single:
+      found_multiple:
+      selected:
     organisation_schema:
       all_content_search_description: Etsi kaikki sisältö alkaen %{organisation}
     previous_and_next_navigation: