VACMS-16327: Updates based on UX and accessibility feedback

config/sync/core.entity_form_display.node.vba_facility.default.yml

@@ -91,7 +91,6 @@ third_party_settings:
     group_editorial_workflow:
       children:
         - moderation_state
-        - revision_log
         - flag
       label: 'Editorial Workflow'
       region: content
@@ -116,7 +115,7 @@ third_party_settings:
       format_settings:
         classes: external-content
         show_empty_fields: false
-        id: locations-and-contact-information
+        id: locations-and-contact-info
         open: true
         description: ''
         required_fields: true
@@ -176,7 +175,7 @@ third_party_settings:
       format_type: tooltip
       format_settings:
         show_empty_fields: '1'
-        show_label: '0'
+        show_label: '1'
         tooltip_description: "Why can’t I edit this?\r\nNational editors keep this content standardized to provide consistent messaging for facilities nationwide."
         description: ''
         required_fields: '1'
@@ -194,17 +193,16 @@ third_party_settings:
       weight: 15
       format_type: tooltip
       format_settings:
-        show_empty_fields: 0
+        show_label: '1'
+        tooltip_description: "Why can’t I edit this?\r\nInternational editors keep this content standardized to provide consistent messaging for facilities nationwide."
+        description: ''
+        required_fields: '1'
         id: ''
         classes: centralized
+        show_empty_fields: 0
         element: div
-        show_label: '0'
         label_element: h3
-        required_fields: 1
         attributes: ''
-        description: ''
-        tooltip_description: "Why can’t I edit this?\r\nInternational editors keep this content standardized to provide consistent messaging for facilities nationwide."
-        open: false
     group_benefit_office_hours_vary:
       children:
         - field_cc_benefit_office_hours_va
@@ -214,17 +212,16 @@ third_party_settings:
       weight: 14
       format_type: tooltip
       format_settings:
-        show_empty_fields: 0
+        show_label: '1'
+        tooltip_description: "Why can’t I edit this? \r\nNational editors keep this content standardized to provide consistent messaging for facilities nationwide."
+        description: ''
+        required_fields: '1'
         id: ''
         classes: centralized
+        show_empty_fields: 0
         element: div
-        show_label: '0'
         label_element: h3
-        required_fields: 1
         attributes: ''
-        description: ''
-        tooltip_description: "Why can’t I edit this? \r\nNational editors keep this content standardized to provide consistent messaging for facilities nationwide."
-        open: false
     group_national_spotlight:
       children:
         - field_cc_national_spotlight_1
@@ -234,7 +231,7 @@ third_party_settings:
       weight: 9
       format_type: tooltip
       format_settings:
-        show_label: '0'
+        show_label: '1'
         tooltip_description: "Why can’t I edit this? \r\nThis content is standardized to provide consistent messaging for facilities nationwide."
         description: ''
         required_fields: '1'
@@ -272,7 +269,7 @@ third_party_settings:
       weight: 8
       format_type: tooltip
       format_settings:
-        show_label: '0'
+        show_label: '1'
         tooltip_description: "Why can’t I edit this? \r\nNational editors keep this content standardized to provide consistent messaging for facilities nationwide."
         description: ''
         required_fields: '1'
@@ -346,7 +343,7 @@ third_party_settings:
         show_empty_fields: '1'
         show_label: '1'
         tooltip_description: ''
-        description: '<p>Facility services are created on a different page. Learn how to <a href="https://prod.cms.va.gov/help/vamc/how-to-add-or-edit-a-vamc-facility-health-service" target="_blank">add or edit a VBA facility service (opens in new window)</a>. </p>'
+        description: 'Facility services are created on a different page.'
         required_fields: '1'
         id: facility-services
         classes: 'not-editable centralized'
@@ -383,7 +380,7 @@ third_party_settings:
         classes: ''
         show_empty_fields: false
         id: ''
-        description: '<p>Add an image that helps people recognize the facility. For best results, add an image cropped to a 3:2 aspect ratio. For accessibility, also remember to add alternative text following the <a href="https://design.va.gov/content-style-guide/alternative-text-for-images" target="_blank">VA content style guidelines (opens in a new window)</a>.</p>'
+        description: '<p>Add an image that helps people recognize the facility. For best results, add an image cropped to a 3:2 aspect ratio. For accessibility, alternative text must also be added. Please refer to the <a href="https://prod.cms.va.gov/help/cms-basics/alternative-text-for-images" target="_blank">alt text Knowledge Base article (opens in a new window)</a> for more information.</p>'
         required_fields: true
         description_display: before
 id: node.vba_facility.default
@@ -427,12 +424,19 @@ content:
         hide_help: '1'
         hide_guidelines: '1'
   field_banner_title:
-    type: string_textfield
+    type: string_textfield_with_counter
     weight: 31
     region: content
     settings:
       size: 60
       placeholder: ''
