Difference between revisions of "Remove SVG from Tab Order"
Jump to navigation
Jump to search
Line 30: | Line 30: | ||
<body> | <body> | ||
<div id="question_Q8" class="question checkbox label_Q8 "> | <div id="question_Q8" class="question checkbox label_Q8 "> | ||
− | <h1 title="question" class="question-text" id="question_text_Q8"> | + | <h1 title="question" class="question-text" id="question_text_Q8">SVG Examples to skip tab focus on the SVG</h1> |
<!-- /.question-text --> | <!-- /.question-text --> | ||
− | <h2 title="instructions" class="instruction-text"> | + | <h2 title="instructions" class="instruction-text">Broken SVG Example where the SVG will get focus as well</h2> |
+ | |||
+ | <div class="answers answers-table"> | ||
+ | <div class="fir fir-checkbox" style="display: none;"> | ||
+ | <span class="fir-icon"> | ||
+ | <svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 22 22" class="rounded" > | ||
+ | <path d="M15.8,0H3.9C1.8,0,0,2,0,4.1V16c0,2.2,1.8,4,3.9,4h11.8c2.2,0,4.2-1.8,4.2-4V4.1C20,2,18,0,15.8,0z M19,16 c0,1.6-1.6,3-3.2,3H3.9C2.3,19,1,17.7,1,16V4.1C1,2.5,2.3,1,3.9,1h11.8C17.4,1,19,2.5,19,4.1V16z" class="fir-base"></path> | ||
+ | <path d="M19,16c0,1.6-1.6,3-3.2,3H3.9C2.3,19,1,17.7,1,16V4.1C1,2.5,2.3,1,3.9,1h11.8C17.4,1,19,2.5,19,4.1V16z" class="fir-bg"></path> | ||
+ | <polygon points="9.1,16.3 2.5,11 4.1,9 8.7,12.6 15.6,3.7 17.7,5.2 " class="fir-selected"></polygon> | ||
+ | </svg> | ||
+ | </span> | ||
+ | </div> | ||
+ | <div class="fir fir-radio" style="display: none;"> | ||
+ | <span class="fir-icon"> | ||
+ | <svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 22 22" class="rounded" role="presentation" focusable="false"> | ||
+ | <circle cx="10" cy="10" r="10" class="fir-base"></circle> | ||
+ | <circle cx="10" cy="10" r="9" class="fir-bg"></circle> | ||
+ | <circle cx="10" cy="10" r="7" class="fir-selected"></circle> | ||
+ | </svg> | ||
+ | </span> | ||
+ | </div> | ||
+ | <table class="grid setWidth grid-table-mode" data-settings="auto-optimize mobile-mode group-by-row table-mode" data-height="" summary="This table contains form elements to answer the survey question"> | ||
+ | <tbody> | ||
+ | <tr class="row mobile-top-border-row"> | ||
+ | <td colspan="5" class="cell nonempty mobile-top-border-cell"></td> | ||
+ | </tr> | ||
+ | <tr class="row row-col-legends row-col-legends-top colCount-4"> | ||
+ | <td class="cell empty empty-left empty-top unused mobile border-collapse"></td> | ||
+ | <th scope="col" id="Q8_c1" class="cell nonempty legend col-legend col-legend-top col-legend-basic legend-level-1 mobile border-collapse " style="width: 133px; min-width: 133px;"> | ||
+ | You | ||
+ | </th> | ||
+ | <th scope="col" id="Q8_c2" class="cell nonempty legend col-legend col-legend-top col-legend-basic legend-level-1 mobile border-collapse " style="width: 133px; min-width: 133px;"> | ||
+ | Spouse | ||
+ | </th> | ||
+ | <th scope="col" id="Q8_c3" class="cell nonempty legend col-legend col-legend-top col-legend-basic legend-level-1 mobile border-collapse " style="width: 133px; min-width: 133px;"> | ||
+ | Other | ||
+ | </th> | ||
+ | <th scope="col" id="Q8_c4" class="cell nonempty legend col-legend col-legend-top col-legend-basic legend-level-1 mobile border-collapse " style="width: 133px; min-width: 133px;"> | ||
+ | N/A | ||
+ | </th> | ||
+ | |||
+ | </tr> | ||
+ | </tbody> | ||
+ | <tbody> | ||
+ | <tr class="row row-elements even colCount-4"> | ||
+ | <th scope="row" class="cell nonempty legend row-legend row-legend-left row-legend-basic legend-level-1 mobile border-collapse "> | ||
+ | Savings | ||
+ | </th> | ||
+ | <td headers="Q8_c1" class="cell nonempty element indent-1 mobile border-collapse groupingRows clickableCell"> | ||
+ | <span class="cell-sub-wrapper cell-legend-right"> | ||
+ | <span class="cell-input cell-sub-column"> | ||
+ | <input type="checkbox" name="ans460.0.0" id="ans460.0.0" value="1" class="input checkbox fir-hidden"><span class="fir-icon"> | ||
+ | <svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 22 22" class="rounded" > | ||
+ | <path d="M15.8,0H3.9C1.8,0,0,2,0,4.1V16c0,2.2,1.8,4,3.9,4h11.8c2.2,0,4.2-1.8,4.2-4V4.1C20,2,18,0,15.8,0z M19,16 c0,1.6-1.6,3-3.2,3H3.9C2.3,19,1,17.7,1,16V4.1C1,2.5,2.3,1,3.9,1h11.8C17.4,1,19,2.5,19,4.1V16z" class="fir-base"></path> | ||
+ | <path d="M19,16c0,1.6-1.6,3-3.2,3H3.9C2.3,19,1,17.7,1,16V4.1C1,2.5,2.3,1,3.9,1h11.8C17.4,1,19,2.5,19,4.1V16z" class="fir-bg"></path> | ||
+ | <polygon points="9.1,16.3 2.5,11 4.1,9 8.7,12.6 15.6,3.7 17.7,5.2 " class="fir-selected"></polygon> | ||
+ | </svg> | ||
+ | </span> | ||
+ | </span> | ||
+ | <span class="cell-text cell-sub-column"><label for="ans460.0.0">You</label> </span> | ||
+ | </span> | ||
+ | </td> | ||
+ | <td headers="Q8_c2" class="cell nonempty element indent-1 mobile border-collapse groupingRows clickableCell"> | ||
+ | <span class="cell-sub-wrapper cell-legend-right"> | ||
+ | <span class="cell-input cell-sub-column"> | ||
+ | <input type="checkbox" name="ans460.1.0" id="ans460.1.0" value="1" class="input checkbox fir-hidden"><span class="fir-icon"> | ||
+ | <svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 22 22" class="rounded" > | ||
+ | <path d="M15.8,0H3.9C1.8,0,0,2,0,4.1V16c0,2.2,1.8,4,3.9,4h11.8c2.2,0,4.2-1.8,4.2-4V4.1C20,2,18,0,15.8,0z M19,16 c0,1.6-1.6,3-3.2,3H3.9C2.3,19,1,17.7,1,16V4.1C1,2.5,2.3,1,3.9,1h11.8C17.4,1,19,2.5,19,4.1V16z" class="fir-base"></path> | ||
+ | <path d="M19,16c0,1.6-1.6,3-3.2,3H3.9C2.3,19,1,17.7,1,16V4.1C1,2.5,2.3,1,3.9,1h11.8C17.4,1,19,2.5,19,4.1V16z" class="fir-bg"></path> | ||
+ | <polygon points="9.1,16.3 2.5,11 4.1,9 8.7,12.6 15.6,3.7 17.7,5.2 " class="fir-selected"></polygon> | ||
+ | </svg> | ||
+ | </span> | ||
+ | </span> | ||
+ | <span class="cell-text cell-sub-column"><label for="ans460.1.0">Spouse</label> </span> | ||
+ | </span> | ||
+ | </td> | ||
+ | <td headers="Q8_c3" class="cell nonempty element indent-1 mobile border-collapse groupingRows clickableCell"> | ||
+ | <span class="cell-sub-wrapper cell-legend-right"> | ||
+ | <span class="cell-input cell-sub-column"> | ||
+ | <input type="checkbox" name="ans460.2.0" id="ans460.2.0" value="1" class="input checkbox fir-hidden"><span class="fir-icon"> | ||
+ | <svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 22 22" class="rounded" > | ||
+ | <path d="M15.8,0H3.9C1.8,0,0,2,0,4.1V16c0,2.2,1.8,4,3.9,4h11.8c2.2,0,4.2-1.8,4.2-4V4.1C20,2,18,0,15.8,0z M19,16 c0,1.6-1.6,3-3.2,3H3.9C2.3,19,1,17.7,1,16V4.1C1,2.5,2.3,1,3.9,1h11.8C17.4,1,19,2.5,19,4.1V16z" class="fir-base"></path> | ||
+ | <path d="M19,16c0,1.6-1.6,3-3.2,3H3.9C2.3,19,1,17.7,1,16V4.1C1,2.5,2.3,1,3.9,1h11.8C17.4,1,19,2.5,19,4.1V16z" class="fir-bg"></path> | ||
+ | <polygon points="9.1,16.3 2.5,11 4.1,9 8.7,12.6 15.6,3.7 17.7,5.2 " class="fir-selected"></polygon> | ||
+ | </svg> | ||
+ | </span> | ||
+ | </span> | ||
+ | <span class="cell-text cell-sub-column"><label for="ans460.2.0">Other</label> </span> | ||
+ | </span> | ||
+ | </td> | ||
+ | <td headers="Q8_c4" class="cell nonempty element indent-1 mobile border-collapse groupingRows clickableCell"> | ||
+ | <span class="cell-sub-wrapper cell-legend-right"> | ||
+ | <span class="cell-input cell-sub-column"> | ||
+ | <input type="checkbox" name="ans460.3.0" id="ans460.3.0" value="1" class="exclusive input checkbox fir-hidden"><span class="fir-icon"> | ||
+ | <svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 22 22" class="rounded" > | ||
+ | <path d="M15.8,0H3.9C1.8,0,0,2,0,4.1V16c0,2.2,1.8,4,3.9,4h11.8c2.2,0,4.2-1.8,4.2-4V4.1C20,2,18,0,15.8,0z M19,16 c0,1.6-1.6,3-3.2,3H3.9C2.3,19,1,17.7,1,16V4.1C1,2.5,2.3,1,3.9,1h11.8C17.4,1,19,2.5,19,4.1V16z" class="fir-base"></path> | ||
+ | <path d="M19,16c0,1.6-1.6,3-3.2,3H3.9C2.3,19,1,17.7,1,16V4.1C1,2.5,2.3,1,3.9,1h11.8C17.4,1,19,2.5,19,4.1V16z" class="fir-bg"></path> | ||
+ | <polygon points="9.1,16.3 2.5,11 4.1,9 8.7,12.6 15.6,3.7 17.7,5.2 " class="fir-selected"></polygon> | ||
+ | </svg> | ||
+ | </span> | ||
+ | </span> | ||
+ | <span class="cell-text cell-sub-column"><label for="ans460.3.0">N/A</label> </span> | ||
+ | </span> | ||
+ | </td> | ||
+ | |||
+ | </tr> | ||
+ | </tbody> | ||
+ | </table> | ||
+ | <!-- /.grid --> | ||
+ | </div> | ||
+ | <div> | ||
+ | <a href=" http://codepen.io/ssbuser/pen/xZvKra">Link to Codepen example</a> | ||
+ | </div> | ||
+ | |||
+ | <h2 title="instructions" class="instruction-text">Working SVG Example</h2> | ||
<!-- /.instruction-text --> | <!-- /.instruction-text --> | ||
<div class="answers answers-table"> | <div class="answers answers-table"> |
Revision as of 20:33, 24 February 2016
SVG Examples to skip tab focus on the SVG
Broken SVG Example where the SVG will get focus as well
You | Spouse | Other | N/A | |
---|---|---|---|---|
Savings |
Working SVG Example
You | Spouse | Other | N/A | |
---|---|---|---|---|
Savings |