Hidden link that screen reader and keyboard only users come across

[srancour]

User Story or Problem Statement

As a screen reader and keyboard only user there is a hidden link that I come across that is labeled as "() " after the "Last Content Release Time" button. When interacted with, it breaks the upper navigation of the site.

Description or Additional Context

This seems to be part of the Environment Indicator Settings.
This is the code block where this exists:

<div class="toolbar-tab">
    <a href="/admin/config/development/environment-indicator" class="toolbar-icon toolbar-icon-environment visually-hidden trigger toolbar-item" id="toolbar-item-environment-indicator" data-toolbar-tray="toolbar-item-environment-indicator-tray" role="button" aria-pressed="false" style="color: rgb(255, 255, 255);">(v0.0.1073) Production</a>
    <div id="toolbar-item-environment-indicator-tray" data-toolbar-tray="toolbar-item-environment-indicator-tray" class="toolbar-tray toolbar-tray-horizontal">
        <nav class="toolbar-lining clearfix" role="navigation" aria-label="Environments menu">
            <h3 class="toolbar-tray-name visually-hidden">Environments menu</h3>
            <a href="/admin/config/development/environment-indicator" class="edit-environments">Configure</a>
        </nav>
    </div>      
</div>

The link has the class visually-hidden which makes it not visible, but still exists in the DOM so keyboard and screen reader users can still interact with it.

Screenshots

Before pressing:

After pressing:

Steps for Implementation

Either this link should be removed if we don't want any users to interact with it, which does seem like the intent, or it should be set to visible for all users to be able to interact with it.

Acceptance Criteria

• The link either works for all users or no users