I found some issues on anchors being invisible due to tableheader and toolbar (displaced elements since #787940: Generic approach for position:fixed elements like Toolbar, tableHeader): #546126: Toolbar interferes with anchor links and #567754: Wrong anchor adjustment in tableheader.js.

In the first we discussed using the hashchange event. This is however not sufficient; to reproduce:
- go to admin/people/permissions#module-filter
- scroll away from the anchor
- press ENTER on the addressbar of your browser; window scrolls to the anchor, the hashchange event however isn't fired.

Therefor I tried it to recognize scroll events triggerd to scroll to the anchor. And with success.

Next issue is that there might be several scripts that want to adjust the scrollTop to get the anchor visible (currently tableheader.js and displace.js). Therefor I introduced a new event "drupalDisplaceAnchor", which is triggered when the location.hash is being scrolled into view.

Then I found out that when using keyboard navigation (TAB) the element being focused is also hidden beneath any displaced element or the tableheader. To solve this I introduced another event "drupalDisplaceFocus", which is being triggered when an element is being focused.

Patch here only solves the problem for displaced elements. Solution for tableheader is included in #787670: Clean up tableheader.js.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

casey’s picture

Issue tags: +Usability

tagging

casey’s picture

Making it work for IE.

Kiphaas7’s picture

sub

mgifford’s picture

#2: displace-anchorfocus2.patch queued for re-testing.

mgifford’s picture

Ok this looks hopeful, but needs to be moved along with CVS. What happened to displace.js

$ ls misc/displace.js
ls: cannot access misc/displace.js: No such file or directory

Adding accessibility tag.

Adding link to duplicate #849918: Skip to Main ends up obscuring the content at the top of the page & bringing over the images I uploaded of the problem.

This is an accessibility issue because:

"when logged in and #toolbar is present, selecting "skip to main content" sets focus to #main-content and the viewport changes so that #content is at the top of the viewport; because #toolbar is overlayed on top of the page, it ends up obscuring the content at the top of the #content and #sidebar-first divs after the viewport changes, and a keyboard user must then manually scroll the viewport, e.g., using the arrow keys; this is especially pronounced when .toolbar-drawer is also open."

Status: Needs review » Needs work
Issue tags: -Usability, -Accessibility

The last submitted patch, displace-anchorfocus2.patch, failed testing.

mgifford’s picture

Status: Needs work » Needs review

#2: displace-anchorfocus2.patch queued for re-testing.

Status: Needs review » Needs work
Issue tags: +Usability, +Accessibility

The last submitted patch, displace-anchorfocus2.patch, failed testing.

mgifford’s picture

Priority: Normal » Major

This is still an issue when folks click on the Skip to Main link in any of the core themes.

It blocks the top content for keyboard users when navigating using the skip links so I'm bumping this up to Major.

Everett Zufelt’s picture

@mgifford

I don't understand what 'blocks the top content' means.

mgifford’s picture

When you use the Skip to Main link you don't see the text you clicked to because it is underneath the toolbar at the top of the page.

So keyboard only users aren't able to see the title of the article that they are trying to see because it is under the shortcuts of the toolbar.

mgifford’s picture

sun.core’s picture

sun.core’s picture

Status: Needs work » Postponed
mgifford’s picture

I'm thinking this should be the duplicate misc/displace.js no longer exists and I find can't seem to find where the functionality went.

Larry Jones’s picture

Title: Anchor/focus hidden beneath toolbar/tableheader (generic solution) » Anchor/focus hidden beneath toolbar/tableheader (CKEditor full screen menu)
Version: 7.x-dev » 7.0-rc4

CKEditor Full Screen mode (with WYSIWYG Module) top menu disappears beneath Toolbar, rendering full screen mode unusable as there is no way to exit full screen mode other than a button hidden under Toolbar.

If top Toolbar cannot push down existing screen content, then a Toolbar hide/unhide or Toolbar toggle on/off control is needed.

I am guessing this issue is related to this thread.

D7rc4
WYSIWYG 7.x-2.x-dev
CKEditor 3.5.0

nod_’s picture

Version: 7.0-rc4 » 8.x-dev
Priority: Major » Normal
Status: Postponed » Needs work
mgifford’s picture

Status: Needs work » Postponed

This is going to be completely coded from the looks of http://drupal.org/project/spark so marking it as postponed so we can check after that's done.

mgifford’s picture

Issue tags: +Spark

Adding tag so it can be reviewed with the spark code.

webchick’s picture

Issue tags: -Spark

Hm. I don't see what this has to do with content authoring, so untagging Spark.

webchick’s picture

?

mgifford’s picture

Sorry @webchick - I thought that with the reference to CKEditor that it would be related.

mgifford’s picture

Status: Postponed » Active

This is still a problem. Going through it with SimplyTest.me, if you make the editor full size and try to get into the edit box with CKEditor it's a real pain. Some 20 tabs to get into the content.

I forget what the keystrokes are for CKEditor's buttons, but think you tab right over them.

Looking at the patch in #1 it needs a complete re-write. misc/displace.js has been removed...

casey’s picture

Status: Active » Closed (duplicate)