[Resolved] Dynamic link not accessible

[Kev]

Hi folks,

On my homepage I have links to posts, which have been created using GenerateBlocks. I have a container, with a headline and the date inside. I use the dynamic link option on the container so that the hover effect and link works anywhere within the container. This is so readers can click anywhere in the container, rather than requiring them to click the title text.

This is all well and good and working perfectly, however, this introduces an accessibility issue as the links have no discernible name. The generated HTML on the div looks something like this:

<a class="gb-container-link" href="https://example.com/my-post">

Is there a way I can use dynamic linking to add something like a title or aria label to the links that contains the post title?

Thanks,

Kev

[Kev]

Added website admin details.

[Fernando]

Hi Kev,

It’s possible.

First, add class add-aria-label to the class list of the Container Block.

Then, in the advance section of the Container Block settings, add a custom attribute – aria-label. Set it to ariareplace.

Then, add this PHP:

add_filter( 'render_block', function( $block_content, $block ) {
    if ( !is_admin() && ! empty( $block['attrs']['className'] ) && strpos( $block['attrs']['className'], 'add-aria-label' ) !== false ) {
		$myreplace1 = 'ariareplace';
		$myinsert1 = get_the_title();
        $block_content = str_replace( $myreplace1, $myinsert1 , $block_content );
    }

    return $block_content;
}, 10, 2 );

Adding PHP reference: https://docs.generatepress.com/article/adding-php/#code-snippets

[Kev]

That worked perfect. Thanks Fernando.

[Fernando]

You’re welcome Kev!

[Author]

Posts