Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Strip tags of ToC item's aria label#5536

Merged
squidfunk merged 1 commit into
squidfunk:masterfrom
pawamoy:patch-6
May 22, 2023
Merged

Strip tags of ToC item's aria label#5536
squidfunk merged 1 commit into
squidfunk:masterfrom
pawamoy:patch-6

Conversation

@pawamoy

@pawamoy pawamoy commented May 21, 2023

Copy link
Copy Markdown
Contributor

Some plugins/extensions might use the data-toc-label attribute of headings to set a particular string for the ToC item title.

While not explicitly documented as possible or allowed, they might set some HTML code instead of text. In this case, the aria label of Toc nav elements break the HTML as they will contain unescaped double quotes.

To fix this, we use the striptags filter to remove any tags from the aria label, keeping text only.

@squidfunk squidfunk left a comment

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

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

Thanks! Sounds legit, as previously discussed via Gitter. Some minor adjustments.

Comment thread src/partials/toc-item.html Outdated
<!-- Table of contents list -->
{% if toc_item.children %}
<nav class="md-nav" aria-label="{{ toc_item.title }}">
<nav class="md-nav" aria-label="{{ toc_item.title|striptags }}">

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

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

Please stick to our code style and insert spaces left and right to the | pipe ☺️ Also, please build the theme and make the changes in the material folder, or they won't be picked up.

@pawamoy

pawamoy commented May 21, 2023

Copy link
Copy Markdown
Contributor Author

I ran npm install then npm run build and committed a fixup.

@squidfunk

Copy link
Copy Markdown
Owner

Thanks! You need to run npm run build:all, or the custom overrides are not built.

@pawamoy

pawamoy commented May 21, 2023

Copy link
Copy Markdown
Contributor Author

Oh OK, this wasn't clear to me from the docs:

While this command will build all theme files, it will skip the overrides used in Material for MkDocs' own documentation which are not distributed with the theme. If you forked the theme and want to build the overrides as well, use:

I understood this as "use build:all if you have a custom fork of the theme" (I don't, I'm just sending a PR).
Maybe something simpler like "use build:all if you modified partials/overrides" would do the trick 🙂

@squidfunk

Copy link
Copy Markdown
Owner

Okay, sorry, last thing: the iconsearch index got deleted - please remove that from the commit as well. This is likely because the emoji database wasn't found in the virtual environment (we kind of assume that venv is the folder name):

const emojis$ = defer(() => resolve("venv/**/twemoji_db.py"))

This is a shortcoming of our current build process. We're going to revamp the docs and the process in the near future.

@pawamoy

pawamoy commented May 22, 2023

Copy link
Copy Markdown
Contributor Author

Sure, no worries! Indeed I usually use .venv as folder name 🙂

Some plugins/extensions might use the data-toc-label attribute
of headings to set a particular string for the ToC item title.

While not explicitly documented as possible or allowed,
they might set some HTML code instead of text.
In this case, the aria label of Toc nav elements break the HTML
as they will contain unescaped double quotes.

To fix this, we use the `striptags` filter
to remove any tags from the aria label, keeping text only.
@squidfunk

Copy link
Copy Markdown
Owner

Perfect, good to go now!

@squidfunk squidfunk merged commit 263a85d into squidfunk:master May 22, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants