Dear mdb team,

today we found a rather severe accessibilty issue concerning material select labels https://mdbootstrap.com/docs/standard/forms/select/#section-select-with-label

The way select-labels are currently implemented does not work, they throw accessibilty errors.

Please kindly refer to my code example for details!

<div class="w-100">
    /* 
        Field label should be placed on top of the referred element! 
        This is my attempt for an additional fake label with class "sr-only". 
        It contains a "for"-attribute, which unfortunately points to a hidden <select> and thus does not work
    */          
    <label class="form-label select-label sr-only label-one" for="edit-titel">
        Academic Title 
    </label>

    <div id="select-wrapper-edit-titel" class="select-wrapper">
        <div class="form-outline">

            /*  This is the relevant, injected input. 
                It gets no ID, thus cannot be addressed by the "label for..." 
            */
            <input class="form-control select-input" readonly="readonly" type="text" />

            /*  This is the label, that mdb requires to do its magic. 
                For a11y it should be prefixed to the input field, but for mdb it has to be suffixed. It contains no "for"-attribute 
            */
            <label class="form-label select-label label-two active" style="margin-left: 0px;">
                Titel
            </label>


            /*
                This could need some ARIA to tell the screenreader what it stands for
            */
            <span class="select-clear-btn" style="display: block;" tabindex="0">
                ✕
            </span>


            <div class="form-notch">
                &nbsp;
            </div>
            <div class="form-label select-fake-value active">
                - Not selected -
            </div>
        </div>


        /* 
            This is my original markup. It has an ID which does not get transferred to the injected "<input>"-element
        */
        <select id="edit-titel" class="form-select select select-initialized" name="titel" data-mdb-filter="true" data-mdb-clear-button="true" data-mdb-visible-options="8" data-mdb-select-init>


            <option selected="selected" value="">
                - Not selected -
            </option>
            <option value="Bc.">
                Bc.
            </option>
            <option value="DI">
                DI
            </option>
            <option value="Dipl.-Ing.">
                Dipl.-Ing.
            </option>
            <option value="Dr.">
                Dr.
            </option>
        </select>
    </div>
</div>