title: ADA - Count the number of <li> in from 2 <ul> (Angular 5)
body: <p>I have 2 <code>&lt;ul&gt;</code>and they are part of one dropdown. When I when using NVDA screen reader it counts both the <code>&lt;ul&gt;</code> list separately. it should count both.</p>
  
  <blockquote>
    <p>when I tabbed into <code>div</code>it should screen reader should read 6 list items. but now I am getting 3 items which reads rightSection first, then again saying 3 items reading leftSection.</p>
  </blockquote>
  
  <pre><code>    &lt;ul class=nav&gt;
       &lt;li navItem1&gt;
          &lt;div class="divoOne"&gt;
              &lt;ul class="rightSection"&gt;
              &lt;li&gt;1&lt;/li&gt;
              &lt;li&gt;2&lt;/li&gt;
              &lt;li&gt;3&lt;/li&gt;  
  
              &lt;/ul&gt;
  
              &lt;ul class="leftSection"&gt;
              &lt;li&gt;4&lt;/li&gt;
              &lt;li&gt;5&lt;/li&gt;
              &lt;li&gt;6&lt;/li&gt;  
              &lt;/ul&gt;
  
          &lt;div&gt;
      &lt;/li&gt;
  
     &lt;/ul&gt;
  </code></pre>
  
  <p>If i make changes on HTML structure I have to code whole lot of css again. I'm new to ADA. is there a way I can do it with <code>aria</code> tags or JavaScript.</p>