search

KittyGiraudel / a11y-dialog

A very lightweight and flexible accessible modal dialog script.
https://a11y-dialog.netlify.app
MIT License
2.42k stars 130 forks source link

Main ID for unknown html markup #56

Closed samikeijonen closed 7 years ago

samikeijonen commented 8 years ago

Thanks for great accessible modal dialog script. I've been looking something like this for a while.

I understand perfectly why there is id="main" or passing the ID as a second parameter. However when I wanted to use this script in public WordPress Plugin where I can only take educated guess about ID names. In other words I don't know html markup.

I guess my question is that would second parameter also be false if I have no clue about the markup?

KittyGiraudel commented 8 years ago

Hello.

Unfortunately, a reference to the main element has to be provided in order for it to work correctly. If you can think of a solution to make it work, we can definitely consider adding it to the library. I’m no WordPress expert at all, so I’m glad to have input on this.

samikeijonen commented 8 years ago

I have couple of ideas which might work if html markup is unknown. I'll get back to you when I have some more time to look at the code.

KittyGiraudel commented 8 years ago

Alright, thank you.

KittyGiraudel commented 7 years ago

Any news on this? :)

samikeijonen commented 7 years ago

I have a demo here where I have integrated a11y dialog in the a plugin.

At the moment I'm just getting the ID like this.

It's not pretty though. I was wondering what would be the correct way of detecting the first element with ID after body?

KittyGiraudel commented 7 years ago

What about $('body').children('[id]').first() given you use jQuery?

samikeijonen commented 7 years ago

Thanks, I'll test it out today.

KittyGiraudel commented 7 years ago

Tell me how it goes. :)

samikeijonen commented 7 years ago

For some reason that code snippet didn't work.

On Jan 9, 2017 4:30 PM, "Hugo Giraudel" notifications@github.com wrote:

Tell me how it goes. :)

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/edenspiekermann/a11y-dialog/issues/56#issuecomment-271297893, or mute the thread https://github.com/notifications/unsubscribe-auth/ABvG__p_UKhlj3jmsSne-9fr8xV7Xwgvks5rQkSUgaJpZM4KwiHN .

KittyGiraudel commented 7 years ago

What node are you trying to reach exactly?

caschbre commented 7 years ago

I'm writing a Drupal module and run into the same situation where the active theme may not have a '#main' element. I provide configuration to let the admin change the ID, but still need to perform a check to make sure it exists, otherwise a11y-dialog throws a warning.

What I do is first check for a '#main' element and if not found then grab the first div child of the body.

var mainEl = document.getElementById('main');
if (!mainEl) {
  mainEl = document.body.getElementsByTagName('div')[0];
}
KittyGiraudel commented 7 years ago

That seams like a relatively fragile check but I don’t know of any better solution. As long as it’s properly documented, I’d say it’s probably fine. :)

caschbre commented 7 years ago

@HugoGiraudel Yes, it's definitely fragile. I provide a configuration page that allows the admin to use something other than '#main', however if that configuration is not changed or for some other reason the admin provided ID isn't available, I'm left to guessing what it should be. I spit out console logs as well in that case so hopefully a site admin / dev can catch it.

KittyGiraudel commented 7 years ago

Sounds good.

robsonsobral commented 7 years ago

May I step in?

Is the <main> being used as a wrapper? If so, it's wrong. From W3C:

The main content area of a document includes content that is unique to that document and excludes content that is repeated across a set of documents such as site navigation links, copyright information, site logos and banners and search forms (unless the document or application’s main function is that of a search form).

Now, a suggestion. May the modal be inserted as <body> last child, on Drupal and WordPress? If so, why not to get all siblings of the modal with exception of <script>, <style> and <link>?

caschbre commented 7 years ago

Now, a suggestion. May the modal be inserted as last child, on Drupal and WordPress? If so, why not to get all siblings of the modal with exception of Githubissues.

  • Githubissues is a development platform for aggregating issues.