Tabbing through form never gives focus to radio buttons or c

Topic: Tabbing through form never gives focus to radio buttons or check boxes

Brett King pro asked 7 years ago

Hello, I'm having an issue where when I have either radio buttons or checkboxes on a form in Angular they never gain focus while tabbing through the form. Every other input type seems to work correctly, but focus just skips over radio buttons and check boxes. The following HTML reproduces my issue in the basic MDB project. Is there any way to configure these two input types so that they correctly gain focus? My angular mdb version is 4.3.7

<div class="md-form">
 <input mdbActive type="text" id="form1" class="form-control">
 <label for="form1" class="">Example label</label>
</div>
<div class="form-group">
 <input name="group1" type="radio" id="radio1">
 <label for="radio1">Option 1</label>
</div>
<div class="form-group">
 <input name="group1" type="radio" id="radio2">
 <label for="radio2">Option 2</label>
</div>
<div class="form-group">
 <input name="group1" type="radio" id="radio3">
 <label for="radio3">Option 3</label>
</div>
<div class="form-group">
 <input type="checkbox" id="checkbox1">
 <label for="checkbox1">Classic checkbox</label>
</div>
<div class="md-form">
 <input mdbActive type="text" id="form2" class="form-control">
 <label for="form2" class="">Example label</label>
</div>

Add comment

Sebastian Kaczmarek staff pro premium answered 7 years ago

1 0 Best answer

Hi Brett, This issue occurs because the buttons which you see are actually <label>s. The real <input>s are hidden in CSS. The key thing here is that they have visibility: hidden; rule applied and that's why you cannot tab through your form. The element is not visible in the document so it can't get focus. However, you can override this rule by editing your CSS files, e.x. app.component.scss, just add this lines:

:host /deep/ [type=checkbox],
:host /deep/ [type=radio] {
    visibility: visible !important;
    opacity: 0 !important;
}

Now you will be able to tab through your form. As an add-on, you can add some more styles to see how tabbing work. You can add a slight border to elements which got focused by adding this lines to your CSS file:

:host /deep/ [type=checkbox]:focus + label,
:host /deep/ [type=radio]:focus + label {
    border: 1px solid rgb(207, 232, 255);
}

Brett King pro commented 7 years ago

Chrome is telling me that /deep/ is deprecated, and I'm not seeing the change work in any other browser either.

Add comment

contactpetergray pro answered 7 years ago

0 0 Best answer

Any progress on this ?? I would expect being able to tab to a checkbox as being standard functionality, it's kind of an incomplete component if you can't :(

Damian Gemza staff commented 7 years ago

Hello contactpetergray, In 5.1.2 release we've implemented this fix as mdbDeepDirective. Please update your's MDB and use this directive on your's checkboxes / radios. Best Regards, Damian

Add comment

ramix pro premium priority answered 5 years ago

0 0 Best answer

I haven't seen any progress in this, though MDB staff is always working, I think this should get a lot of attention, as in many atmospheres this is considered very "bad" in terms of user experience. When one tabs through form components, he must know that he is focused on a checkbox or radio button.

STAFF - can you please handle this? I already put together some css as a direction: This code will make the focused mdb checkbox - have a line under it:

.form-check-input:focus + .form-check-label 
{border: solid 2px #8A8A8A;
 border-top: none;
 border-left: none;
 border-right: none;}

And here, I even created a snippet: https://mdbootstrap.com/snippets/jquery/ramix/1462115

Bartosz Termena staff commented 5 years ago

Hi!

Thank you for reporting the problem. We will take a closer look at that and try to resolve this problem as soon as possible. I will keep you informed.

Best Regards, Bartosz.

Add comment

sonnich answered 4 years ago

0 0 Best answer

I found an even better way based on Sebastian Kaczmarek's idea.Locate the loki.css file (not sure whether the filename stays the same), locate this section:

input[type="radio"] {
  display: none;
}

Change this to:

input[type="radio"] {
  display: inline;
  visibility: visible;
  opacity: 0;
}

Next locate

input[type="radio"] + label:before {

Copy that section to:

input[type="radio"]:focus + label:before {
  content: "";
  display: inline-block;
  height: 14px;
  width: 14px;
  margin-right: 5px;
  background: white center center no-repeat;
  border: 2px solid #108310;  <- UPDATED
  border-radius: 100%;
  box-shadow: 0 0 1px #cccccc;
  vertical-align: text-top;
}

Note the ":focus" in the first line. I update the border to show the user where focus is, so they can easily just tab and arrow keys.

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

User: Pro
Premium support: No
Technology: MDB Angular
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

About author

Brett King

Pro User

0Support score
4Questions 0Answers

0Snippets likes 0Snippets