search

Mihonarium / hpmor-ru

Harry Potter and the Methods of Rationality in Russian | Гарри Поттер и методы рационального мышления
https://гпмрм.рф/
8 stars 2 forks source link

Button 'Читать' (Read the book) does not have an outline when focusing with the Tab-key #39

Open rrramble opened 1 month ago

rrramble commented 1 month ago

When focusing with the Tab-key on the main page, a visual button 'Читать' (Read the book) does not have an outline or other visual representation (i.e., shadow, background change, or zoom).

This is an accessibility issue related to Level A (minimal level) of WCAG paragraph 2.4.7.

Thank you!

Mihonarium commented 1 month ago

There are weird Docusaurus bugs around the outline. It's a problem, but I'm not sure how to fix it without breaking everything else.

rrramble commented 1 month ago

It seems I have found the problem:

In /src/css/custm.css-file all .focus-visible classes should be written as :focus-visible pseudoclass.

The .focus-visible could have meaning if JS added such a class when the Tab was pressed. But JS does not add anything.

However, I find this solution a workaround because current CSS classes shut down the NATIVE outline with outline: 0 setting and then use other tools to make a PSEUDO-outline, e.g., with changing the background color, border, or shadow.

Just for reference: --ifm-... CSS classes in this file are from the Infima Framework. However, on Infima NPM-package there is no outline: 0 setting. I conclude this setting was manually added-customized.

rrramble commented 1 month ago

Sent a Pull request #41

Mihonarium commented 1 month ago

Thanks a lot for the PR!

I think in the past, Docusaurus added .focus-visible to elements in focus (https://github.com/facebook/docusaurus/issues/3150).

Removing outline:0 adds outline in addition to background color change (see a preview on https://ba8550b1.hpmor-ru.pages.dev/), which is not something we'd want.