DP-45040: image-alt-textnew module and some config

changelogs/DP-45040.yml

@@ -0,0 +1,41 @@
+#
+# Write your changelog entry here. Every pull request must have a changelog yml file.
+#
+# Change types:
+# #############################################################################
+# You can use one of the following types:
+#  - Added: For new features.
+#  - Changed: For changes to existing functionality.
+#  - Deprecated: For soon-to-be removed features.
+#  - Removed: For removed features.
+#  - Fixed: For any bug fixes.
+#  - Security: In case of vulnerabilities.
+#
+# Format
+# #############################################################################
+# The format is crucial. Please follow the examples below. For reference, the requirements are:
+#  - All 3 parts are required and you must include "Type", "description" and "issue".
+#  - "Type" must be left aligned and followed by a colon.
+#  - "description" must be indented with 2 spaces followed by a colon
+#  - "issue" must be indented with 4 spaces followed by a colon.
+#  - "issue" is for the Jira ticket number only e.g. DP-1234
+#  - No extra spaces, indents, or blank lines are allowed.
+#
+# Example:
+# #############################################################################
+# Fixed:
+#  - description: Fixes scrolling on edit pages in Safari.
+#    issue: DP-13314
+#
+# You may add more than 1 description & issue for each type using the following format:
+# Changed:
+#  - description: Automating the release branch.
+#    issue: DP-10166
+#  - description: Second change item that needs a description.
+#    issue: DP-19875
+#  - description: Third change item that needs a description along with an issue.
+#    issue: DP-19843
+#
+Added:
+  - description: Decorative image widget module.
+    issue: DP-45040

composer.json

@@ -188,6 +188,7 @@
         "drupal/csv_field": "^3.0",
         "drupal/csv_serialization": "^4.0",
         "drupal/datalayer": "^2",
+        "drupal/decorative_image_widget": "^1.0",
         "drupal/devel": "^5",
         "drupal/diff": "^1.7",
         "drupal/draggableviews": "^2.1",
@@ -437,6 +438,9 @@
                 "500 error: Possible infinite loop": "https://www.drupal.org/files/issues/2019-02-15/diff-500-errors-possible-infinite-loop-3033455-2-d8.patch",
                 "Make revisions overview page accessible (https://www.drupal.org/project/diff/issues/3228798)": "https://www.drupal.org/files/issues/2024-05-14/diff-3228798-17.patch"
             },
+            "drupal/decorative_image_widget": {
+                "Entity embed support (https://www.drupal.org/project/decorative_image_widget/issues/3577172)": "patches/DP-45040_decorative_image_widget_entity_embed_default_unchecked.patch"
+            },
             "drupal/dropzonejs": {
                 "Dropzone element overwrites potential metadata and libraries added by other modules (https://www.drupal.org/project/drupal/issues/3303028)": "https://www.drupal.org/files/issues/2023-01-18/dropzone_overwrites_metadata_and_libraries-3303028-2_with-3211288.patch"
             },

conf/drupal/config/core.entity_form_display.node.event.default.yml

@@ -46,6 +46,7 @@ dependencies:
     - content_moderation
     - datetime
     - datetime_range
+    - decorative_image_widget
     - entity_browser_entity_form
     - entity_hierarchy
     - entity_reference_tree
@@ -335,7 +336,9 @@ content:
     settings:
       progress_indicator: throbber
       preview_image_style: thumbnail
-    third_party_settings: {  }
+    third_party_settings:
+      decorative_image_widget:
+        use_decorative_checkbox: true
   field_event_lede:
     type: string_textfield
     weight: 121
@@ -371,7 +374,9 @@ content:
     settings:
       progress_indicator: throbber
       preview_image_style: thumbnail
-    third_party_settings: {  }
+    third_party_settings:
+      decorative_image_widget:
+        use_decorative_checkbox: true
   field_event_meeting_agenda_sect:
     type: entity_reference_paragraphs
     weight: 59

conf/drupal/config/core.entity_form_display.node.news.default.yml

@@ -34,6 +34,7 @@ dependencies:
     - allowed_formats
     - content_moderation
     - datetime
+    - decorative_image_widget
     - entity_hierarchy
     - entity_reference_tree
     - field_group
