A11y: Increase the target area for single-letter index links

[hugovk]

Fixes python/cpython#101109.

Sphinx auto-generates index pages for entries with .. index::.

At the top of these pages:

• https://docs.python.org/3/genindex.html
• https://docs.python.org/3/genindex-all.html

It generates a list of links to each index initial letter:

However, these links are narrow and have very small clickable target areas, most around 10-15 pixels wide, and "I" is only ~5 pixels wide:

They can be hard to click for those with physical issues that make small, precision movements difficult.

WebAIM say:

The danger in using single characters as links—or in using any sort of small link (such as a 10 pixel by 10 pixel graphic)—is that some users will have difficulty clicking on such a small area. Someone with cerebral palsy, for example, may be able to use the hands to manipulate a mouse, but may have difficulty with the precise movements and muscle control necessary to click on a small link. Authors can limit these issues by increasing the size of small links, increasing the font size of single character links, or making the target area larger by including whitespace (such as CSS padding) within small link. Additionally, small adjacent links should have adequate whitespace (such as link CSS margins) between them to minimize users inadvertently clicking the wrong link.

So let's improve accessibility and make:

the target area larger by including whitespace (such as CSS padding) within small link

Here's a demo with this PR:

• https://hugovk-cpython.readthedocs.io/en/accessibilty-index-target-area/genindex.html
• https://hugovk-cpython.readthedocs.io/en/accessibilty-index-target-area/genindex-all.html

Which gives us a width of around 25-30px for most and ~21px for "I":

[ezio-melotti]

Another option would be to use width and/or min-width, even though that only works on block elements IIRC, so you would have to turn the list into a flexbox.
The advantage of doing this is that the target box and the distance between the |s will be the same for all letters, and that the list will stay relatively compact.

You could even try to use negative margins to expand the clickable area on the space characters between the |s and the letters, but for accessibility purposes there should be enough space between a link target and the other, so it's probably not worth messing with negative margins.

[hugovk]

Good idea! Updated and rebuilt the demo:

https://hugovk-cpython.readthedocs.io/en/accessibilty-index-target-area/genindex.html

https://hugovk-cpython.readthedocs.io/en/accessibilty-index-target-area/genindex-all.html

Applied the flexbox container to two places here:

div.genindex-jumpbox,
div.genindex-jumpbox > p {
    display: inline-flex;
    flex-wrap: wrap;
}

Because the structure is slightly different on the two pages.

The first is:

<div class="genindex-jumpbox">
  <p> [all the A-Z links] </p>
  <p> [full index link] </p>
</div>

The second is:

<div class="genindex-jumpbox"> [all the A-Z links] </div>

HTML details

<div class="genindex-jumpbox">
   <p><a href="genindex-Symbols.html"><strong>Symbols</strong></a>
     | <a href="genindex-_.html"><strong>_</strong></a>
     | <a href="genindex-A.html"><strong>A</strong></a>
     | <a href="genindex-B.html"><strong>B</strong></a>
     | <a href="genindex-C.html"><strong>C</strong></a>
     | <a href="genindex-D.html"><strong>D</strong></a>
     | <a href="genindex-E.html"><strong>E</strong></a>
     | <a href="genindex-F.html"><strong>F</strong></a>
     | <a href="genindex-G.html"><strong>G</strong></a>
     | <a href="genindex-H.html"><strong>H</strong></a>
     | <a href="genindex-I.html"><strong>I</strong></a>
     | <a href="genindex-J.html"><strong>J</strong></a>
     | <a href="genindex-K.html"><strong>K</strong></a>
     | <a href="genindex-L.html"><strong>L</strong></a>
     | <a href="genindex-M.html"><strong>M</strong></a>
     | <a href="genindex-N.html"><strong>N</strong></a>
     | <a href="genindex-O.html"><strong>O</strong></a>
     | <a href="genindex-P.html"><strong>P</strong></a>
     | <a href="genindex-Q.html"><strong>Q</strong></a>
     | <a href="genindex-R.html"><strong>R</strong></a>
     | <a href="genindex-S.html"><strong>S</strong></a>
     | <a href="genindex-T.html"><strong>T</strong></a>
     | <a href="genindex-U.html"><strong>U</strong></a>
     | <a href="genindex-V.html"><strong>V</strong></a>
     | <a href="genindex-W.html"><strong>W</strong></a>
     | <a href="genindex-X.html"><strong>X</strong></a>
     | <a href="genindex-Y.html"><strong>Y</strong></a>
     | <a href="genindex-Z.html"><strong>Z</strong></a>
     </p>

   <p><a href="genindex-all.html"><strong>Full index on one page</strong>
                                               (can be huge)</a></p>
   </div>

<div class="genindex-jumpbox">
 <a href="#Symbols"><strong>Symbols</strong></a>
 | <a href="#_"><strong>_</strong></a>
 | <a href="#A"><strong>A</strong></a>
 | <a href="#B"><strong>B</strong></a>
 | <a href="#C"><strong>C</strong></a>
 | <a href="#D"><strong>D</strong></a>
 | <a href="#E"><strong>E</strong></a>
 | <a href="#F"><strong>F</strong></a>
 | <a href="#G"><strong>G</strong></a>
 | <a href="#H"><strong>H</strong></a>
 | <a href="#I"><strong>I</strong></a>
 | <a href="#J"><strong>J</strong></a>
 | <a href="#K"><strong>K</strong></a>
 | <a href="#L"><strong>L</strong></a>
 | <a href="#M"><strong>M</strong></a>
 | <a href="#N"><strong>N</strong></a>
 | <a href="#O"><strong>O</strong></a>
 | <a href="#P"><strong>P</strong></a>
 | <a href="#Q"><strong>Q</strong></a>
 | <a href="#R"><strong>R</strong></a>
 | <a href="#S"><strong>S</strong></a>
 | <a href="#T"><strong>T</strong></a>
 | <a href="#U"><strong>U</strong></a>
 | <a href="#V"><strong>V</strong></a>
 | <a href="#W"><strong>W</strong></a>
 | <a href="#X"><strong>X</strong></a>
 | <a href="#Y"><strong>Y</strong></a>
 | <a href="#Z"><strong>Z</strong></a>
 
</div>

[hugovk]

(Rebased to build RTD preview: https://python-docs-theme-previews--103.org.readthedocs.build/en/103/genindex.html)