+      use_field_maxlength: false
+      maxlength: 100
+      counter_position: after
+      js_prevent_submit: true
+      count_only_mode: false
+      count_html_characters: true
+      textcount_status_message: '<span class="remaining_count">@remaining_count</span> characters remaining'
     third_party_settings: {  }
   field_banner_types_description:
     type: markup
@@ -445,18 +449,18 @@ content:
     weight: 13
     region: content
     settings:
-      show_field_label: '1'
       show_link_to_source: '1'
       show_source_updated_date: '1'
+      show_field_label: 0
     third_party_settings: {  }
   field_cc_benefits_hotline:
     type: entity_field_fetch_widget
     weight: 26
     region: content
     settings:
-      show_field_label: '1'
       show_link_to_source: '1'
       show_source_updated_date: '1'
+      show_field_label: 0
     third_party_settings: {  }
   field_cc_cant_find_benefits:
     type: entity_field_fetch_widget
@@ -472,9 +476,9 @@ content:
     weight: 11
     region: content
     settings:
-      show_field_label: '1'
       show_link_to_source: '1'
       show_source_updated_date: '1'
+      show_field_label: 0
     third_party_settings: {  }
   field_cc_meta_tags:
     type: entity_field_fetch_widget
@@ -490,18 +494,18 @@ content:
     weight: 1
     region: content
     settings:
-      show_field_label: '1'
       show_link_to_source: '1'
       show_source_updated_date: '1'
+      show_field_label: 0
     third_party_settings: {  }
   field_cc_vba_facility_overview:
     type: entity_field_fetch_widget
     weight: 2
     region: content
     settings:
-      show_field_label: '1'
       show_link_to_source: '1'
       show_source_updated_date: '1'
+      show_field_label: 0
     third_party_settings: {  }
   field_dismissible_option:
     type: options_buttons

config/sync/core.entity_form_display.paragraph.basic_accordion.default.yml

@@ -8,33 +8,35 @@ dependencies:
     - paragraphs.paragraphs_type.basic_accordion
   module:
     - allowed_formats
+    - text
     - textfield_counter
 id: paragraph.basic_accordion.default
 targetEntityType: paragraph
 bundle: basic_accordion
 mode: default
 content:
   field_header:
-    type: string_textfield
+    type: string_textfield_with_counter
     weight: 0
     region: content
     settings:
       size: 60
       placeholder: ''
+      use_field_maxlength: true
+      maxlength: 0
+      counter_position: after
+      js_prevent_submit: true
+      count_only_mode: false
+      count_html_characters: true
+      textcount_status_message: '<span class="remaining_count">@remaining_count</span> characters remaining'
     third_party_settings: {  }
   field_rich_wysiwyg:
-    type: text_textarea_with_counter
+    type: text_textarea
     weight: 1
     region: content
     settings:
       rows: 5
       placeholder: ''
-      maxlength: 240
-      counter_position: after
-      js_prevent_submit: true
-      count_only_mode: false
-      count_html_characters: true
-      textcount_status_message: '<span class="remaining_count">@remaining_count</span> characters remaining'
     third_party_settings:
       allowed_formats:
         hide_help: '1'

config/sync/field.field.node.vba_facility.field_banner_types_description.yml

@@ -24,6 +24,6 @@ default_value:
 default_value_callback: ''
 settings:
   markup:
-    value: '<p>Two types of Banner alerts are supported:</p><ol><li><strong>Informational alerts:</strong> These are used to provide helpful information or call attention to an announcement.</li><li><strong>Warning alerts:</strong> These are used to warn a user and call out negative consequences. Warning alerts are necessary when something has gone wrong.</li></ol><p>You can read more about these banner types on the site in the <a href="https://design.va.gov/components/banner/">VA Design System (opens in a new window)</a>, or learn how to create them in the CMS in the <a href="https://prod.cms.va.gov/help/veterans-benefits-administration-vba/banner-alerts" target="_blank">Knowledge Base (opens in a new window)</a>.</p>'
+    value: '<p>Two types of Banner alerts are supported:</p><ol><li><strong>Informational alerts:</strong> These are used to provide helpful information or call attention to an announcement.</li><li><strong>Warning alerts:</strong> These are used to warn a user and call out negative consequences. Warning alerts are necessary when something has gone wrong.</li></ol><p>You can read more about these banner types on the site in the <a href="https://design.va.gov/components/banner/" target="_blank">VA Design System banner page (opens in a new window)</a>, or learn how to create them in the CMS in the <a href="https://prod.cms.va.gov/help/veterans-benefits-administration-vba/banner-alerts" target="_blank">Knowledge Base (opens in a new window)</a>.</p>'
     format: rich_text
 field_type: markup

config/sync/field.field.node.vba_facility.field_media.yml

@@ -21,7 +21,7 @@ field_name: field_media
 entity_type: node
 bundle: vba_facility
 label: 'Facility photo'
