[4.x] Tinmyce image decorative [a11y] #31389
Merged
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR enables the native tinymce feature to mark an image as decorative. This continues the work started in #31318 and #31323
Background
To read why this change is very important see #31318
Testing Part 1
Testing is really easy. No npm, js or css involved.
![image](https://user-images.githubusercontent.com/1296369/98956105-8dd4fd00-24f7-11eb-87ce-797a788e3039.png)
Merge the pull request and then use the tinmyce image button to add an image
The new options is highlighted here
![image](https://user-images.githubusercontent.com/1296369/98956232-b0671600-24f7-11eb-9a90-c7aae70bb323.png)
Testing Part 2
Please test three scenarios
Image Description (Alt Text) = Empty
Images is decorative = unchecked
Image Description (Alt Text) = "some description"
Images is decorative = unchecked
Image Description (Alt Text) = Empty
Images is decorative = checked
The expected behaviour for each of these tests is
1.
<img src="filename.jpg" width="xx" height="xx" />
2.
<img src="filename.jpg" alt="some description" width="xx" height="xx" />
3.
<img role="presentation" src="filename.jpg" alt width="xx" height="xx" />
3.
<img role="presentation" src="filename.jpg" alt="" width="xx" height="xx" />
PLEASE do not comment on what you think the code does but apply the PR and test it. Getting very tired of people blocking PR with their comments without actually testing the code.
Bonus
I have grouped the three image options together in the code.
cc @carcam