Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cover: Add aria-label to fixed and repeated image backgrounds #50990

Merged
merged 20 commits into from
Oct 18, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
151e5ef
Cover: Add aria-label to fixed and repeated backgrounds
carolinan May 26, 2023
169a47a
Update deprecated.js
carolinan May 26, 2023
99ccc06
Update duotone and fixed background fixture
carolinan May 26, 2023
74f3fe0
Add a new fixture for a cover block with fixed background and alterna…
carolinan May 26, 2023
db83e19
Update packages/block-library/src/cover/deprecated.js
carolinan May 29, 2023
c00fad6
Oops: Hide the alt text field for video cover blocks
carolinan May 29, 2023
d20e9f9
Merge branch 'trunk' into update/cover-background-label
carolinan Jun 14, 2023
9feb3cc
Merge branch 'trunk' into update/cover-background-label
carolinan Jun 26, 2023
f684b9a
Merge branch 'trunk' into update/cover-background-label
carolinan Jul 11, 2023
f4ed51d
Merge branch 'trunk' into update/cover-background-label
carolinan Jul 19, 2023
a40f15a
Merge branch 'trunk' into update/cover-background-label
carolinan Aug 7, 2023
f87a8c8
Merge branch 'trunk' into update/cover-background-label
carolinan Sep 12, 2023
59eaff8
Try to fix merge conflicts
carolinan Sep 26, 2023
f2e44d9
Try to fix merge conflicts
carolinan Sep 26, 2023
10ca87c
Merge branch 'trunk' into update/cover-background-label
carolinan Sep 26, 2023
e1f9bf5
Use constants for attributes and supports
carolinan Sep 26, 2023
3e0d411
Merge branch 'trunk' into update/cover-background-label
carolinan Sep 26, 2023
922e087
Merge branch 'trunk' into update/cover-background-label
carolinan Sep 28, 2023
4423166
Merge branch 'trunk' into update/cover-background-label
carolinan Oct 13, 2023
3d8dcf9
Merge branch 'trunk' into update/cover-background-label
carolinan Oct 18, 2023
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 0 additions & 3 deletions packages/block-library/src/cover/block.json
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,6 @@
},
"alt": {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wonder if the name of the attribute is reflective of what it does now :)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe the name could be "accessibleText". I'm not sure that is clearer.

"type": "string",
"source": "attribute",
"selector": "img",
"attribute": "alt",
"default": ""
},
"hasParallax": {
Expand Down
152 changes: 151 additions & 1 deletion packages/block-library/src/cover/deprecated.js
Original file line number Diff line number Diff line change
Expand Up @@ -244,6 +244,156 @@ const v12BlockSupports = {
},
};

// Deprecation for blocks that does not have the aria-label when the image background is fixed or repeated.
const v13 = {
attributes: v12BlockAttributes,
supports: v12BlockSupports,
save( { attributes } ) {
const {
backgroundType,
gradient,
contentPosition,
customGradient,
customOverlayColor,
dimRatio,
focalPoint,
useFeaturedImage,
hasParallax,
isDark,
isRepeated,
overlayColor,
url,
alt,
id,
minHeight: minHeightProp,
minHeightUnit,
tagName: Tag,
} = attributes;
const overlayColorClass = getColorClassName(
'background-color',
overlayColor
);
const gradientClass = __experimentalGetGradientClass( gradient );
const minHeight =
minHeightProp && minHeightUnit
? `${ minHeightProp }${ minHeightUnit }`
: minHeightProp;

const isImageBackground = IMAGE_BACKGROUND_TYPE === backgroundType;
const isVideoBackground = VIDEO_BACKGROUND_TYPE === backgroundType;

const isImgElement = ! ( hasParallax || isRepeated );

const style = {
minHeight: minHeight || undefined,
};

const bgStyle = {
backgroundColor: ! overlayColorClass
? customOverlayColor
: undefined,
background: customGradient ? customGradient : undefined,
};

const objectPosition =
// prettier-ignore
focalPoint && isImgElement
? mediaPosition(focalPoint)
: undefined;

const backgroundImage = url ? `url(${ url })` : undefined;

const backgroundPosition = mediaPosition( focalPoint );

const classes = classnames(
{
'is-light': ! isDark,
'has-parallax': hasParallax,
'is-repeated': isRepeated,
'has-custom-content-position':
! isContentPositionCenter( contentPosition ),
},
getPositionClassName( contentPosition )
);

const imgClasses = classnames(
'wp-block-cover__image-background',
id ? `wp-image-${ id }` : null,
{
'has-parallax': hasParallax,
'is-repeated': isRepeated,
}
);

const gradientValue = gradient || customGradient;

return (
<Tag { ...useBlockProps.save( { className: classes, style } ) }>
<span
aria-hidden="true"
className={ classnames(
'wp-block-cover__background',
overlayColorClass,
dimRatioToClass( dimRatio ),
{
'has-background-dim': dimRatio !== undefined,
// For backwards compatibility. Former versions of the Cover Block applied
// `.wp-block-cover__gradient-background` in the presence of
// media, a gradient and a dim.
'wp-block-cover__gradient-background':
url && gradientValue && dimRatio !== 0,
'has-background-gradient': gradientValue,
[ gradientClass ]: gradientClass,
}
) }
style={ bgStyle }
/>

{ ! useFeaturedImage &&
isImageBackground &&
url &&
( isImgElement ? (
<img
className={ imgClasses }
alt={ alt }
src={ url }
style={ { objectPosition } }
data-object-fit="cover"
data-object-position={ objectPosition }
/>
) : (
<div
role="img"
className={ imgClasses }
style={ { backgroundPosition, backgroundImage } }
/>
) ) }
{ isVideoBackground && url && (
<video
className={ classnames(
'wp-block-cover__video-background',
'intrinsic-ignore'
) }
autoPlay
muted
loop
playsInline
src={ url }
style={ { objectPosition } }
data-object-fit="cover"
data-object-position={ objectPosition }
/>
) }
<div
{ ...useInnerBlocksProps.save( {
className: 'wp-block-cover__inner-container',
} ) }
/>
</Tag>
);
},
};

