Sometimes the title attribute is not read by NVDA in firefox even if the text of the element is empty

zbigniew-zrd commented 5 years ago

Steps to reproduce:

At the end of this issue I put a HTML source for the very simple page. Save this source as a file with HTML extension and open with Firefox. If you try to read this page with virtual cursor, the NVDA will not read the title attribute of the first Button. If you use for example the tab key to go from one control to the next, NVDA will announce the title attribute of both buttons. This problem is only in firefox, you do not experience this behaviour in other browsers.

Actual behavior:

NVDA in Firefox does not announce any label of the first button of the example page when the user reads the page with virtual cursor. NVDA informs only that this is the button. When the user moves from control to control with the tab key NVDA reads the title attribute of this button.

Expected behavior:

NVDA should speak the title attribute of the first button, when the user reads the page with virtual buffer. The correct behavior can be observed when you read the page with Chrome or Internet Explorer. NVDA should always read the title Attribute if the text of the element is empty.

System configuration

NVDA installed/portable/running from source:

NVDA version:

NVDA 2019.2version installed

Windows version:

Windows 7/10,

Name and version of other software in use when reproducing the issue:

Firefox 69.0 (64 bit)

Other information about your system:

Other questions

Does the issue still occur after restarting your PC?

Yes.

Have you tried any other versions of NVDA? If so, please report their behaviors.

No.

Web page source:

<!DOCTYPE html>
<html class="no-js">
    <head>
        <title>Test title</title>
        <script src="https://use.fontawesome.com/ed6a6449d4.js"></script>
        <style>
        .test-content:after {
            content: "I`m pseudo element for button nr 2";
        }
        </style>
    </head>
    <body>
        <h1>TEST</h1>
        <button type="button" class="button" id="clear_filters" title="I`m title for first buttom">
            <span class="fa fa-eraser"></span>
        </button>
        <button type="button" class="button" id="but2" title="I`m title for second buttom">
            <span class="test-content"></span>
        </button>
    </body>
`</html>

Best regards Zbigniew drzazga

DrSooom commented 5 years ago

@zbigniew-zrd: Please completely fill out the bug report draft. Thanks.

lukaszgo1 commented 5 years ago

cc @jcsteh

jcsteh commented 4 years ago

This occurs because the pseudo-content inside the button's span (created by the font library) takes precedent, since content always takes precedent over title for label calculation. Without this, you end up with no label whatsoever for this case: data:text/html,<style>span:before { content: 'span'; }</style><button><span></span></button> Indeed, in Chrome, this is exactly what happens: you get no label or content at all in this case, which is bad. While I understand Firefox's behaviour makes things more difficult in this case, fixing it would cause the problem described above (as we see in Chrome). Thus, this would not be a correct fix.

Note that you can fix this by putting aria-hidden="true" on the span, making it clear that its content is irrelevant for a11y: <span aria-hidden="true" class="fa fa-eraser"></span> You could also use aria-label as well as title (since aria-label explicitly overrides content for buttons), though that is somewhat redundant.

Adriani90 commented 4 years ago

This seems related to web authoring and it can be solved by using the suggestions provided by @jcsteh above. If there are no other questions left I would vote for closing this one.

Adriani90 commented 4 years ago

Closing. Please comment if you need further clarifications on this and we can reopen. Thanks.

nvaccess / nvda