Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

MSHTML: Hidden content inside button elements incorrectly rendered in browse mode #3776

Closed
nvaccessAuto opened this issue Jan 13, 2014 · 10 comments
Closed

MSHTML: Hidden content inside button elements incorrectly rendered in browse mode #3776

nvaccessAuto opened this issue Jan 13, 2014 · 10 comments
Labels
bug feature/browse-mode
Milestone
2015.1

Comments

@nvaccessAuto
Copy link

Reported by dhezl on 2014-01-13 20:50
<button> elements that contain multiple nested <div> elements for purposes of managing display state fail when read by NVDA, resulting in all button states being read in sequence. Use of display:none and aria-hidden="true" within the nested elements, while functioning properly in all other tested AT (JAWS, VoiceOver, ChromeVox), is ignored by NVDA.

Please add support for these tags on content nested within <button> elements and other form inputs to be more inline with other AT and prevent necessitation of multiple event handlers for what should be possible to accomplish with a single page element.

Thank you!

Blocking #4250
@nvaccessAuto
Copy link
Author

Attachment log01132014.txt added by dhezl on 2014-01-13 20:50
Description:
NVDA log file

@nvaccessAuto
Copy link
Author

Comment 2 by jteh on 2014-01-13 22:51
I'm unclear as to exactly what you're referring to. Please provide a simple test case, the behaviour you are seeing and the behaviour you expect. Please also specify what browser(s) you are testing with. Thanks.

@nvaccessAuto
Copy link
Author

Comment 3 by dhezl on 2014-01-13 23:09
Of course!

The simplest case is as in the following:

<button>
    <div style="display: none" aria-hidden="true">STATE 1</div>
    <div style="display: block" aria-hidden="false">STATE 2</div>
</button>

In the above example, only "STATE 2" visibly shows on the page. Other AT tested will only read the second state in the above example. However, NVDA will read the following:

Button STATE 1
Button STATE 2

This was tested in IE8, IE9, IE10, IE11, and Chrome on Windows 7.

Thanks for the fast reply! Really appreciate what you guys are doing here.

@nvaccessAuto
Copy link
Author

Comment 4 by jteh on 2014-01-13 23:19
I can't reproduce this in either Firefox nightly or Chrome Canary. NVDA only reads the STATE 2 portion.

I can confirm it in IE 11, which is very odd.

@nvaccessAuto
Copy link
Author

Comment 5 by jteh on 2014-01-13 23:26
We're using the name of the button as reported by Internet Explorer's accessibility implementation. Unfortunately, it seems that IE doesn't bother to remove hidden content in this case, so we'll need yet another hacky work around.

@nvaccessAuto
Copy link
Author

Comment 7 by jteh on 2014-07-08 23:39
Changes:
Changed title from "Buttons with multiple states not supported" to "MSHTML: Hidden content inside button elements incorrectly rendered in browse mode"

@nvaccessAuto
Copy link
Author

Comment 8 by Michael Curran <mick@... on 2015-01-22 23:52
In [19c7b38]:

Merge branch 't3776' into next. Incubates #3776

Changes:
Added labels: incubating

@nvaccessAuto
Copy link
Author

Comment 9 by Michael Curran <mick@... on 2015-02-05 00:23
In [6533c6b]:

Merge branch 't3776'. Fixes #3776

Changes:
Removed labels: incubating
State: closed

@nvaccessAuto
Copy link
Author

Comment 10 by mdcurran on 2015-02-05 00:24
Changes:
Milestone changed from None to 2015.1

@nvaccessAuto nvaccessAuto added this to the 2015.1 milestone Nov 10, 2015
This was referenced Nov 10, 2015
Closed
Closed
michaelDCurran added a commit that referenced this issue Nov 23, 2015
@michaelDCurran
Merge branch 't3776'. Fixes #3776
6533c6b
michaelDCurran added a commit that referenced this issue Nov 23, 2015
@michaelDCurran
Mention fixes for #4839 and #3776 in changes.t2t
3f9c526
@smashuu smashuu mentioned this issue Jun 9, 2016
Closed
@OZZlE
Copy link

OZZlE commented Jan 31, 2022 •
edited

it's still doesn't work

html:

<html lang="en">
    <button class="my-button">
        <div class="sr-only">
            <span class="en">
                Open
            </span>
            <span class="sv">
                Öppna
            </span>
        </div>
    </button>

scss

.my-button span {
    display: none;
}

:lang(en) {
    .my-button .en {
        display: block;
    }
}
:lang(sv) {
    .my-button .sv {
        display: block;
    }
}

All text is read instead of the current language even in Chrome

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug feature/browse-mode
Projects
None yet
Milestone
2015.1
Development

No branches or pull requests
2 participants
@OZZlE @nvaccessAuto