Skip to content

Fix a11y of descriptions and alerts for "Invalid" Nav Items #73177

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.

Sign up for GitHub

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

Merged
merged 7 commits into from
Nov 13, 2025
Merged

Fix a11y of descriptions and alerts for "Invalid" Nav Items #73177

Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
b06fca8
Update error help text
jeryj Nov 11, 2025
8e8a7fe
Remove live region attributes from MissingEntityHelpText
jeryj Nov 11, 2025
2bacf0b
WIP: Add descriptions to on canvas blocks for errors
jeryj Nov 11, 2025
0afa4a2
Only use unsynced text for description error on canvas
jeryj Nov 11, 2025
74f9d4c
Don't change string
jeryj Nov 12, 2025
ac4e721
Revert to minimal changeset
jeryj Nov 12, 2025
a227ee4
Use component version of MissingEntityHelpText
jeryj Nov 12, 2025
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
Prev Previous commit
Next Next commit
Only use unsynced text for description error on canvas
  • Loading branch information
@jeryj
jeryj committed Nov 11, 2025
commit 0afa4a2813132fb3184ef32a964747d83cae5454
63 changes: 10 additions & 53 deletions packages/block-library/src/navigation-link/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,13 +26,7 @@ import {
useBlockEditingMode,
} from '@wordpress/block-editor';
import { isURL, prependHTTP } from '@wordpress/url';
import {
useState,
useEffect,
useRef,
useCallback,
useMemo,
} from '@wordpress/element';
import { useState, useEffect, useRef, useCallback } from '@wordpress/element';
import { decodeEntities } from '@wordpress/html-entities';
import { link as linkIcon, addSubmenu } from '@wordpress/icons';
import { store as coreStore } from '@wordpress/core-data';
Expand All @@ -48,7 +42,6 @@ import {
updateAttributes,
useEntityBinding,
MissingEntityHelpText,
BindingHelpText,
} from './shared';

const DEFAULT_BLOCK = { name: 'core/navigation-link' };
Expand Down Expand Up @@ -426,44 +419,11 @@ export default function NavigationLinkEdit( {
/* translators: Whether the navigation link is Invalid or a Draft. */
const errorText = getErrorText();

// Generate screen reader description for block states
const navigationLinkDescription = useMemo( () => {
if ( isBoundEntityAvailable ) {
return BindingHelpText( { type, kind } );
}

// Handle missing URL states (informational, not an error)
if ( hasUrlBinding && ! isBoundEntityAvailable ) {
return MissingEntityHelpText( { type, kind } );
}

if ( ! url && ! metadata?.bindings?.url ) {
return missingText;
}

// Generic error text for draft or invalid links
if ( isDraft || isInvalid ) {
return getErrorText();
}

return null;
}, [
type,
kind,
metadata?.bindings?.url,
missingText,
url,
isBoundEntityAvailable,
isInvalid,
isDraft,
getErrorText,
hasUrlBinding,
] );
const instanceId = useInstanceId( NavigationLinkEdit );
const navigationLinkDescriptionId = sprintf(
'navigation-link-edit-%d-desc',
instanceId
);
const hasMissingEntity = hasUrlBinding && ! isBoundEntityAvailable;
const missingEntityDescriptionId = hasMissingEntity
? sprintf( 'navigation-link-edit-%d-desc', instanceId )
: undefined;

const blockProps = useBlockProps( {
ref: useMergeRefs( [ setPopoverAnchor, listItemRef ] ),
Expand All @@ -478,11 +438,8 @@ export default function NavigationLinkEdit( {
[ getColorClassName( 'background-color', backgroundColor ) ]:
!! backgroundColor,
} ),
'aria-describedby': navigationLinkDescription
? navigationLinkDescriptionId
: undefined,
'aria-invalid':
isInvalid || ( hasUrlBinding && ! isBoundEntityAvailable ),
'aria-describedby': missingEntityDescriptionId,
'aria-invalid': hasMissingEntity,
style: {
color: ! textColor && customTextColor,
backgroundColor: ! backgroundColor && customBackgroundColor,
Expand Down Expand Up @@ -552,9 +509,9 @@ export default function NavigationLinkEdit( {
/>
</InspectorControls>
<div { ...blockProps }>
{ navigationLinkDescription && (
<VisuallyHidden id={ navigationLinkDescriptionId }>
{ navigationLinkDescription }
{ hasMissingEntity && (
<VisuallyHidden id={ missingEntityDescriptionId }>
<MissingEntityHelpText type={ type } kind={ kind } />
</VisuallyHidden>
) }
{ /* eslint-disable jsx-a11y/anchor-is-valid */ }
Expand Down
Loading