A11Y | A hidden button element with collapsed state is available in the header section - on activating the button an undefined input field and two unlabeled buttons appears on the top of the page.

[hilcurtis]

ID
1847345115

Violation
Provide a valid label for form fields

Module Name
03a Header Menu - Top Row

Description
[Issue]
A hidden button element with collapsed state available in the header section on activating the button an undefined input field and two unlabeled buttons appears on the top of the page.

[User Impact]
When buttons do not explicitly include a label, assistive technologies may incorrectly render the label or provide no label at all to users. When labels are not present or are incorrect, users of assistive technologies may not be able to complete an action.

[Code Reference]

<input class="esri-header-inline-title-input" id="esri-header-inline-title-input" aria-labelledby="esri-header-inline-title-input">

<button class="esri-header-inline-title-action-button esri-header-inline-title-submit-button" aria-labelledby="esri-header-inline-title-action-button"><span class=""><svg...></svg></span></button>

<button class="esri-header-inline-title-action-button esri-header-inline-title-dismiss-button" aria-labelledby="esri-header-inline-title-action-button"><span class=""><svg ..></svg></span></button>	

Note
[Recommendation]
Currently the purpose of this button and these controls is not clear as per the UI.
There are two scenarios for this controls, the first one if it appears on the screen within certain condition it must be visual and should posses a valid programmatic label. In second case while it is hidden from all user, developer should use a display="none" property or otherwise this button should be removed from the DOM.

Developer must provide valid accessible label to input field, right mark icon button and (x)cancel icon button. The aria-labelledby is present on each button element and input element however there is no valid associated text label to their ids.