Skip to content

Commit

Permalink
VACMS-15785: alt text validation (#15787)
Browse files Browse the repository at this point in the history
* VACMS-15435: hard validation for alt text field

* VACMS-15436: clientside validation for alt text field

* VACMS-15436: updated composer.lock

* VACMS-15436: fix linting errors

* VACMS-15436: one more linting error fixed

* VACMS-15436: more linting fixes

* VACMS-15785: updated composer.lock

* VACMS-15962: theming changes for image form

* VACMS-15962: fix linting errors

* VACMS-15962: final fix

* VACMS-15783: Alt-Text Validation Testing (#16159)

* VACMS-15783 adds alt-text validation tests

* VACMS-15785: update composer.lock, fix merge error

* VACMS-15785: fix for spacing around error

* VACMS-15785: updated composer.lock

* Updates content

* smdh

---------

Co-authored-by: Tony Taylor <[email protected]>
Co-authored-by: Nathan Douglas <[email protected]>
  • Loading branch information
3 people authored Jan 10, 2024
1 parent 8a12098 commit 91d2e1e
Show file tree
Hide file tree
Showing 26 changed files with 987 additions and 57 deletions.
5 changes: 5 additions & 0 deletions composer.json
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@
"drupal/block_content_permissions": "^1.6",
"drupal/cer": "^5.0@beta",
"drupal/change_labels": "dev-3326097-remove-dependency-on-drupal-autoservices#7f92f90b456ac2f394dd434257e39e1d9b3086eb",
"drupal/clientside_validation": "^4.0",
"drupal/ckeditor_abbreviation": "^4.0@alpha",
"drupal/coder": "^8.3",
"drupal/codit_menu_tools": "^1.0@alpha",
Expand Down Expand Up @@ -204,6 +205,7 @@
"mikey179/vfsstream": "^1.6",
"mnsami/composer-custom-directory-installer": "^2.0",
"npm-asset/dropzone": "^5.5",
"npm-asset/jquery-validation": "^1.17",
"npm-asset/yarn": "1.19.1",
"oomphinc/composer-installers-extender": "^2.0",
"orakili/composer-drupal-info-file-patch-helper": "*",
Expand Down Expand Up @@ -366,6 +368,9 @@
"3200122 - Remove delete hook": "https://www.drupal.org/files/issues/2021-02-24/delete-hook-added-in-dev-causes-test-failures.patch",
"3254663 - Notice: Undefined index: target_bundles on Drupal\\cer\\Entity\\CorrespondingReference->synchronizeCorrespondingField()": "https://www.drupal.org/files/issues/2022-02-14/prevent-undefined-index-3254663-6.patch"
},
"drupal/clientside_validation": {
"2949540 - Allow specific form ids for clientside validation": "https://www.drupal.org/files/issues/2023-10-27/2949540-31.patch"
},
"drupal/consumer_image_styles": {
"3301224 - Follow-up: Very slow JSON:API responses when images are stored on AWS bucket": "https://www.drupal.org/files/issues/2023-02-07/3301224-9.patch"
},
Expand Down
78 changes: 76 additions & 2 deletions composer.lock
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
"Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
"This file is @generated automatically"
],
"content-hash": "dd7a8b38039836aeebdc472d433eaf95",
"content-hash": "519122c85d79517c409d1c39cf3c0b00",
"packages": [
{
"name": "asm89/stack-cors",
Expand Down Expand Up @@ -2990,6 +2990,68 @@
"issues": "http://drupal.org/project/issues/ckeditor_abbreviation"
}
},
{
"name": "drupal/clientside_validation",
"version": "4.0.2",
"source": {
"type": "git",
"url": "https://git.drupalcode.org/project/clientside_validation.git",
"reference": "4.0.2"
},
"dist": {
"type": "zip",
"url": "https://ftp.drupal.org/files/projects/clientside_validation-4.0.2.zip",
"reference": "4.0.2",
"shasum": "bfaf0fa81d645427c1b3ccfd2d5e493a10b7f483"
},
"require": {
"drupal/core": "^9.4 || ^10.0",
"php": ">=7.4.0"
},
"require-dev": {
"drupal/clientside_validation_demo": "*",
"drupal/clientside_validation_jquery": "*"
},
"type": "drupal-module",
"extra": {
"drupal": {
"version": "4.0.2",
"datestamp": "1676011269",
"security-coverage": {
"status": "covered",
"message": "Covered by Drupal's security advisory policy"
}
}
},
"notification-url": "https://packages.drupal.org/8/downloads",
"license": [
"GPL-2.0+"
],
"authors": [
{
"name": "attiks",
"homepage": "https://www.drupal.org/user/105002"
},
{
"name": "Jelle_S",
"homepage": "https://www.drupal.org/user/829198"
},
{
"name": "joseph.olstad",
"homepage": "https://www.drupal.org/user/1321830"
},
{
"name": "nikunjkotecha",
"homepage": "https://www.drupal.org/user/694082"
}
],
"description": "This module adds clientside validation",
"homepage": "https://www.drupal.org/project/clientside_validation",
"support": {
"source": "https://git.drupalcode.org/project/clientside_validation",
"issues": "https://drupal.org/project/issues/clientside_validation"
}
},
{
"name": "drupal/coder",
"version": "8.3.22",
Expand Down Expand Up @@ -17070,6 +17132,18 @@
"MIT"
]
},
{
"name": "npm-asset/jquery-validation",
"version": "1.20.0",
"dist": {
"type": "tar",
"url": "https://registry.npmjs.org/jquery-validation/-/jquery-validation-1.20.0.tgz"
},
"type": "npm-asset",
"license": [
"MIT"
]
},
{
"name": "npm-asset/yarn",
"version": "1.19.1",
Expand Down Expand Up @@ -26771,5 +26845,5 @@
"platform-overrides": {
"php": "8.1"
},
"plugin-api-version": "2.6.0"
"plugin-api-version": "2.3.0"
}
4 changes: 4 additions & 0 deletions config/sync/clientside_validation.settings.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
_core:
default_config_hash: GfA9lmRURupNRAARLoOTo1Ihq1-M3ktT0sKSjUcL2sw
enable_all_forms: true
enabled_forms: { }
6 changes: 6 additions & 0 deletions config/sync/clientside_validation_jquery.settings.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
_core:
default_config_hash: 3YUV4RQQ4k8drO7uzYJ7lNc5Az0iDAH5YW8KbZVxjeY
use_cdn: false
cdn_base_url: 'https://cdn.jsdelivr.net/npm/[email protected]/dist/'
validate_all_ajax_forms: 2
force_validate_on_blur: 0
24 changes: 20 additions & 4 deletions config/sync/core.entity_form_display.media.image.default.yml
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,10 @@ dependencies:
- field.field.media.image.field_media_submission_guideline
- field.field.media.image.field_owner
- field.field.media.image.image
- image.style.3_2_medium_thumbnail
- image.style.full_content_width
- media.type.image
module:
- change_labels
- field_group
- image_widget_crop
- markup
Expand Down Expand Up @@ -47,6 +48,7 @@ content:
maxlength: 300
counter_position: after
js_prevent_submit: true
count_only_mode: false
count_html_characters: true
textcount_status_message: 'Characters Remaining: <span class="remaining_count">@remaining_count</span>'
third_party_settings: { }
Expand All @@ -68,14 +70,23 @@ content:
region: content
settings:
progress_indicator: throbber
preview_image_style: 3_2_medium_thumbnail
preview_image_style: full_content_width
crop_preview_image_style: crop_thumbnail
crop_list: { }
crop_list:
- '2_1'
- '2_3'
- '3_2'
- '7_2'
- freeform
- original
- square
crop_types_required: { }
warn_multiple_usages: false
show_crop_area: true
show_default_crop: true
third_party_settings: { }
third_party_settings:
change_labels:
remove_label: ''
name:
type: string_textfield
weight: 1
Expand All @@ -84,6 +95,11 @@ content:
size: 60
placeholder: ''
third_party_settings: { }
translation:
weight: 10
region: content
settings: { }
third_party_settings: { }
hidden:
created: true
field_media_in_library: true
Expand Down
2 changes: 2 additions & 0 deletions config/sync/core.extension.yml
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,8 @@ module:
change_labels: 0
ckeditor5: 0
ckeditor_abbreviation: 0
clientside_validation: 0
clientside_validation_jquery: 0
codit_menu_tools: 0
components: 0
computed_breadcrumbs: 0
Expand Down
3 changes: 2 additions & 1 deletion docroot/design-system/components/input/input.scss
Original file line number Diff line number Diff line change
Expand Up @@ -23,5 +23,6 @@
}

