Difference between revisions of "Remove SVG from Tab Order"

From Level Access Web Labs
Jump to navigation Jump to search
 
(6 intermediate revisions by the same user not shown)
Line 1: Line 1:
 +
'''This is specific to IE browser(The black squares are the SVG Elements)'''
  
 
<html>
 
<html>
Line 30: Line 31:
 
<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">Working SVG Example to skip tab focus on the SVG</h1>
+
   <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">select all that apply</h2>
+
   <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">
Line 143: Line 258:
 
     <!-- /.grid -->
 
     <!-- /.grid -->
 
   </div>
 
   </div>
 +
<div>
 +
<a href=" http://codepen.io/ssbuser/pen/VeoZWN">Link to Codepen example</a>
 +
</div>
 
   <!-- /.answers -->
 
   <!-- /.answers -->
 
</div>
 
</div>

Latest revision as of 21:19, 25 February 2016

This is specific to IE browser(The black squares are the SVG Elements)

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