Production issue: CSS to make a div accessible to Screen readers only not working

  angular-material, angularjs, chromium, css, qt

I am working on a production issue. We have a Qt Shell running Angular JS 1.4.7 application in its Chromium browser. Messages in angular js application are shown using md-bottomsheet of Angular JS Material v1.1.1

The bottomsheet has the following div:

<div class="screen-reader-only">{{messageTextForScreenReaderOnly}}</div>

screen-reader-only class look as below:

.screen-reader-only {
    border: 0 !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    -webkit-clip-path: inset(50%) !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    white-space: nowrap !important;
}

This is working fine in local as the div gets hidden using screen-reader-only css class. But, in production we have a issue that {{messageTextForScreenReaderOnly}} is visible in prompt, but it should be hidden as it is should be accessible by screen-reader only.

What I tried?:

  • Tried to reproduce in local, but could not.
  • Verified that the minimized css file in production matches with css in local.

Can anyone please guide what could be the other possible issues for this behavior?

Other details:

  • Using Qt5WebEngineCore.dll of version 5.6.1.0 for Qt application shell.

Source: New feed
Source Url Production issue: CSS to make a div accessible to Screen readers only not working

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.