.form-item--error-message {
color: var(--va-red-bright);
color: var(--va-red-dark);
margin: 5px 0;
}
2 changes: 1 addition & 1 deletion docroot/design-system/components/tokens/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@
--color-absolutezero-hover: var(--va-blue-dark);
--color-absolutezero-active: var(--va-blue-darker);
--color-sunglow: var(--va-gold-med);
--color-maximumred: var(--va-red-bright);
--color-maximumred: var(--va-red-dark);
--color-lightninggreen: var(--va-green);
--color-lightgray: var(--va-gray-lighter);
--color-whitesmoke: var(--va-gray-lightest);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,6 @@
use Drupal\core_event_dispatcher\Event\Theme\ThemeSuggestionsAlterEvent;
use Drupal\core_event_dispatcher\FormHookEvents;
use Drupal\core_event_dispatcher\ThemeHookEvents;
use Drupal\field_event_dispatcher\Event\Field\WidgetSingleElementFormAlterEvent;
use Drupal\field_event_dispatcher\FieldHookEvents;
use Drupal\image\Plugin\Field\FieldWidget\ImageWidget;
use Symfony\Component\EventDispatcher\EventSubscriberInterface;

/**
Expand All @@ -22,27 +19,11 @@ class ThemeEventSubscriber implements EventSubscriberInterface {
*/
public static function getSubscribedEvents(): array {
return [
FieldHookEvents::WIDGET_SINGLE_ELEMENT_FORM_ALTER => 'formWidgetAlter',
FormHookEvents::FORM_ALTER => 'formAlter',
ThemeHookEvents::THEME_SUGGESTIONS_ALTER => 'themeSuggestionsAlter',
];
}

