Accessibility in verification form: label associations are broken

[lukaw3d]

Labels and inputs in contract verification form are not associated correctly.

For example https://blockscout.com/eth/mainnet/address/0xcDA72070E455bb31C7690a170224Ce43623d0B6f/verify-via-flattened-code/new at least these elements reference elements that don't exist:

<input aria-describedby="contract-name-help-block" ..>
<label for="smart_contract_Include nightly builds">Include nightly builds</label>
<label class="radio-text" for="nightly_builds_false">No</label>
<label for="evm_version_evm_version">EVM Version</label>
<label for="smart_contract_Optimization">Optimization</label>
<label for="smart_contract_name">Optimization runs</label> <!-- in this case element exists, but it's wrong -->
<label for="external_libraries_library1">Library 1 Name</label>

Environment

• Deployment type (Manual/Docker/Docker-compose):
• Elixir & Erlang/OTP versions (elixir -version):
• Node JS version (node -v):
• Operating System:
• Blockscout Version/branch/commit: v4.1.8-beta
• Archive node type && version (Erigon/Geth/Nethermind/Ganache/?):

Steps to reproduce

Open https://blockscout.com/eth/mainnet/address/0xcDA72070E455bb31C7690a170224Ce43623d0B6f/verify-via-flattened-code/new and click on various input labels.

Expected behaviour

Referenced elements should exist and clicking on input labels should focus the associated input.

Actual behaviour

"Optimization runs" label references contract name input. Some other labels reference elements that don't exist

[vbaranov]

@lukaw3d nice catch. We will take care of that.