Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Merged
pradyunsg merged 2 commits intopython:mainfromhugovk:accessibilty-index-target-area
Feb 13, 2023
Merged
Changes fromall commits
Commits
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletionspython_docs_theme/static/pydoctheme.css
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -230,6 +230,18 @@ dl > dt span ~ em {
padding-left: 20px;
}

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

div.genindex-jumpbox a {
margin: 0 5px;
min-width: 30px;
text-align: center;
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

Another option would be to usewidth and/ormin-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.

Copy link
MemberAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

Good idea! Updated and rebuilt the demo:

image

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

image

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:

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

The second is:

<divclass="genindex-jumpbox"> [all the A-Z links]</div>
HTML details
<divclass="genindex-jumpbox"><p><ahref="genindex-Symbols.html"><strong>Symbols</strong></a>     |<ahref="genindex-_.html"><strong>_</strong></a>     |<ahref="genindex-A.html"><strong>A</strong></a>     |<ahref="genindex-B.html"><strong>B</strong></a>     |<ahref="genindex-C.html"><strong>C</strong></a>     |<ahref="genindex-D.html"><strong>D</strong></a>     |<ahref="genindex-E.html"><strong>E</strong></a>     |<ahref="genindex-F.html"><strong>F</strong></a>     |<ahref="genindex-G.html"><strong>G</strong></a>     |<ahref="genindex-H.html"><strong>H</strong></a>     |<ahref="genindex-I.html"><strong>I</strong></a>     |<ahref="genindex-J.html"><strong>J</strong></a>     |<ahref="genindex-K.html"><strong>K</strong></a>     |<ahref="genindex-L.html"><strong>L</strong></a>     |<ahref="genindex-M.html"><strong>M</strong></a>     |<ahref="genindex-N.html"><strong>N</strong></a>     |<ahref="genindex-O.html"><strong>O</strong></a>     |<ahref="genindex-P.html"><strong>P</strong></a>     |<ahref="genindex-Q.html"><strong>Q</strong></a>     |<ahref="genindex-R.html"><strong>R</strong></a>     |<ahref="genindex-S.html"><strong>S</strong></a>     |<ahref="genindex-T.html"><strong>T</strong></a>     |<ahref="genindex-U.html"><strong>U</strong></a>     |<ahref="genindex-V.html"><strong>V</strong></a>     |<ahref="genindex-W.html"><strong>W</strong></a>     |<ahref="genindex-X.html"><strong>X</strong></a>     |<ahref="genindex-Y.html"><strong>Y</strong></a>     |<ahref="genindex-Z.html"><strong>Z</strong></a></p><p><ahref="genindex-all.html"><strong>Full index on one page</strong>                                               (can be huge)</a></p></div>
<divclass="genindex-jumpbox"><ahref="#Symbols"><strong>Symbols</strong></a> |<ahref="#_"><strong>_</strong></a> |<ahref="#A"><strong>A</strong></a> |<ahref="#B"><strong>B</strong></a> |<ahref="#C"><strong>C</strong></a> |<ahref="#D"><strong>D</strong></a> |<ahref="#E"><strong>E</strong></a> |<ahref="#F"><strong>F</strong></a> |<ahref="#G"><strong>G</strong></a> |<ahref="#H"><strong>H</strong></a> |<ahref="#I"><strong>I</strong></a> |<ahref="#J"><strong>J</strong></a> |<ahref="#K"><strong>K</strong></a> |<ahref="#L"><strong>L</strong></a> |<ahref="#M"><strong>M</strong></a> |<ahref="#N"><strong>N</strong></a> |<ahref="#O"><strong>O</strong></a> |<ahref="#P"><strong>P</strong></a> |<ahref="#Q"><strong>Q</strong></a> |<ahref="#R"><strong>R</strong></a> |<ahref="#S"><strong>S</strong></a> |<ahref="#T"><strong>T</strong></a> |<ahref="#U"><strong>U</strong></a> |<ahref="#V"><strong>V</strong></a> |<ahref="#W"><strong>W</strong></a> |<ahref="#X"><strong>X</strong></a> |<ahref="#Y"><strong>Y</strong></a> |<ahref="#Z"><strong>Z</strong></a></div>

ezio-melotti reacted with hooray emoji

@media (max-width: 1023px) {
/* Body layout */
div.body {
Expand Down
[8]ページ先頭
©2009-2025 Movatter.jp