/**
* Widget form alter Event call.
*
* @param \Drupal\field_event_dispatcher\Event\Field\WidgetSingleElementFormAlterEvent $event
* The event.
*/
public function formWidgetAlter(WidgetSingleElementFormAlterEvent $event): void {
$element = &$event->getElement();
$context = $event->getContext();
// If this is an image field type of instance.
if ($context['widget'] instanceof ImageWidget) {
$element['#process'][] = '_va_gov_media_image_field_widget_process';
}
}

/**
* Form alter Event call.
*
Expand Down
78 changes: 78 additions & 0 deletions docroot/modules/custom/va_gov_media/js/alt_text_validation.es6.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
/**
* @file
* Attaches behaviors VA GOv Media module.
*/
(($, Drupal, once, drupalSettings) => {
if (typeof drupalSettings.cvJqueryValidateOptions === "undefined") {
drupalSettings.cvJqueryValidateOptions = {};
}

if (drupalSettings.clientside_validation_jquery.force_validate_on_blur) {
drupalSettings.cvJqueryValidateOptions.onfocusout = (element) => {
// "eager" validation
this.element(element);
};
}

drupalSettings.cvJqueryValidateOptions.rules = {
"image[0][alt]": {
remote: {
url: `${drupalSettings.path.baseUrl}media/validate`,
type: "post",
data: {
value() {
return $("textarea[data-drupal-selector='edit-image-0-alt']").val();
},
},
dataType: "json",
},
},
"media[0][fields][image][0][alt]": {
remote: {
url: `${drupalSettings.path.baseUrl}media/validate`,
type: "post",
data: {
value() {
return $(
"textarea[data-drupal-selector='edit-media-0-fields-image-0-alt']"
).val();
},
},
dataType: "json",
},
},
};

// Add messages with translations from backend.
$.extend(
$.validator.messages,
drupalSettings.clientside_validation_jquery.messages
);

/**
* Attaches jQuery validate behavior to forms.
*
* @type {Drupal~behavior}
*
* @prop {Drupal~behaviorAttach} attach
* Attaches the outline behavior to the right context.
*/
Drupal.behaviors.altTextValidate = {
// eslint-disable-next-line no-unused-vars
attach(context) {
// Allow all modules to update the validate options.
// Example of how to do this is shown below.
$(document).trigger(
"cv-jquery-validate-options-update",
drupalSettings.cvJqueryValidateOptions
);

// Process for all the forms on the page everytime,
// we already use once so we should be good.
once("altTextValidate", "body form").forEach((element) => {
$(element).validate(drupalSettings.cvJqueryValidateOptions);
});
},
};
// eslint-disable-next-line no-undef
})(jQuery, Drupal, once, drupalSettings);
52 changes: 52 additions & 0 deletions docroot/modules/custom/va_gov_media/js/alt_text_validation.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
/**
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/2815083
* @preserve
**/
var _this = this;
(function ($, Drupal, once, drupalSettings) {
if (typeof drupalSettings.cvJqueryValidateOptions === "undefined") {
drupalSettings.cvJqueryValidateOptions = {};
}
if (drupalSettings.clientside_validation_jquery.force_validate_on_blur) {
drupalSettings.cvJqueryValidateOptions.onfocusout = function (element) {
_this.element(element);
};
}
drupalSettings.cvJqueryValidateOptions.rules = {
"image[0][alt]": {
remote: {
url: drupalSettings.path.baseUrl + "media/validate",
type: "post",
data: {
value: function value() {
return $("textarea[data-drupal-selector='edit-image-0-alt']").val();
}
},
dataType: "json"
}
},
"media[0][fields][image][0][alt]": {
remote: {
url: drupalSettings.path.baseUrl + "media/validate",
type: "post",
data: {
value: function value() {
return $("textarea[data-drupal-selector='edit-media-0-fields-image-0-alt']").val();
}
},
dataType: "json"
}
}
};
$.extend($.validator.messages, drupalSettings.clientside_validation_jquery.messages);
Drupal.behaviors.altTextValidate = {
attach: function attach(context) {
$(document).trigger("cv-jquery-validate-options-update", drupalSettings.cvJqueryValidateOptions);
once("altTextValidate", "body form").forEach(function (element) {
$(element).validate(drupalSettings.cvJqueryValidateOptions);
});
}
};
})(jQuery, Drupal, once, drupalSettings);
Loading

0 comments on commit 91d2e1e

Please sign in to comment.