Commit 1b837000 authored by Ben Mullins's avatar Ben Mullins
Browse files

Issue #3222757 by lauriii, Wim Leers, nod_, rachel_norfolk, itmaybejj,... 

Issue #3222757 by lauriii, Wim Leers, nod_, rachel_norfolk, itmaybejj, mgifford, ckrina, andrewmacpherson, solideogloria, Luke.Leber: [drupalImage] Make image alt text required or strongly encouraged
parent 11f0c510

core/modules/ckeditor5/ckeditor5.ckeditor5.yml

+1 −1
Original line number Diff line number Diff line
@@ -431,7 +431,7 @@ ckeditor5_image: 
      - drupalImage.DrupalImage

    config:

      image:

        toolbar: [imageTextAlternative]

        toolbar: [drupalImageAlternativeText]

  drupal:

    label: Image

    library: ckeditor5/drupal.ckeditor5.image

core/modules/ckeditor5/ckeditor5.libraries.yml

+4 −0
Original line number Diff line number Diff line
@@ -50,7 +50,11 @@ drupal.ckeditor5.quickedit-temporary-work-around: 
drupal.ckeditor5.image:

  js:

    js/build/drupalImage.js: { minified: true }

  css:

    theme:

      css/image.css: { }

  dependencies:

    - core/drupal

    - core/ckeditor5

    - core/ckeditor5.image

core/modules/ckeditor5/css/image.css

0 → 100644
+82 −0
Original line number Diff line number Diff line 
/* cspell:ignore switchbutton */



/* https://css-tricks.com/the-raven-technique-one-step-closer-to-container-queries */

.ck .image,

.ck .image-inline {

  --base-size: 100%;

  --breakpoint-wide: 400px;

  --breakpoint-medium: 100px;

  --is-wide: clamp(0px, var(--base-size) - var(--breakpoint-wide), 1px);

  --is-medium: calc(clamp(0px, var(--base-size) - var(--breakpoint-medium), 1px) - var(--is-wide));

  --is-small: calc(1px - (var(--is-medium) + var(--is-wide)));

}



.ck.ck-responsive-form.ck-text-alternative-form--with-decorative-toggle {

  width: auto;

}

.ck.ck-responsive-form .ck.ck-text-alternative-form__decorative-toggle,

.ck.ck-responsive-form .ck.ck-text-alternative-form__decorative-toggle .ck-switchbutton {

  width: 100%;

}



.ck .image,

.ck .image-inline {

  position: relative;

}

.ck .image-alternative-text-missing-wrapper {

  position: absolute;

  right: 10px;

  bottom: 10px;

  overflow: hidden;

  max-width:

    calc(

      (var(--is-small) * 0)

      + (var(--is-medium) * 33)

      + (var(--is-wide) * 999999)

    );

  border-left: calc((var(--is-small) * 0) + (var(--is-medium) * 3) + (var(--is-wide) * 3)) solid #ffd23f;

  border-radius: 2px;

  background: #232429;

  font-size: 14px;

}



.ck figcaption ~ .image-alternative-text-missing-wrapper {

  top: 10px;

  bottom: auto;

}



.ck .image-alternative-text-missing-wrapper .ck.ck-button {

  padding: 12px 12px 12px 8px;

  cursor: pointer;

  color: #fff;

  background: none !important; /* Override background for all states. */

}

.ck .image-alternative-text-missing-wrapper .ck.ck-button:before {

  width: 16px;

  height: 16px;

  padding-right: 8px;

  content: "";

  background: url("../icons/warning.svg") left center no-repeat;

}

.ck .image-alternative-text-missing-wrapper .ck.ck-button:after {

  display: inline-block;

  width: 12px;

  height: 12px;

  padding-left: 2rem;

  content: "";

  background: url("../icons/caret.svg") right center no-repeat;

  font-size: 18px;

  font-weight: bold;

}

.ck .image-alternative-text-missing-wrapper .ck-tooltip {

  display: block;

  overflow: visible;

}

.ck .image-alternative-text-missing-wrapper:hover .ck-tooltip {

  visibility: visible;

  opacity: 1;

}

.ck .image-alternative-text-missing-wrapper:hover .ck-tooltip__text {

  display: block;

  width: 240px;

}

core/modules/ckeditor5/icons/caret.svg

0 → 100644
+1 −0
Original line number Diff line number Diff line 
<svg width="12" height="12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 10.5 8.25 6l-4.5-4.5" stroke="#FFD23F" stroke-width="2"/></svg>

core/modules/ckeditor5/icons/warning.svg

0 → 100644
+1 −0
Original line number Diff line number Diff line 
<svg fill="none" height="16" width="16" xmlns="http://www.w3.org/2000/svg"><g fill="#ffd23f"><path d="M6.5 1h3v9h-3z"/><circle cx="8" cy="13.5" r="1.5"/></g></svg>