-description: "<strong>Image guidelines</strong> <br>\r\n<br>\r\n✓ Images taken with a smart phone are ok to use<br>\r\n✓ Do use an image in landscape (horizontal) orientation<br>\r\n✓ Do show the entrance of the facility building in the image<br>\r\n✗ Do not show any people in the image<br>\r\n✗ Do not show any car license plates in the image<br>"
+description: "<strong>Image guidelines</strong> <br>\r\n<br>\r\n✓ Please do:\r\n<ul style=\"list-style-type:square;\">\r\n  <li>Use an image in landscape (horizontal) orientation</li>\r\n  <li>Show the entrance of the facility building in the image</li>\r\n  <li>Use images taken with a smart phone if necessary</li>\r\n</ul>\r\n✗ Do not \r\n<ul style=\"list-style-type:square;\">\r\n  <li>Show any people in the image</li>\r\n  <li>Show any car license plates in the image</li>\r\n</ul>\r\n"
 required: false
 translatable: false
 default_value: {  }

config/sync/field.field.node.vba_facility.field_operating_status_more_info.yml

@@ -14,7 +14,7 @@ id: node.vba_facility.field_operating_status_more_info
 field_name: field_operating_status_more_info
 entity_type: node
 bundle: vba_facility
-label: 'Operating status - more info'
+label: Details
 description: 'Add relevant details about how this status will impact Veterans and visitors.'
 required: false
 translatable: false

config/sync/field.field.node.vba_facility.field_table_of_contents.yml

@@ -25,6 +25,6 @@ default_value:
 default_value_callback: ''
 settings:
   markup:
-    value: "<h3>Editing this content</h3><p>Provide Veterans with the information they need to plan a visit to a VBA facility. Some content won’t be editable because it comes from other sources.\L</p><p>For more guidance, learn <a href=\"https://prod.cms.va.gov/help/veterans-benefits-administration-vba\">how to edit VBA facility pages (opens in a new window)</a>.</p><h3>On this page</h3><p>↓<a href=\"#banner-alert\"> Banner alert</a></p><p>↓<a href=\"#benefit-office-overview\"> Benefit office overview</a></p><p>↓<a href=\"#locations-and-contact-information\"> Location and contact information</a></p><p>↓<a href=\"#prepare-for-your-visit\"> Prepare for your visit</a></p><p>↓<a href=\"#spotlight-content\"> Spotlight content</a></p><p>↓<a href=\"#facility-services\"> Facility services</a></p><p>↓<a href=\"#cant-find-service\"> Can't find the service you're looking for?</a></p><p>↓<a href=\"#get-updates\"> Get updates from VBA</a></p><p>↓<a href=\"#other-va-locations\"> Other VA locations</a></p><h3>Content</h3>"
+    value: "<h3>Editing this content</h3><p>Provide Veterans with the information they need to plan a visit to a VBA facility. Some content won’t be editable because it comes from other sources.\L</p><p>For more guidance, learn <a href=\"https://prod.cms.va.gov/help/veterans-benefits-administration-vba\" target=\"_blank\">how to edit VBA facility pages (opens in a new window)</a>.</p><h3>On this page</h3><p>↓<a href=\"#banner-alert\"> Banner alert</a></p><p>↓<a href=\"#benefit-office-overview\"> Benefit office overview</a></p><p>↓<a href=\"#locations-and-contact-info\"> Location and contact information</a></p><p>↓<a href=\"#prepare-for-your-visit\"> Prepare for your visit</a></p><p>↓<a href=\"#spotlight-content\"> Spotlight content</a></p><p>↓<a href=\"#facility-services\"> Facility services</a></p><p>↓<a href=\"#cant-find-service\"> Can't find the service you're looking for?</a></p><p>↓<a href=\"#get-updates\"> Get updates from VBA</a></p><p>↓<a href=\"#other-va-locations\"> Other VA locations</a></p><h3>Content</h3>"
     format: rich_text
 field_type: markup

config/sync/field.field.paragraph.basic_accordion.field_header.yml

@@ -15,7 +15,7 @@ field_name: field_header
 entity_type: paragraph
 bundle: basic_accordion
 label: Header
-description: 'This is shown when the accordion is open or closed. Learn more about accordions on the <a href="https://design.va.gov/components/accordion" target="_blank">VA design system accordion page (opens in a new window)</a>. '
+description: 'This is shown when the accordion is open or closed.'
 required: true
 translatable: false
 default_value: {  }

docroot/themes/custom/vagovclaro/assets/scss/components/_centralized_content.scss

@@ -18,6 +18,11 @@
     height: 0;
     visibility: hidden;
   }
+
+  // Nested fieldsets should look like the rest of centralized
+  fieldset {
+    background-color: var(--va-gray-lightest) !important;
+  }
 }
 
 // Colors scope sections on node view page
@@ -167,8 +172,3 @@
   border: unset;
   padding: 0;
 }
-
-// Nested fieldsets should look like the rest of centralized
-.centralized fieldset {
-  background-color: var(--va-gray-lightest) !important;
-}