Add aria-describedby if image has no alt but has caption #43059
Closed
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Size Change: +264 B (0%) Total Size: 1.41 MB
ℹ️ View Unchanged
|
skorasaurus
added
the
[Focus] Accessibility (a11y)
|
I am not able to update the snapshots, I keep getting this error: I am using wp-env. |
|
@carolinan Cannot say when, but I will try to jump in and help with this soon. |
|
@carolinan The code looks good to me. Can you tell me from logs which snapshots need to be updated and I can update those? Parsing some of the output from these failing tests can be tricky. 😞 |
|
The native tests are failing. |
|
@carolinan I refreshed the snapshot but tests still failing. Maybe further adjustments needed? If not, maybe test is flaky and just needs running a little more? This branch was super far behind trunk, that could have been part of the problem. It would not update for me at first either. |
|
@dcalhoun Hi, I am struggling with making the HTML attribute changes in this pull request pass the native E2E tests. I think I am only making it worse with each PR 😬 . Who is the best person to reach out to for help? |
dcalhoun
reviewed
Oct 27, 2022
There was a problem hiding this comment.
@dcalhoun Hi, I am struggling with making the HTML attribute changes in this pull request pass the native E2E tests. I think I am only making it worse with each PR 😬 . Who is the best person to reach out to for help?
Hey @carolinan. 👋🏻 Thanks for taking the time to address the failures and reaching out.
The CI logs showcase the e2e testing device timing out. From debugging this locally, it appears the sheer number of block validation errors and subsequent transforms caused the device to become unresponsive. Obviously, such device freeze should not happen regardless the number of validation errors, but that is an issue outside the scope of this PR. 😄
To address the issue for this PR, we should update the packages/react-native-editor/src/initial-html.js file so that the fixture data matches the updated block structure. This will prevent block validation errors from occurring.
Patch Updating the native Demo editor fixtures
diff --git a/packages/react-native-editor/src/initial-html.js b/packages/react-native-editor/src/initial-html.js
index ddea8594b7..151ad50461 100644
--- a/packages/react-native-editor/src/initial-html.js
+++ b/packages/react-native-editor/src/initial-html.js
@@ -59,8 +59,8 @@ else:
<figure class="wp-block-image"><img alt=""/></figure>
<!-- /wp:image -->
-<!-- wp:image -->
-<figure class="wp-block-image"><img src="https://cldup.com/cXyG__fTLN.jpg" alt=""/><figcaption class="wp-element-caption">Mountain</figcaption></figure>
+<!-- wp:image {"id":1,"sizeSlug":"large"} -->
+<figure class="wp-block-image size-large"><img class="wp-image-1" src="https://cldup.com/cXyG__fTLN.jpg" alt="" aria-describedby="wp-image-caption-1"/><figcaption class="wp-element-caption" id="wp-image-caption-1">Mountain</figcaption></figure>
<!-- /wp:image -->
<!-- wp:video {"id":683} -->
@@ -81,67 +81,67 @@ else:
<!-- wp:gallery {"columns":8,"linkTo":"none","className":"alignfull"} -->
<figure class="wp-block-gallery has-nested-images columns-8 is-cropped alignfull"><!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
-<figure class="wp-block-image size-large"><img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon.png" alt=""/><figcaption class="wp-element-caption">Paragraph</figcaption></figure>
+<figure class="wp-block-image size-large"><img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon.png" alt="" aria-describedby="wp-image-caption-undefined"/><figcaption class="wp-element-caption" id="wp-image-caption-undefined">Paragraph</figcaption></figure>
<!-- /wp:image -->
<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
-<figure class="wp-block-image size-large"><img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon-Heading.png" alt=""/><figcaption class="wp-element-caption">Heading</figcaption></figure>
+<figure class="wp-block-image size-large"><img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon-Heading.png" alt="" aria-describedby="wp-image-caption-undefined"/><figcaption class="wp-element-caption" id="wp-image-caption-undefined">Heading</figcaption></figure>
<!-- /wp:image -->
<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
-<figure class="wp-block-image size-large"><img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon-Subheading.png" alt=""/><figcaption class="wp-element-caption">Subheading</figcaption></figure>
+<figure class="wp-block-image size-large"><img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon-Subheading.png" alt="" aria-describedby="wp-image-caption-undefined"/><figcaption class="wp-element-caption" id="wp-image-caption-undefined">Subheading</figcaption></figure>
<!-- /wp:image -->
<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
-<figure class="wp-block-image size-large"><img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon-Quote.png" alt=""/><figcaption class="wp-element-caption">Quote</figcaption></figure>
+<figure class="wp-block-image size-large"><img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon-Quote.png" alt="" aria-describedby="wp-image-caption-undefined"/><figcaption class="wp-element-caption" id="wp-image-caption-undefined">Quote</figcaption></figure>
<!-- /wp:image -->
<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
-<figure class="wp-block-image size-large"><img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon-Image.png" alt=""/><figcaption class="wp-element-caption">Image</figcaption></figure>
+<figure class="wp-block-image size-large"><img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon-Image.png" alt="" aria-describedby="wp-image-caption-undefined"/><figcaption class="wp-element-caption" id="wp-image-caption-undefined">Image</figcaption></figure>
<!-- /wp:image -->
<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
-<figure class="wp-block-image size-large"><img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon-Gallery.png" alt=""/><figcaption class="wp-element-caption">Gallery</figcaption></figure>
+<figure class="wp-block-image size-large"><img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon-Gallery.png" alt="" aria-describedby="wp-image-caption-undefined"/><figcaption class="wp-element-caption" id="wp-image-caption-undefined">Gallery</figcaption></figure>
<!-- /wp:image -->
<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
-<figure class="wp-block-image size-large"><img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon-Cover-Image.png" alt=""/><figcaption class="wp-element-caption">Cover Image</figcaption></figure>
+<figure class="wp-block-image size-large"><img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon-Cover-Image.png" alt="" aria-describedby="wp-image-caption-undefined"/><figcaption class="wp-element-caption" id="wp-image-caption-undefined">Cover Image</figcaption></figure>
<!-- /wp:image -->
<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
-<figure class="wp-block-image size-large"><img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon-Video.png" alt=""/><figcaption class="wp-element-caption">Video</figcaption></figure>
+<figure class="wp-block-image size-large"><img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon-Video.png" alt="" aria-describedby="wp-image-caption-undefined"/><figcaption class="wp-element-caption" id="wp-image-caption-undefined">Video</figcaption></figure>
<!-- /wp:image -->
<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
-<figure class="wp-block-image size-large"><img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon-Audio.png" alt=""/><figcaption class="wp-element-caption">Audio</figcaption></figure>
+<figure class="wp-block-image size-large"><img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon-Audio.png" alt="" aria-describedby="wp-image-caption-undefined"/><figcaption class="wp-element-caption" id="wp-image-caption-undefined">Audio</figcaption></figure>
<!-- /wp:image -->
<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
-<figure class="wp-block-image size-large"><img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon-Column.png" alt=""/><figcaption class="wp-element-caption">Columns</figcaption></figure>
+<figure class="wp-block-image size-large"><img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon-Column.png" alt="" aria-describedby="wp-image-caption-undefined"/><figcaption class="wp-element-caption" id="wp-image-caption-undefined">Columns</figcaption></figure>
<!-- /wp:image -->
<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
-<figure class="wp-block-image size-large"><img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon-File.png" alt=""/><figcaption class="wp-element-caption">File</figcaption></figure>
+<figure class="wp-block-image size-large"><img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon-File.png" alt="" aria-describedby="wp-image-caption-undefined"/><figcaption class="wp-element-caption" id="wp-image-caption-undefined">File</figcaption></figure>
<!-- /wp:image -->
<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
-<figure class="wp-block-image size-large"><img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon-Code.png" alt=""/><figcaption class="wp-element-caption">Code</figcaption></figure>
+<figure class="wp-block-image size-large"><img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon-Code.png" alt="" aria-describedby="wp-image-caption-undefined"/><figcaption class="wp-element-caption" id="wp-image-caption-undefined">Code</figcaption></figure>
<!-- /wp:image -->
<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
-<figure class="wp-block-image size-large"><img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon-List.png" alt=""/><figcaption class="wp-element-caption">List</figcaption></figure>
+<figure class="wp-block-image size-large"><img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon-List.png" alt="" aria-describedby="wp-image-caption-undefined"/><figcaption class="wp-element-caption" id="wp-image-caption-undefined">List</figcaption></figure>
<!-- /wp:image -->
<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
-<figure class="wp-block-image size-large"><img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon-Button.png" alt=""/><figcaption class="wp-element-caption">Button</figcaption></figure>
+<figure class="wp-block-image size-large"><img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon-Button.png" alt="" aria-describedby="wp-image-caption-undefined"/><figcaption class="wp-element-caption" id="wp-image-caption-undefined">Button</figcaption></figure>
<!-- /wp:image -->
<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
-<figure class="wp-block-image size-large"><img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon-Embeds.png" alt=""/><figcaption class="wp-element-caption">Embeds</figcaption></figure>
+<figure class="wp-block-image size-large"><img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon-Embeds.png" alt="" aria-describedby="wp-image-caption-undefined"/><figcaption class="wp-element-caption" id="wp-image-caption-undefined">Embeds</figcaption></figure>
<!-- /wp:image -->
<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
-<figure class="wp-block-image size-large"><img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon-More.png" alt=""/><figcaption class="wp-element-caption">More</figcaption></figure>
+<figure class="wp-block-image size-large"><img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon-More.png" alt="" aria-describedby="wp-image-caption-undefined"/><figcaption class="wp-element-caption" id="wp-image-caption-undefined">More</figcaption></figure>
<!-- /wp:image --></figure>
<!-- /wp:gallery -->
Also, I left one comment regarding contexts where id would not be defined for Image blocks. If we modify the way we manage that context, we would need to update the native Demo editor fixtures to match the modification.
Hope this helps!
|
Deprecated.js
Migration: Not used. Fixtures
Snapshots
|
There was a problem hiding this comment.
Thanks for continuing on this PR @carolinan 👍
It looks like it is pretty close, just a couple of minor things to fix up.
- The supports definition in the new deprecation doesn't match the supports on trunk
- There's a conflict in the index.php after the recent Image updates to support the interactivity API and lightbox behaviour.
✅ Deprecation's attributes, and save function, match trunk
✅ Fixtures look good and fixture tests pass
✅ Old image blocks with caption but no alt migrate correctly in the editor
✅ Deprecated image blocks still render correctly on the frontend
✅ New image blocks behave as expected
Comment on lines
178
to
197
| supports: { | ||
| anchor: true, | ||
| color: { | ||
| __experimentalDuotone: 'img, .components-placeholder', | ||
| text: false, | ||
| background: false, | ||
| }, | ||
| __experimentalBorder: { | ||
| color: true, | ||
| radius: true, | ||
| width: true, | ||
| __experimentalSelector: 'img, .wp-block-image__crop-area', | ||
| __experimentalSkipSerialization: true, | ||
| __experimentalDefaultControls: { | ||
| color: true, | ||
| radius: true, | ||
| width: true, | ||
| }, | ||
| }, | ||
| }, |
There was a problem hiding this comment.
These supports don't match those currently in the Image block.json on trunk.
The __experimentalSelector I don't think is critical but the duotone support was stabilized under filter.duotone. This should probably match that.
|
@artemiomorales Hi! I am going to need your help with reimplementing this accessibility bug fix, after the introduction of the lightbox. |
|
Hey @carolinan! Thanks for reaching out. I started taking a look at this but have been diverted to resolve outstanding bugs on the lightbox, and am hoping to get back to this as soon as I can. I see that the translation issues have been fixed, and in my testing so far, I see that the captions are indeed announced by default using NVDA on Windows but not using VoiceOver on Mac. Which screen reader were you testing with? In any case, do you still need my assistance on this? I'm thinking I'd have bandwidth for this likely next week. |
69 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
What?
If an image block has no alt text but has a caption, use the caption to describe the image.
If the image is linked but has no alt text, use the caption to describe the link.
Fixes #42057
Why?
To add context to the image and link when alt text is missing.
How?
Uses the image id to create an id that is added the caption. This could be improved since it is not truly unique.
The id is then used with the aria-describedby that is placed on the href and the image.
Alternatives:
Testing Instructions
View the source to confirm that:
Also view the front and confirm that the attributes are correct.
Please test the linked image with a screen reader and confirm that the caption is announced when you navigate to the link.
On one block, add an alt text and confirm that the ID and aria-describedby attributes are not present.
On the second block, (which does not have an alt text) remove the caption and confirm that the ID and aria-describedby attributes are not present.
Screenshots or screencast