[M] External link icon is not accessible

[gabalafou]

Assistive tech does not have access to the "external link" icon next to external links in the nav bar (such as the "Changelog" link in the PyData Theme docs)

TODO:

• [ ] This content is added via CSS pseudo-element but where and how exactly? Is the method used in the source code elsewhere? Answer these questions in order to see if there are other such icons, or other such content, in the PyData theme.

[Carreau]

I can find reference to the external icon in 3 places:

// src/pydata_sphinx_theme/assets/styles/variables/_icons.scss

  --pst-icon-external-link: "\f35d"; // fa-solid fa-up-right-from-square

//src/pydata_sphinx_theme/assets/styles/sections/_header.scss
.nav-link {
  ...
  &.nav-external::after {

    content: var(--pst-icon-external-link);

// src/pydata_sphinx_theme/assets/styles/sections/_sidebar-primary.scss
nav.bd-links {
  li > a {
    &.reference.external {
      &::after {
        ...
        content: var(--pst-icon-external-link);

I'm not sure we have control over the .externals, I believe it is created upstream in sphinx. nav-external we should have control over.

I'm not sure how we want to handle that, even if we could modify the html. I've see a few suggestions:

• a span that is hidden and has "(external link)"
• use alt/desc on the link.

There are a few notes that "external" by itself is not a problem by itself, what is more a problem for screen-readers is when clicking a link open a new windows by default (target="_blank").

I'm not sure I can judge the best way to move forward.

[trallard]

The original msg confused me a bit. What is not accessible by assistive tech? the icon itself or the link to which the icon should redirect the user to?

This content is added via CSS pseudo-element but where and how exactly? Is the method used in the source code elsewhere? Answer these questions in order to see if there are other such icons, or other such content, in the PyData theme.

The way this is phrased makes it look like we are talking about the icon itself rather than the (underlying) external link, so it would be best to clarify.