// Deprecation for blocks to prevent auto overlay color from overriding previously set values.
const v12 = {
attributes: v12BlockAttributes,
Expand Down Expand Up @@ -1673,4 +1823,4 @@ const v1 = {
},
};

export default [ v12, v11, v10, v9, v8, v7, v6, v5, v4, v3, v2, v1 ];
export default [ v13, v12, v11, v10, v9, v8, v7, v6, v5, v4, v3, v2, v1 ];
3 changes: 2 additions & 1 deletion packages/block-library/src/cover/edit/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -534,7 +534,8 @@ function CoverEdit( {
) : (
<div
ref={ mediaElement }
role="img"
role={ alt ? 'img' : undefined }
aria-label={ alt ? alt : undefined }
className={ classnames(
classes,
'wp-block-cover__image-background'
Expand Down
44 changes: 19 additions & 25 deletions packages/block-library/src/cover/edit/inspector-controls.js
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,6 @@ export default function CoverInspectorControls( {
isImageBackground,
mediaElement,
url,
isImgElement,
overlayColor,
} = currentSettings;

Expand Down Expand Up @@ -202,32 +201,27 @@ export default function CoverInspectorControls( {
}
/>
) }
{ ! useFeaturedImage &&
url &&
isImageBackground &&
isImgElement && (
<TextareaControl
__nextHasNoMarginBottom
label={ __( 'Alternative text' ) }
value={ alt }
onChange={ ( newAlt ) =>
setAttributes( { alt: newAlt } )
}
help={
<>
<ExternalLink href="https://www.w3.org/WAI/tutorials/images/decision-tree">
{ __(
'Describe the purpose of the image.'
) }
</ExternalLink>
<br />
{ ! useFeaturedImage && url && ! isVideoBackground && (
<TextareaControl
__nextHasNoMarginBottom
label={ __( 'Alternative text' ) }
value={ alt }
onChange={ ( newAlt ) =>
setAttributes( { alt: newAlt } )
}
help={
<>
<ExternalLink href="https://www.w3.org/WAI/tutorials/images/decision-tree">
{ __(
'Leave empty if decorative.'
'Describe the purpose of the image.'
) }
</>
}
/>
) }
</ExternalLink>
<br />
{ __( 'Leave empty if decorative.' ) }
</>
}
/>
) }
<PanelRow>
<Button
variant="secondary"
Expand Down
3 changes: 2 additions & 1 deletion packages/block-library/src/cover/save.js
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,8 @@ export default function save( { attributes } ) {
/>
) : (
<div
role="img"
role={ alt ? 'img' : undefined }
aria-label={ alt ? alt : undefined }
className={ imgClasses }
style={ { backgroundPosition, backgroundImage } }
/>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<!-- wp:cover {"url":"https://w.wiki/59So","id":612,"alt":"Custom alt text","hasParallax":true,"dimRatio":50,"isDark":false,"layout":{"type":"constrained"}} -->
<div class="wp-block-cover is-light has-parallax"><span aria-hidden="true" class="wp-block-cover__background has-background-dim"></span><div role="img" aria-label="Custom alt text" class="wp-block-cover__image-background wp-image-612 has-parallax" style="background-position:50% 50%;background-image:url(https://w.wiki/59So)"></div><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size"></p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
[
{
"name": "core/cover",
"isValid": true,
"attributes": {
"url": "https://w.wiki/59So",
"useFeaturedImage": false,
"id": 612,
"alt": "Custom alt text",
"hasParallax": true,
"isRepeated": false,
"dimRatio": 50,
"backgroundType": "image",
"isDark": false,
"tagName": "div",
"layout": {
"type": "constrained"
}
},
"innerBlocks": [
{
"name": "core/paragraph",
"isValid": true,
"attributes": {
"align": "center",
"content": "",
"dropCap": false,
"placeholder": "Write title…",
"fontSize": "large"
},
"innerBlocks": []
}
]
}
]
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
[
{
"blockName": "core/cover",
"attrs": {
"url": "https://w.wiki/59So",
"id": 612,
"alt": "Custom alt text",
"hasParallax": true,
"dimRatio": 50,
"isDark": false,
"layout": {
"type": "constrained"
}
},
"innerBlocks": [
{
"blockName": "core/paragraph",
"attrs": {
"align": "center",
"placeholder": "Write title…",
"fontSize": "large"
},
"innerBlocks": [],
"innerHTML": "\n<p class=\"has-text-align-center has-large-font-size\"></p>\n",
"innerContent": [
"\n<p class=\"has-text-align-center has-large-font-size\"></p>\n"
]
}
],
"innerHTML": "\n<div class=\"wp-block-cover is-light has-parallax\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim\"></span><div role=\"img\" aria-label=\"Custom alt text\" class=\"wp-block-cover__image-background wp-image-612 has-parallax\" style=\"background-position:50% 50%;background-image:url(https://w.wiki/59So)\"></div><div class=\"wp-block-cover__inner-container\"></div></div>\n",
"innerContent": [
"\n<div class=\"wp-block-cover is-light has-parallax\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim\"></span><div role=\"img\" aria-label=\"Custom alt text\" class=\"wp-block-cover__image-background wp-image-612 has-parallax\" style=\"background-position:50% 50%;background-image:url(https://w.wiki/59So)\"></div><div class=\"wp-block-cover__inner-container\">",
null,
"</div></div>\n"
]
}
]
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<!-- wp:cover {"url":"https://w.wiki/59So","id":612,"alt":"Custom alt text","hasParallax":true,"dimRatio":50,"isDark":false,"layout":{"type":"constrained"}} -->
<div class="wp-block-cover is-light has-parallax"><span aria-hidden="true" class="wp-block-cover__background has-background-dim"></span><div role="img" aria-label="Custom alt text" class="wp-block-cover__image-background wp-image-612 has-parallax" style="background-position:50% 50%;background-image:url(https://w.wiki/59So)"></div><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size"></p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!-- wp:cover {"url":"https://w.wiki/59So","id":612,"hasParallax":true,"isRepeated":true,"dimRatio":10,"isDark":false,"style":{"color":{"duotone":["#8c00b7","#fcff41"]}}} -->
<div class="wp-block-cover is-light has-parallax is-repeated"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-10 has-background-dim"></span><div role="img" class="wp-block-cover__image-background wp-image-612 has-parallax is-repeated" style="background-position:50% 50%;background-image:url(https://w.wiki/59So)"></div><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<div class="wp-block-cover is-light has-parallax is-repeated"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-10 has-background-dim"></span><div class="wp-block-cover__image-background wp-image-612 has-parallax is-repeated" style="background-position:50% 50%;background-image:url(https://w.wiki/59So)"></div><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size"></p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->
Original file line number Diff line number Diff line change
Expand Up @@ -29,9 +29,9 @@
]
}
],
"innerHTML": "\n<div class=\"wp-block-cover is-light has-parallax is-repeated\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim-10 has-background-dim\"></span><div role=\"img\" class=\"wp-block-cover__image-background wp-image-612 has-parallax is-repeated\" style=\"background-position:50% 50%;background-image:url(https://w.wiki/59So)\"></div><div class=\"wp-block-cover__inner-container\"></div></div>\n ",
"innerHTML": "\n<div class=\"wp-block-cover is-light has-parallax is-repeated\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim-10 has-background-dim\"></span><div class=\"wp-block-cover__image-background wp-image-612 has-parallax is-repeated\" style=\"background-position:50% 50%;background-image:url(https://w.wiki/59So)\"></div><div class=\"wp-block-cover__inner-container\"></div></div>\n ",
"innerContent": [
"\n<div class=\"wp-block-cover is-light has-parallax is-repeated\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim-10 has-background-dim\"></span><div role=\"img\" class=\"wp-block-cover__image-background wp-image-612 has-parallax is-repeated\" style=\"background-position:50% 50%;background-image:url(https://w.wiki/59So)\"></div><div class=\"wp-block-cover__inner-container\">",
"\n<div class=\"wp-block-cover is-light has-parallax is-repeated\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim-10 has-background-dim\"></span><div class=\"wp-block-cover__image-background wp-image-612 has-parallax is-repeated\" style=\"background-position:50% 50%;background-image:url(https://w.wiki/59So)\"></div><div class=\"wp-block-cover__inner-container\">",
null,
"</div></div>\n "
]
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!-- wp:cover {"url":"https://w.wiki/59So","id":612,"hasParallax":true,"isRepeated":true,"dimRatio":10,"isDark":false,"style":{"color":{"duotone":["#8c00b7","#fcff41"]}}} -->
<div class="wp-block-cover is-light has-parallax is-repeated"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-10 has-background-dim"></span><div role="img" class="wp-block-cover__image-background wp-image-612 has-parallax is-repeated" style="background-position:50% 50%;background-image:url(https://w.wiki/59So)"></div><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<div class="wp-block-cover is-light has-parallax is-repeated"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-10 has-background-dim"></span><div class="wp-block-cover__image-background wp-image-612 has-parallax is-repeated" style="background-position:50% 50%;background-image:url(https://w.wiki/59So)"></div><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size"></p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->
Loading