<p>This post serves as compilation of tools, articles and findings I&#39;ve made whilst optimizing production React applications.</p>
<h2 class="text-2xl md:text-3xl font-bold pt-3 group text-primary-main" data-reactroot=""><a class="anchor" href="#considerations" id="considerations"><span class="hidden absolute group-hover:inline-block" style="transform:translateX(-1.5rem)">#</span>Considerations</a></h2><ul>
<li>Dialog titles MUST be <code>&lt;h2&gt;&lt;/h2&gt;</code> <a href="https://stackoverflow.com/questions/38448811/is-it-semantically-correct-to-use-h1-in-a-dialog/38467898" class="inline-flex items-end text-primary-main " data-reactroot="">readme<svg viewBox="0 0 24 24" style="width:0.9750000000000001rem;height:0.9750000000000001rem" role="presentation"><path d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z" style="fill:currentColor"></path></svg></a></li>
</ul>
<h2 class="text-2xl md:text-3xl font-bold pt-3 group text-primary-main" data-reactroot=""><a class="anchor" href="#links" id="links"><span class="hidden absolute group-hover:inline-block" style="transform:translateX(-1.5rem)">#</span>Links</a></h2><ul>
<li>Different patterns and components, with detailed articles and breakdowns on how to build them, testing and picking the best for your project - <a href="https://www.a11ymatters.com/" class="inline-flex items-end text-primary-main " data-reactroot="">a11ymatters<svg viewBox="0 0 24 24" style="width:0.9750000000000001rem;height:0.9750000000000001rem" role="presentation"><path d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z" style="fill:currentColor"></path></svg></a></li>
<li><a href="https://egghead.io/lessons/react-set-up-eslint-to-audit-accessibility-issues-in-react" class="inline-flex items-end text-primary-main " data-reactroot="">Eslint config for React and A11Y<svg viewBox="0 0 24 24" style="width:0.9750000000000001rem;height:0.9750000000000001rem" role="presentation"><path d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z" style="fill:currentColor"></path></svg></a></li>
<li><a href="https://adrianroselli.com/2020/11/more-accessible-skeletons.html" class="inline-flex items-end text-primary-main " data-reactroot="">Accesible skeletons<svg viewBox="0 0 24 24" style="width:0.9750000000000001rem;height:0.9750000000000001rem" role="presentation"><path d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z" style="fill:currentColor"></path></svg></a></li>
</ul>
<h2 class="text-2xl md:text-3xl font-bold pt-3 group text-primary-main" data-reactroot=""><a class="anchor" href="#tools" id="tools"><span class="hidden absolute group-hover:inline-block" style="transform:translateX(-1.5rem)">#</span>Tools</a></h2><ul>
<li><a href="https://khan.github.io/tota11y/" class="inline-flex items-end text-primary-main " data-reactroot="">tota11y<svg viewBox="0 0 24 24" style="width:0.9750000000000001rem;height:0.9750000000000001rem" role="presentation"><path d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z" style="fill:currentColor"></path></svg></a></li>
</ul>
<p>asd</p>


Accessibility and React

Must support all the users

Table of Contents

#Considerations

#Links

#Tools

Tags