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.
Comment | File | Size | Author |
---|---|---|---|
#5 | Where_Skip_to_Main_Does_Go.png | 63.56 KB | mgifford |
#5 | Where_Skip_to_Main_Should_Go.png | 78.16 KB | mgifford |
#2 | displace-anchorfocus2.patch | 4.4 KB | casey |
displace-anchorfocus.patch | 4 KB | casey | |
Comments
Comment #1
casey CreditAttribution: casey commentedtagging
Comment #2
casey CreditAttribution: casey commentedMaking it work for IE.
Comment #3
Kiphaas7 CreditAttribution: Kiphaas7 commentedsub
Comment #4
mgifford#2: displace-anchorfocus2.patch queued for re-testing.
Comment #5
mgiffordOk 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."
Comment #7
mgifford#2: displace-anchorfocus2.patch queued for re-testing.
Comment #9
mgiffordThis 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.
Comment #10
Everett Zufelt CreditAttribution: Everett Zufelt commented@mgifford
I don't understand what 'blocks the top content' means.
Comment #11
mgiffordWhen 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.
Comment #12
mgifford#931408: Move skip link anchor to #content related issue
Comment #13
sun.core CreditAttribution: sun.core commentedLooks like this patch depends on #787940: Generic approach for position:fixed elements like Toolbar, tableHeader
Comment #14
sun.core CreditAttribution: sun.core commentedComment #15
mgiffordI'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.
Comment #16
Larry Jones CreditAttribution: Larry Jones commentedCKEditor 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
Comment #17
nod_#1440628: [Meta] javascript toolbar/tableheader with url fragment mess
Comment #18
mgiffordThis 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.
Comment #19
mgiffordAdding tag so it can be reviewed with the spark code.
Comment #20
webchickHm. I don't see what this has to do with content authoring, so untagging Spark.
Comment #21
webchick?
Comment #22
mgiffordSorry @webchick - I thought that with the reference to CKEditor that it would be related.
Comment #23
mgiffordThis 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...
Comment #24
casey CreditAttribution: casey commented#1870006: HTML5 validation with table sticky header is misaligned over the toolbar could use some reviews.