@@ -304,7 +305,9 @@ content:
     settings:
       progress_indicator: throbber
       preview_image_style: thumbnail
-    third_party_settings: {  }
+    third_party_settings:
+      decorative_image_widget:
+        use_decorative_checkbox: true
   field_news_lede:
     type: string_textfield
     weight: 6

conf/drupal/config/core.entity_form_display.paragraph.image.default.yml

@@ -14,6 +14,7 @@ dependencies:
     - image.style.thumbnail
     - paragraphs.paragraphs_type.image
   module:
+    - decorative_image_widget
     - image
     - text
 id: paragraph.image.default
@@ -28,7 +29,9 @@ content:
     settings:
       progress_indicator: throbber
       preview_image_style: thumbnail
-    third_party_settings: {  }
+    third_party_settings:
+      decorative_image_widget:
+        use_decorative_checkbox: true
   field_image_administrative_title:
     type: string_textfield
     weight: 2

conf/drupal/config/core.extension.yml

@@ -39,6 +39,7 @@ module:
   datalayer: 0
   datetime: 0
   datetime_range: 0
+  decorative_image_widget: 0
   diff: 0
   draggableviews: 0
   dropzonejs: 0

conf/drupal/config/field.field.node.binder.field_binder_banner_image.yml

@@ -12,7 +12,7 @@ field_name: field_binder_banner_image
 entity_type: node
 bundle: binder
 label: 'Banner image'
-description: 'Optional. Add a rectangular image that relates to the overarching theme of the binder. Minimum size: 600 x 450 pixels. Images using a different height to width ratio will be cropped.'
+description: 'Optional. Image should be purely decorative and not convey any information that is not in the text of this page. Image should be rectangular and relate to the overarching theme of the binder. Minimum size: 600 x 450 pixels. Images using a different height to width ratio will be cropped.'
 required: false
 translatable: false
 default_value: {  }

conf/drupal/config/field.field.node.location.field_bg_narrow.yml

@@ -6,7 +6,14 @@ dependencies:
     - field.storage.node.field_bg_narrow
     - node.type.location
   module:
+    - content_translation
     - image
+third_party_settings:
+  content_translation:
+    translation_sync:
+      alt: alt
+      title: title
+      file: '0'
 id: node.location.field_bg_narrow
 field_name: field_bg_narrow
 entity_type: node
@@ -25,8 +32,8 @@ settings:
   max_filesize: ''
   max_resolution: ''
   min_resolution: 800x400
-  alt_field: false
-  alt_field_required: true
+  alt_field: true
+  alt_field_required: false
   title_field: false
   title_field_required: false
   default_image:

conf/drupal/config/field.field.node.news.field_news_image.yml

@@ -12,7 +12,7 @@ field_name: field_news_image
 entity_type: node
 bundle: news
 label: 'Featured image'
-description: "<p>Optional. Add an image to accompany this item.</p>\r\n<p>Only add image ALT text if the image is not purely decorative and conveys meaningful information to visitors. If purely decorative, leave blank.</p>"
+description: "<p>Optional. Add an image to accompany this item.</p>\r\n<p>Only add image ALT text if the image is not purely decorative and conveys meaningful information to visitors. If purely decorative, leave blank and check the \"decorative\" checkbox below.</p>"
 required: false
 translatable: false
 default_value: {  }

conf/drupal/config/field.storage.node.field_bg_narrow.yml

@@ -13,7 +13,7 @@ type: image
 settings:
   target_type: file
   display_field: false
-  display_default: false
+  display_default: true
   uri_scheme: public
   default_image:
     uuid: ''

conf/drupal/config/field.storage.node.field_binder_banner_image.yml

@@ -13,7 +13,7 @@ type: image
 settings:
   target_type: file
   display_field: false
-  display_default: false
+  display_default: true
   uri_scheme: public
   default_image:
     uuid: ''

conf/drupal/config/field.storage.node.field_news_image.yml

@@ -13,7 +13,7 @@ type: image
 settings:
   target_type: file
   display_field: false
-  display_default: false
+  display_default: true
   uri_scheme: public
   default_image:
     uuid: ''

docroot/modules/custom/mass_fields/mass_fields.module

