Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

radio button tabbing error #344

Closed
Igor-Gajos opened this Issue · 4 comments

4 participants

@Igor-Gajos

At the moment it is impossible to tab through the radio buttons and checkboxes. Any known fixes?
Use the example below

<html lang="en"><head>
    <meta charset="utf-8">
    <title>Flat UI - Free Bootstrap Framework and Themes</title>
    <meta name="description" content="Flat UI Kit Free is a Twitter Bootstrap Framework design and Theme, this responsive framework includes a PSD and HTML version.">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Loading Bootstrap -->
    <link href="http://designmodo.github.io/Flat-UI/bootstrap/css/bootstrap.css" rel="stylesheet">

    <!-- Loading Flat UI -->
    <link href="http://designmodo.github.io/Flat-UI/css/flat-ui.css" rel="stylesheet">
    <link href="http://designmodo.github.io/Flat-UI/css/demo.css" rel="stylesheet">

    <link rel="shortcut icon" href="images/favicon.ico">

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
    <!--[if lt IE 9]>
      <script src="js/html5shiv.js"></script>
      <script src="js/respond.min.js"></script>
    <![endif]-->
  <style type="text/css"></style></head>
  <body data-twttr-rendered="true">
    <div class="container">


     <h3 class="demo-panel-title">Input</h3>
      <div class="row">
        <div class="col-md-3">
            <div class="form-group">
                <input type="text" value="" placeholder="Inactive" class="form-control">
            </div>          
        </div>
        <div class="col-md-3">
          <div class="form-group has-error">
            <input type="text" value="Error" class="form-control">
          </div>
        </div>
      </div> <!-- /row -->
      <div class="row">
             <div class="col-md-3">
          <h3 class="demo-panel-title">Checkboxes</h3>
          <label class="checkbox" for="checkbox1">
            <span class="icons"><span class="first-icon fui-checkbox-unchecked"></span><span class="second-icon fui-checkbox-checked"></span></span><input type="checkbox" value="" id="checkbox1" data-toggle="checkbox">
            Unchecked
          </label>
          <label class="checkbox checked" for="checkbox2">
            <span class="icons"><span class="first-icon fui-checkbox-unchecked"></span><span class="second-icon fui-checkbox-checked"></span></span><input type="checkbox" checked="checked" value="" id="checkbox2" data-toggle="checkbox">
            Checked
          </label>
        </div> <!-- /checkboxes col-md-3 -->

        <div class="col-md-3">
          <h3 class="demo-panel-title">Radio Buttons</h3>
          <label class="radio" tabindex="1">
            <span class="icons"><span class="first-icon fui-radio-unchecked"></span><span class="second-icon fui-radio-checked"></span></span><input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" data-toggle="radio">
            Radio is off
          </label>
          <label class="radio checked">
            <span class="icons"><span class="first-icon fui-radio-unchecked"></span><span class="second-icon fui-radio-checked"></span></span><input type="radio" name="optionsRadios" id="optionsRadios2" value="option1" data-toggle="radio" checked="checked">
            Radio is on
          </label>
        </div> <!-- /radios col-md-3 -->
<div class="row">
    <h3 class="demo-panel-title">Input</h3>
      <div class="row">
        <div class="col-md-3">
            <div class="form-group">
                <input type="text" value="" placeholder="Inactive" class="form-control">
            </div>          
        </div>
        <div class="col-md-3">
          <div class="form-group has-error">
            <input type="text" value="Error" class="form-control">
          </div>
        </div>
      </div> <!-- /row -->


    <!-- Load JS here for greater good =============================-->
    <script src="http://designmodo.github.io/Flat-UI/js/jquery-1.8.3.min.js"></script>
    <script src="http://designmodo.github.io/Flat-UI/js/jquery-ui-1.10.3.custom.min.js"></script>
    <script src="http://designmodo.github.io/Flat-UI/js/jquery.ui.touch-punch.min.js"></script>
    <script src="http://designmodo.github.io/Flat-UI/js/bootstrap.min.js"></script>
    <script src="http://designmodo.github.io/Flat-UI/js/bootstrap-select.js"></script>
    <script src="http://designmodo.github.io/Flat-UI/js/bootstrap-switch.js"></script>
    <script src="http://designmodo.github.io/Flat-UI/js/flatui-checkbox.js"></script>
    <script src="http://designmodo.github.io/Flat-UI/js/flatui-radio.js"></script>
    <script src="http://designmodo.github.io/Flat-UI/js/jquery.tagsinput.js"></script>
    <script src="http://designmodo.github.io/Flat-UI/js/jquery.placeholder.js"></script>
    <script src="http://designmodo.github.io/Flat-UI/js/jquery.stacktable.js"></script>
    <script src="http://vjs.zencdn.net/4.3/video.js"></script>
    <script src="http://designmodo.github.io/Flat-UI/js/application.js"></script>


