Results 1 to 7 of 7

Thread: ariaErrorEl with .x-hidden-clip can cause overflow scrollbars in Chrome

    You found a bug! We've classified it as EXTJS-23034 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha Premium User
    Join Date
    Nov 2015
    Location
    Sydney, Australia
    Posts
    38

    Default ariaErrorEl with .x-hidden-clip can cause overflow scrollbars in Chrome

    Here's a somewhat contrived fiddle. Click the Validate button. https://fiddle.sencha.com/#fiddle/1jkl

    We don't actually use fit layout, but this does show the problem.

    Basically, it looks like the hiding via .x-hidden-clip

    clip: rect(0, 0, 0, 0);

    does not fully work on Chrome. The hidden el is not visible, but can still trigger scrollbars.

    This does not happen on Firefox or IE11.

    Hiding with display: none works, but I suspect that will interfere with ARIA?

    Not sure why clip was chosen here or what advantage it has over offset hiding?


  2. #2
    Sencha - Ext JS Dev Team nohuhu's Avatar
    Join Date
    Jun 2011
    Location
    Redwood coast
    Posts
    402

    Default

    BobR,

    ariaErrorEl is the element that we use to make screen reader announcements when validation state changes for a field. Hiding it offscreen or via display:none will break screen reader compatibility.

    Looks like this is a bug in Chrome but we probably will have to find a workaround for it.
    Regards,
    Alex.

  3. #3
    Sencha - Ext JS Dev Team nohuhu's Avatar
    Join Date
    Jun 2011
    Location
    Redwood coast
    Posts
    402

    Default

    Thanks for the report! I have opened a bug in our bug tracker.

  4. #4
    Sencha Premium User
    Join Date
    Nov 2015
    Location
    Sydney, Australia
    Posts
    38

    Default

    Quote Originally Posted by nohuhu View Post
    Hiding it offscreen or via display:none will break screen reader compatibility.
    Ah, that's what I was afraid of.

    Quote Originally Posted by nohuhu View Post
    Looks like this is a bug in Chrome but we probably will have to find a workaround for it.
    I wonder if screen readers will care if the font size is adjusted? Maybe `font-size: 0px;`

    Edit: this site suggests font-size might work: http://webaim.org/techniques/css/invisiblecontent/

  5. #5
    Sencha - Ext JS Dev Team nohuhu's Avatar
    Join Date
    Jun 2011
    Location
    Redwood coast
    Posts
    402

    Default

    I haven't tried setting font size to 0 so can't tell if that would work or not, but I think it probably should. Give it a try. ;)
    Regards,
    Alex.

  6. #6
    Sencha Premium Member
    Join Date
    Oct 2015
    Posts
    22

    Default

    Did you find any good workaround for this problem?

  7. #7

    Default

    How is this coming along?

Similar Threads

  1. Overflow hidden on html by GXT
    By ifedik in forum Sencha GXT 3.1
    Replies: 1
    Last Post: 4 Apr 2016, 11:07 PM
  2. Replies: 3
    Last Post: 2 Oct 2015, 5:40 AM
  3. Scrollbars for buttons that are hidden
    By samshu in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 15 Sep 2010, 4:29 AM
  4. IE 8 - FormPanel scrollbars/overflow not working in window
    By dwfresh in forum Ext 3.x: Help & Discussion
    Replies: 12
    Last Post: 24 Feb 2010, 2:37 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •