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

[rrramble]

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]

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]

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]

Sent a Pull request #41

[Mihonarium]

Thanks a lot for the PR!

I think in the past, Docusaurus added .focus-visible to elements in focus (facebook/docusaurus#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.