html - How to use aria to handle initially hidden context information

Question

What aria attributes would be suitable for context-sensitive form input help which is hidden by default and shown when the (i) icon is clicked?

E.g.

<div class="form-group">
    <label for="r123">
        Resistance for R-123
        <a class="form-info-link">?</a>
        <div id="r123-info" style="display: none;"><small>
            Enter the resistance in ohms for resistor R-123. You can use standard suffixes like "k" or "M".
        </small></div>
    </label>
    <input type="text" class="form-control" id="r123" name="r123">
</div>
...
<script>
    ...
    $('.form-info-link').on('click', function() {
        let for = $(this).closest('label').attr('for');
        $('#'+for+'-info').toggle();
    });
</script>

I know normally aria-describedby should be used to link the input to the help text, but in this case it is not visible until after clicking the info icon.

Answer 1

等待大神答复