<tester id="tagsinput_tag_autosize_tester" style="position: absolute; top: -9999px; left: -9999px; width: auto; font-size: 14px; font-family: Lato, Helvetica, Arial, sans-serif; font-weight: 400; letter-spacing: 0px; white-space: nowrap;"></tester><div id="goog_qs_tidbit_box" style="display:none"><div id="goog_qs-wrapper"><div id="goog_qs-box-toggle" style="background-image: url(chrome-extension://okanipcmceoeemlbjnmnbdibhgpbllgc/images/close.png);"></div><div id="goog_qs-box-info" class="goog_qs-box-title" style="background-image: url(chrome-extension://okanipcmceoeemlbjnmnbdibhgpbllgc/images/icon16x16.png);"><span class="goog_qs-nowrap">G<img>oogle</span> <span class="goog_qs-nowrap">Q<img>uick</span> <span class="goog_qs-nowrap">S<img>croll</span></div><div id="goog_qs-box-tidbits"><div id="goog_qs-box-msg"><span class="goog_qs-nowrap">T<img>his</span> <span class="goog_qs-nowrap">w<img>hole</span> <span class="goog_qs-nowrap">p<img>age</span> <span class="goog_qs-nowrap">s<img>eems</span> <span class="goog_qs-nowrap">t<img>o</span> <span class="goog_qs-nowrap">b<img>e</span> <span class="goog_qs-nowrap">a<img>bout</span> <span class="goog_qs-query"><span class="goog_qs-nowrap">f<img>lat</span> <span class="goog_qs-nowrap">u<img>i</span> <span class="goog_qs-nowrap">f<img>ree</span></span>. <span class="goog_qs-nowrap">Q<img>uick</span> <span class="goog_qs-nowrap">S<img>croll</span> <span class="goog_qs-nowrap">a<img>ppears</span> <span class="goog_qs-nowrap">w<img>hen</span> <span class="goog_qs-nowrap">o<img>nly</span> <span class="goog_qs-nowrap">p<img>arts</span> <span class="goog_qs-nowrap">o<img>f</span> <span class="goog_qs-nowrap">t<img>he</span> <span class="goog_qs-nowrap">p<img>age</span> <span class="goog_qs-nowrap">a<img>re</span> <span class="goog_qs-nowrap">r<img>elevant.</span> <span class="goog_qs-learn-more"><span class="goog_qs-nowrap">L<img>earn</span> <span class="goog_qs-nowrap">m<img>ore.</span></span></div></div></div></div>

</body></html>
@pytkin

Hello, @Igor-Gajos.

We know about this bug. Radio buttons and checkboxes are invisible and users cannot directly click or focus on these elements using the tab key. We are working on a solution of this problem.

@Igor-Gajos

@pytkin I see, any idea how to fix it? I tired to use CSS appearance properties unfotunatley only works for Chrome...

@blai

It seems like flatui is using javascript based solution for checkbox and radio buttons, Foundation had the same issue, and I was able to hack through the customization of the two types of controls with pure css zurb/foundation#2335, maybe you guys want to look into the same solution.

FYI, I am not a user of flatui pro, and I have hard time selling solutions like this to my company largely because the lack of full support of accessibility.

@andrew-ml
Collaborator

Hi, everyone, we've rebuilt the radio/checkbox plugin, please check it out now.

@andrew-ml andrew-ml closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.