Insert post navigation links as two links inside a <nav> element

[carolinan]

What problem does this address?

The post navigation link block: AKA the next and previous post links for single posts, can be difficult for users to insert correctly, because you need to add two copies of the block and then change one of the variations.

For the next and previous navigation to be as accessible as possible, both blocks needs to be placed inside a <nav> element.
While the user can place the blocks inside a group, the group does not have an interface for changing the element from a <div> to a <nav>. It can only be done by changing the code in the code editor. This limitation was created on purpose because you need advanced knowledge of when to use the <nav> to not cause unintended accessibility problems.

You can compare this with inserting the query pagination block. This block already uses a nav, and the three inner blocks are placed together: Next page, the paginated links, and previous page.

What is your proposed solution?

Instead of the inserter adding the individual next and previous links, it should prioritise a pattern where both blocks are placed in a way that ensures accessible markup.

In the example pattern below, note that besides the <nav> element, a unique, identifying aria label is added to the group:

<?php
/**
 * Title: Post navigation
 * slug: twentytwentyfour/post-navigation
 * inserter: no
 */
?>

<!-- wp:group {"tagName":"nav","ariaLabel":"<?php esc_attr_e( 'Posts', 'twentytwentyfour' ); ?>","style":{"spacing":{"padding":{"bottom":"0vh"}}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
<nav class="wp-block-group" style="padding-bottom:0vh" aria-label="<?php esc_attr_e( 'Posts', 'twentytwentyfour' ); ?>">
<!-- wp:post-navigation-link {"type":"previous","label":"<?php echo esc_html_x( 'Previous: ', 'Label before the title of the previous post. There is a space after the colon.', 'twentytwentyfour' ); ?>","showTitle":true,"linkLabel":true,"arrow":"arrow"} /-->
<!-- wp:post-navigation-link {"label":"<?php echo esc_html_x( 'Next: ', 'Label before the title of the next post. There is a space after the colon.', 'twentytwentyfour' ); ?>","showTitle":true,"linkLabel":true,"arrow":"arrow"} /-->
</nav>
<!-- /wp:group -->