@@ -976,6 +976,7 @@ function mass_fields_field_widget_single_element_image_image_form_alter(&$elemen
     'field_featured_item_image' => '_mass_fields_image_widget_alt_help_text_process',
     'field_event_image' => '_mass_fields_event_image_widget_alt_help_text_process',
     'field_event_logo' => '_mass_fields_event_image_widget_alt_help_text_process',
+    'field_bg_narrow' => '_mass_fields_location_image_widget_alt_help_text_process',
   ];
 
   // Handle fields that have a direct mapping
@@ -995,6 +996,23 @@ function mass_fields_field_widget_single_element_image_image_form_alter(&$elemen
   }
 }
 
+/**
+ * Implements hook_field_widget_single_element_WIDGET_TYPE_form_alter().
+ *
+ * Handles fields using the Image (Focal Point) widget, which has a different
+ * widget type ID ('image_focal_point') than the standard Image widget
+ * ('image_image') and therefore requires its own hook implementation.
+ */
+function mass_fields_field_widget_single_element_image_focal_point_form_alter(&$element, FormStateInterface $form_state, $context) {
+  $field_process_map = [
+    'field_bg_narrow' => '_mass_fields_event_image_widget_alt_help_text_process',
+  ];
+
+  if (isset($field_process_map[$element['#field_name']])) {
+    $element['#process'][] = $field_process_map[$element['#field_name']];
+  }
+}
+
 /**
  * Process callback for microsite key message image field.
  */
@@ -1009,7 +1027,7 @@ function _mass_fields_microsite_key_message_image_process($element, &$form_state
  */
 function _mass_fields_image_widget_alt_help_text_process($element, &$form_state, $form) {
   if (isset($element['alt'])) {
-    $text = 'If the image conveys information that is not part of the link text, describe it here. If the image is purely decorative, leave it blank. Screen readers will read the alt text first, then the link text.';
+    $text = 'If the image conveys information that is not part of the link text, describe it here. Screen readers will read the alt text first, then the link text. If the image is purely decorative, leave it blank and check the "decorative" checkbox below.';
     $element['alt']['#description'] = new TranslatableMarkup($text);
   }
   return $element;
@@ -1020,18 +1038,29 @@ function _mass_fields_image_widget_alt_help_text_process($element, &$form_state,
  */
 function _mass_fields_image_paragraph_widget_alt_help_text_process($element, &$form_state, $form) {
   if (isset($element['alt'])) {
-    $text = 'Alternative Text is read by screen readers and should be a concise description of the image’s purpose. If the image is purely decorative, leave this field blank.';
+    $text = 'Alternative Text is read by screen readers and should be a concise description of the image’s purpose. If the image is purely decorative, leave this field blank and check the "decorative" checkbox below.';
     $element['alt']['#description'] = new TranslatableMarkup($text);
   }
   return $element;
 }
 
 /**
- * Helper function to change alt text.
+ * Helper function to change alt text - event page.
  */
 function _mass_fields_event_image_widget_alt_help_text_process($element, &$form_state, $form) {
   if (isset($element['alt'])) {
-    $text = 'Enter a short description of the image to be used by screen readers ONLY if the image is not decorative. If the image is decorative (only adds visual decoration to the page, rather than to convey information that is important to understanding the page) leave this field blank.';
+    $text = 'Enter a short description of the image to be used by screen readers only if the image is not decorative. If the image is decorative (only adds visual decoration to the page, rather than to convey information that is important to understanding the page) leave this field blank and check the "decorative" checkbox below.';
+    $element['alt']['#description'] = new TranslatableMarkup($text);
+  }
+  return $element;
+}
+
+/**
+ * Helper function to change alt text - location page banner image.
+ */
+function _mass_fields_location_image_widget_alt_help_text_process($element, &$form_state, $form) {
+  if (isset($element['alt'])) {
+    $text = 'Enter a short description of the image to be used by screen readers only if the image is not decorative. If the image is decorative (only adds visual decoration to the page, rather than to convey information that is important to understanding the page) leave this field blank and check the "decorative" checkbox below.';
     $element['alt']['#description'] = new TranslatableMarkup($text);
   }
   return $element;