Topic: Material select accessibility issue

webshapers priority asked 3 months ago


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>

Grzegorz Bujański staff commented 2 months ago

Thanks for reporting. We will check how we can solve this issue and we will fix it.


webshapers priority commented 2 months ago

Thank you, @Grzegorz! Maybe this could be helpful: https://www.freecodecamp.org/news/how-to-build-an-accessible-custom-dropdown-select-element/#enhancing-screen-reader-functionality



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Opened

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: Yes