diff --git a/packages/block-editor/src/components/url-input/index.js b/packages/block-editor/src/components/url-input/index.js
index 900f21fb3eebd0..88562b719802b0 100644
--- a/packages/block-editor/src/components/url-input/index.js
+++ b/packages/block-editor/src/components/url-input/index.js
@@ -226,6 +226,10 @@ class URLInput extends Component {
render() {
const { value = '', autoFocus = true, instanceId, className } = this.props;
const { showSuggestions, suggestions, selectedSuggestion, loading } = this.state;
+
+ const suggestionsListboxId = `block-editor-url-input-suggestions-${ instanceId }`;
+ const suggestionOptionIdPrefix = `block-editor-url-input-suggestion-${ instanceId }`;
+
/* eslint-disable jsx-a11y/no-autofocus */
return (
@@ -242,8 +246,8 @@ class URLInput extends Component {
role="combobox"
aria-expanded={ showSuggestions }
aria-autocomplete="list"
- aria-owns={ `block-editor-url-input-suggestions-${ instanceId }` }
- aria-activedescendant={ selectedSuggestion !== null ? `block-editor-url-input-suggestion-${ instanceId }-${ selectedSuggestion }` : undefined }
+ aria-owns={ suggestionsListboxId }
+ aria-activedescendant={ selectedSuggestion !== null ? `${ suggestionOptionIdPrefix }-${ selectedSuggestion }` : undefined }
ref={ this.inputRef }
/>
@@ -253,7 +257,7 @@ class URLInput extends Component {
@@ -262,7 +266,7 @@ class URLInput extends Component {
key={ suggestion.id }
role="option"
tabIndex="-1"
- id={ `block-editor-url-input-suggestion-${ instanceId }-${ index }` }
+ id={ `${ suggestionOptionIdPrefix }-${ index }` }
ref={ this.bindSuggestionNode( index ) }
className={ classnames( 'editor-url-input__suggestion block-editor-url-input__suggestion', {
'is-selected': index === selectedSuggestion,