Issue
Hello i can't figure out how to manage this fields to fix the issue ARIA input fields do not have accessible names. When i test website it shows me this fields. Any advices?
<div class="form-group col-lg-3 col-md-6 col-sm-12">
<select class="custom-select-box select2 " name="mainCatID" id="category">
<option value="">@lang('language.HEADING_SELECT_CATEGORY')</option>
@foreach ($RecipeMainCategory as $val)
<option value="{{ base64_encode(base64_encode($val->id)) }}">
{{ $val->category_name }}</option>
@endforeach
</select>
</div>
<div class="form-group col-lg-3 col-md-6 col-sm-12">
<select class="custom-select-box select2 " name="subCatID" id="sub_category">
<option value="">@lang('language.HEADING_SELECT_SUB_CATEGORY')</option>
@foreach ($RecipeSubCategory as $val)
<option value="{{ base64_encode(base64_encode($val->id)) }}">
{{ $val->category_name }}</option>
@endforeach
</select>
</div>
i have try to put label for before select with status display:none , but still receive error for this fields
Edit: i checked and maybe its not issue from the php side maybe its coming from the jquery-ui.js
_drawButton: function() {
var that = this;
// Associate existing label with the new button
this.label = $( "label[for='" + this.ids.element + "']" ).attr( "for", this.ids.button );
this._on( this.label, {
click: function( event ) {
this.button.focus();
event.preventDefault();
}
});
// Hide original select element
this.element.hide();
// Create button
this.button = $( "<span>", {
"class": "ui-selectmenu-button ui-widget ui-state-default ui-corner-all",
tabindex: this.options.disabled ? -1 : 0,
id: this.ids.button,
role: "combobox",
"aria-expanded": "false",
"aria-autocomplete": "list",
"aria-owns": this.ids.menu,
"aria-haspopup": "true"
})
.insertAfter( this.element );
$( "<span>", {
"class": "ui-icon " + this.options.icons.button
})
.prependTo( this.button );
this.buttonText = $( "<span>", {
"class": "ui-selectmenu-text"
})
.appendTo( this.button );
this._setText( this.buttonText, this.element.find( "option:selected" ).text() );
this._resizeButton();
this._on( this.button, this._buttonEvents );
this.button.one( "focusin", function() {
// Delay rendering the menu items until the button receives focus.
// The menu may have already been rendered via a programmatic open.
if ( !that.menuItems ) {
that._refreshMenu();
}
});
this._hoverable( this.button );
this._focusable( this.button );
},
Solution
as i make tests as i figured it out the issue is coming from the js file itself by adding "aria-label": this.ids.menu, fixed the issue with the error
Answered By - Evolution-Team
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.