{"id":23165,"date":"2014-12-15T13:07:44","date_gmt":"2014-12-15T11:07:44","guid":{"rendered":"https:\/\/mamchenkov.net\/wordpress\/?p=23165"},"modified":"2014-12-15T13:07:44","modified_gmt":"2014-12-15T11:07:44","slug":"focusable-set-a-spotlight-focus-on-dom-element-adding-a-overlay-layer-to-the-rest-of-the-page","status":"publish","type":"post","link":"https:\/\/mamchenkov.net\/wordpress\/2014\/12\/15\/focusable-set-a-spotlight-focus-on-dom-element-adding-a-overlay-layer-to-the-rest-of-the-page\/","title":{"rendered":"focusable &#8211; set a spotlight focus on DOM element adding a overlay layer to the rest of the page"},"content":{"rendered":"<!-- google_ad_section_start -->\n<p><a href=\"https:\/\/github.com\/zzarcon\/focusable\">focusable<\/a> &#8211; set a spotlight focus on DOM element adding a overlay layer to the rest of the page<\/p>\n<p><a href=\"https:\/\/i0.wp.com\/mamchenkov.net\/wordpress\/wp-content\/uploads\/2014\/12\/focusable.gif?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" data-attachment-id=\"23166\" data-permalink=\"https:\/\/mamchenkov.net\/wordpress\/2014\/12\/15\/focusable-set-a-spotlight-focus-on-dom-element-adding-a-overlay-layer-to-the-rest-of-the-page\/focusable\/\" data-orig-file=\"https:\/\/i0.wp.com\/mamchenkov.net\/wordpress\/wp-content\/uploads\/2014\/12\/focusable.gif?fit=475%2C491&amp;ssl=1\" data-orig-size=\"475,491\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"focusable\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/mamchenkov.net\/wordpress\/wp-content\/uploads\/2014\/12\/focusable.gif?fit=475%2C491&amp;ssl=1\" class=\"aligncenter size-full wp-image-23166\" src=\"https:\/\/i0.wp.com\/mamchenkov.net\/wordpress\/wp-content\/uploads\/2014\/12\/focusable.gif?resize=475%2C491&#038;ssl=1\" alt=\"focusable\" width=\"475\" height=\"491\" \/><\/a><\/p>\n<!-- google_ad_section_end -->\n","protected":false},"excerpt":{"rendered":"<!-- google_ad_section_start -->\n<p>focusable &#8211; set a spotlight focus on DOM element adding a overlay layer to the rest of the page<\/p>\n<!-- google_ad_section_end -->\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"link","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"focusable - set a spotlight focus on DOM element adding a overlay layer to the rest of the page #WebDev","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false,"_links_to":"","_links_to_target":""},"categories":[1,18,62,1334],"tags":[1330],"keyring_services":[],"class_list":["post-23165","post","type-post","status-publish","format-link","hentry","category-general","category-programming","category-technology","category-web-work","tag-web-development","post_format-post-format-link"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 4.9.10 - aioseo.com -->\n\t<meta name=\"description\" content=\"focusable - set a spotlight focus on DOM element adding a overlay layer to the rest of the page\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Leonid Mamchenkov\"\/>\n\t<meta name=\"google-site-verification\" content=\"VHvdD0_usx1_4DzKy_QCVcICVgX2EgA2ybELT-wl7kQ\" \/>\n\t<link rel=\"canonical\" href=\"https:\/\/mamchenkov.net\/wordpress\/2014\/12\/15\/focusable-set-a-spotlight-focus-on-dom-element-adding-a-overlay-layer-to-the-rest-of-the-page\/\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 4.9.10\" \/>\n\t\t<meta property=\"og:locale\" content=\"en_US\" \/>\n\t\t<meta property=\"og:site_name\" content=\"Leonid Mamchenkov - Life, universe, and everything else\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"focusable \u2013 set a spotlight focus on DOM element adding a overlay layer to the rest of the page - Leonid Mamchenkov\" \/>\n\t\t<meta property=\"og:description\" content=\"focusable - set a spotlight focus on DOM element adding a overlay layer to the rest of the page\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/mamchenkov.net\/wordpress\/2014\/12\/15\/focusable-set-a-spotlight-focus-on-dom-element-adding-a-overlay-layer-to-the-rest-of-the-page\/\" \/>\n\t\t<meta property=\"og:image\" content=\"https:\/\/mamchenkov.net\/wordpress\/wp-content\/uploads\/2026\/03\/leonid-sailing-beer.jpg\" \/>\n\t\t<meta property=\"og:image:secure_url\" content=\"https:\/\/mamchenkov.net\/wordpress\/wp-content\/uploads\/2026\/03\/leonid-sailing-beer.jpg\" \/>\n\t\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t\t<meta property=\"og:image:height\" content=\"1024\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2014-12-15T11:07:44+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2014-12-15T11:07:44+00:00\" \/>\n\t\t<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/MamchenkovBlog\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n\t\t<meta name=\"twitter:site\" content=\"@mamchenkov\" \/>\n\t\t<meta name=\"twitter:title\" content=\"focusable \u2013 set a spotlight focus on DOM element adding a overlay layer to the rest of the page - Leonid Mamchenkov\" \/>\n\t\t<meta name=\"twitter:description\" content=\"focusable - set a spotlight focus on DOM element adding a overlay layer to the rest of the page\" \/>\n\t\t<meta name=\"twitter:creator\" content=\"@mamchenkov\" \/>\n\t\t<meta name=\"twitter:image\" content=\"https:\/\/mamchenkov.net\/wordpress\/wp-content\/uploads\/2026\/03\/leonid-sailing-beer.jpg\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"BlogPosting\",\"@id\":\"https:\\\/\\\/mamchenkov.net\\\/wordpress\\\/2014\\\/12\\\/15\\\/focusable-set-a-spotlight-focus-on-dom-element-adding-a-overlay-layer-to-the-rest-of-the-page\\\/#blogposting\",\"name\":\"focusable \\u2013 set a spotlight focus on DOM element adding a overlay layer to the rest of the page - Leonid Mamchenkov\",\"headline\":\"focusable &#8211; set a spotlight focus on DOM element adding a overlay layer to the rest of the page\",\"author\":{\"@id\":\"https:\\\/\\\/mamchenkov.net\\\/wordpress\\\/author\\\/leonid\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/mamchenkov.net\\\/wordpress\\\/#person\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/mamchenkov.net\\\/wordpress\\\/wp-content\\\/uploads\\\/2014\\\/12\\\/focusable.gif?fit=475%2C491&ssl=1\",\"@id\":\"https:\\\/\\\/mamchenkov.net\\\/wordpress\\\/2014\\\/12\\\/15\\\/focusable-set-a-spotlight-focus-on-dom-element-adding-a-overlay-layer-to-the-rest-of-the-page\\\/#articleImage\",\"width\":475,\"height\":491},\"datePublished\":\"2014-12-15T13:07:44+02:00\",\"dateModified\":\"2014-12-15T13:07:44+02:00\",\"inLanguage\":\"en-US\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/mamchenkov.net\\\/wordpress\\\/2014\\\/12\\\/15\\\/focusable-set-a-spotlight-focus-on-dom-element-adding-a-overlay-layer-to-the-rest-of-the-page\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/mamchenkov.net\\\/wordpress\\\/2014\\\/12\\\/15\\\/focusable-set-a-spotlight-focus-on-dom-element-adding-a-overlay-layer-to-the-rest-of-the-page\\\/#webpage\"},\"articleSection\":\"All, Programming, Technology, Web work, web development, Link\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/mamchenkov.net\\\/wordpress\\\/2014\\\/12\\\/15\\\/focusable-set-a-spotlight-focus-on-dom-element-adding-a-overlay-layer-to-the-rest-of-the-page\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/mamchenkov.net\\\/wordpress#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/mamchenkov.net\\\/wordpress\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/mamchenkov.net\\\/wordpress\\\/category\\\/technology\\\/#listItem\",\"name\":\"Technology\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/mamchenkov.net\\\/wordpress\\\/category\\\/technology\\\/#listItem\",\"position\":2,\"name\":\"Technology\",\"item\":\"https:\\\/\\\/mamchenkov.net\\\/wordpress\\\/category\\\/technology\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/mamchenkov.net\\\/wordpress\\\/category\\\/technology\\\/programming\\\/#listItem\",\"name\":\"Programming\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/mamchenkov.net\\\/wordpress#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/mamchenkov.net\\\/wordpress\\\/category\\\/technology\\\/programming\\\/#listItem\",\"position\":3,\"name\":\"Programming\",\"item\":\"https:\\\/\\\/mamchenkov.net\\\/wordpress\\\/category\\\/technology\\\/programming\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/mamchenkov.net\\\/wordpress\\\/2014\\\/12\\\/15\\\/focusable-set-a-spotlight-focus-on-dom-element-adding-a-overlay-layer-to-the-rest-of-the-page\\\/#listItem\",\"name\":\"focusable &#8211; set a spotlight focus on DOM element adding a overlay layer to the rest of the page\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/mamchenkov.net\\\/wordpress\\\/category\\\/technology\\\/#listItem\",\"name\":\"Technology\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/mamchenkov.net\\\/wordpress\\\/2014\\\/12\\\/15\\\/focusable-set-a-spotlight-focus-on-dom-element-adding-a-overlay-layer-to-the-rest-of-the-page\\\/#listItem\",\"position\":4,\"name\":\"focusable &#8211; set a spotlight focus on DOM element adding a overlay layer to the rest of the page\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/mamchenkov.net\\\/wordpress\\\/category\\\/technology\\\/programming\\\/#listItem\",\"name\":\"Programming\"}}]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/mamchenkov.net\\\/wordpress\\\/#person\",\"name\":\"Leonid Mamchenkov\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/mamchenkov.net\\\/wordpress\\\/2014\\\/12\\\/15\\\/focusable-set-a-spotlight-focus-on-dom-element-adding-a-overlay-layer-to-the-rest-of-the-page\\\/#personImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3cf6df002a284d78fb6e9d8222ca4d102e0832035ed6bc8447008bd234e131a4?s=96&d=identicon&r=g\",\"width\":96,\"height\":96,\"caption\":\"Leonid Mamchenkov\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/mamchenkov.net\\\/wordpress\\\/author\\\/leonid\\\/#author\",\"url\":\"https:\\\/\\\/mamchenkov.net\\\/wordpress\\\/author\\\/leonid\\\/\",\"name\":\"Leonid Mamchenkov\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/mamchenkov.net\\\/wordpress\\\/2014\\\/12\\\/15\\\/focusable-set-a-spotlight-focus-on-dom-element-adding-a-overlay-layer-to-the-rest-of-the-page\\\/#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3cf6df002a284d78fb6e9d8222ca4d102e0832035ed6bc8447008bd234e131a4?s=96&d=identicon&r=g\",\"width\":96,\"height\":96,\"caption\":\"Leonid Mamchenkov\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/mamchenkov.net\\\/wordpress\\\/2014\\\/12\\\/15\\\/focusable-set-a-spotlight-focus-on-dom-element-adding-a-overlay-layer-to-the-rest-of-the-page\\\/#webpage\",\"url\":\"https:\\\/\\\/mamchenkov.net\\\/wordpress\\\/2014\\\/12\\\/15\\\/focusable-set-a-spotlight-focus-on-dom-element-adding-a-overlay-layer-to-the-rest-of-the-page\\\/\",\"name\":\"focusable \\u2013 set a spotlight focus on DOM element adding a overlay layer to the rest of the page - Leonid Mamchenkov\",\"description\":\"focusable - set a spotlight focus on DOM element adding a overlay layer to the rest of the page\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/mamchenkov.net\\\/wordpress\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/mamchenkov.net\\\/wordpress\\\/2014\\\/12\\\/15\\\/focusable-set-a-spotlight-focus-on-dom-element-adding-a-overlay-layer-to-the-rest-of-the-page\\\/#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/mamchenkov.net\\\/wordpress\\\/author\\\/leonid\\\/#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/mamchenkov.net\\\/wordpress\\\/author\\\/leonid\\\/#author\"},\"datePublished\":\"2014-12-15T13:07:44+02:00\",\"dateModified\":\"2014-12-15T13:07:44+02:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/mamchenkov.net\\\/wordpress\\\/#website\",\"url\":\"https:\\\/\\\/mamchenkov.net\\\/wordpress\\\/\",\"name\":\"Blog of Leonid Mamchenkov\",\"description\":\"Life, universe, and everything else\",\"inLanguage\":\"en-US\",\"publisher\":{\"@id\":\"https:\\\/\\\/mamchenkov.net\\\/wordpress\\\/#person\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"focusable \u2013 set a spotlight focus on DOM element adding a overlay layer to the rest of the page - Leonid Mamchenkov","description":"focusable - set a spotlight focus on DOM element adding a overlay layer to the rest of the page","canonical_url":"https:\/\/mamchenkov.net\/wordpress\/2014\/12\/15\/focusable-set-a-spotlight-focus-on-dom-element-adding-a-overlay-layer-to-the-rest-of-the-page\/","robots":"max-image-preview:large","keywords":"","webmasterTools":{"google-site-verification":"VHvdD0_usx1_4DzKy_QCVcICVgX2EgA2ybELT-wl7kQ","miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"BlogPosting","@id":"https:\/\/mamchenkov.net\/wordpress\/2014\/12\/15\/focusable-set-a-spotlight-focus-on-dom-element-adding-a-overlay-layer-to-the-rest-of-the-page\/#blogposting","name":"focusable \u2013 set a spotlight focus on DOM element adding a overlay layer to the rest of the page - Leonid Mamchenkov","headline":"focusable &#8211; set a spotlight focus on DOM element adding a overlay layer to the rest of the page","author":{"@id":"https:\/\/mamchenkov.net\/wordpress\/author\/leonid\/#author"},"publisher":{"@id":"https:\/\/mamchenkov.net\/wordpress\/#person"},"image":{"@type":"ImageObject","url":"https:\/\/i0.wp.com\/mamchenkov.net\/wordpress\/wp-content\/uploads\/2014\/12\/focusable.gif?fit=475%2C491&ssl=1","@id":"https:\/\/mamchenkov.net\/wordpress\/2014\/12\/15\/focusable-set-a-spotlight-focus-on-dom-element-adding-a-overlay-layer-to-the-rest-of-the-page\/#articleImage","width":475,"height":491},"datePublished":"2014-12-15T13:07:44+02:00","dateModified":"2014-12-15T13:07:44+02:00","inLanguage":"en-US","mainEntityOfPage":{"@id":"https:\/\/mamchenkov.net\/wordpress\/2014\/12\/15\/focusable-set-a-spotlight-focus-on-dom-element-adding-a-overlay-layer-to-the-rest-of-the-page\/#webpage"},"isPartOf":{"@id":"https:\/\/mamchenkov.net\/wordpress\/2014\/12\/15\/focusable-set-a-spotlight-focus-on-dom-element-adding-a-overlay-layer-to-the-rest-of-the-page\/#webpage"},"articleSection":"All, Programming, Technology, Web work, web development, Link"},{"@type":"BreadcrumbList","@id":"https:\/\/mamchenkov.net\/wordpress\/2014\/12\/15\/focusable-set-a-spotlight-focus-on-dom-element-adding-a-overlay-layer-to-the-rest-of-the-page\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/mamchenkov.net\/wordpress#listItem","position":1,"name":"Home","item":"https:\/\/mamchenkov.net\/wordpress","nextItem":{"@type":"ListItem","@id":"https:\/\/mamchenkov.net\/wordpress\/category\/technology\/#listItem","name":"Technology"}},{"@type":"ListItem","@id":"https:\/\/mamchenkov.net\/wordpress\/category\/technology\/#listItem","position":2,"name":"Technology","item":"https:\/\/mamchenkov.net\/wordpress\/category\/technology\/","nextItem":{"@type":"ListItem","@id":"https:\/\/mamchenkov.net\/wordpress\/category\/technology\/programming\/#listItem","name":"Programming"},"previousItem":{"@type":"ListItem","@id":"https:\/\/mamchenkov.net\/wordpress#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/mamchenkov.net\/wordpress\/category\/technology\/programming\/#listItem","position":3,"name":"Programming","item":"https:\/\/mamchenkov.net\/wordpress\/category\/technology\/programming\/","nextItem":{"@type":"ListItem","@id":"https:\/\/mamchenkov.net\/wordpress\/2014\/12\/15\/focusable-set-a-spotlight-focus-on-dom-element-adding-a-overlay-layer-to-the-rest-of-the-page\/#listItem","name":"focusable &#8211; set a spotlight focus on DOM element adding a overlay layer to the rest of the page"},"previousItem":{"@type":"ListItem","@id":"https:\/\/mamchenkov.net\/wordpress\/category\/technology\/#listItem","name":"Technology"}},{"@type":"ListItem","@id":"https:\/\/mamchenkov.net\/wordpress\/2014\/12\/15\/focusable-set-a-spotlight-focus-on-dom-element-adding-a-overlay-layer-to-the-rest-of-the-page\/#listItem","position":4,"name":"focusable &#8211; set a spotlight focus on DOM element adding a overlay layer to the rest of the page","previousItem":{"@type":"ListItem","@id":"https:\/\/mamchenkov.net\/wordpress\/category\/technology\/programming\/#listItem","name":"Programming"}}]},{"@type":"Person","@id":"https:\/\/mamchenkov.net\/wordpress\/#person","name":"Leonid Mamchenkov","image":{"@type":"ImageObject","@id":"https:\/\/mamchenkov.net\/wordpress\/2014\/12\/15\/focusable-set-a-spotlight-focus-on-dom-element-adding-a-overlay-layer-to-the-rest-of-the-page\/#personImage","url":"https:\/\/secure.gravatar.com\/avatar\/3cf6df002a284d78fb6e9d8222ca4d102e0832035ed6bc8447008bd234e131a4?s=96&d=identicon&r=g","width":96,"height":96,"caption":"Leonid Mamchenkov"}},{"@type":"Person","@id":"https:\/\/mamchenkov.net\/wordpress\/author\/leonid\/#author","url":"https:\/\/mamchenkov.net\/wordpress\/author\/leonid\/","name":"Leonid Mamchenkov","image":{"@type":"ImageObject","@id":"https:\/\/mamchenkov.net\/wordpress\/2014\/12\/15\/focusable-set-a-spotlight-focus-on-dom-element-adding-a-overlay-layer-to-the-rest-of-the-page\/#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/3cf6df002a284d78fb6e9d8222ca4d102e0832035ed6bc8447008bd234e131a4?s=96&d=identicon&r=g","width":96,"height":96,"caption":"Leonid Mamchenkov"}},{"@type":"WebPage","@id":"https:\/\/mamchenkov.net\/wordpress\/2014\/12\/15\/focusable-set-a-spotlight-focus-on-dom-element-adding-a-overlay-layer-to-the-rest-of-the-page\/#webpage","url":"https:\/\/mamchenkov.net\/wordpress\/2014\/12\/15\/focusable-set-a-spotlight-focus-on-dom-element-adding-a-overlay-layer-to-the-rest-of-the-page\/","name":"focusable \u2013 set a spotlight focus on DOM element adding a overlay layer to the rest of the page - Leonid Mamchenkov","description":"focusable - set a spotlight focus on DOM element adding a overlay layer to the rest of the page","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/mamchenkov.net\/wordpress\/#website"},"breadcrumb":{"@id":"https:\/\/mamchenkov.net\/wordpress\/2014\/12\/15\/focusable-set-a-spotlight-focus-on-dom-element-adding-a-overlay-layer-to-the-rest-of-the-page\/#breadcrumblist"},"author":{"@id":"https:\/\/mamchenkov.net\/wordpress\/author\/leonid\/#author"},"creator":{"@id":"https:\/\/mamchenkov.net\/wordpress\/author\/leonid\/#author"},"datePublished":"2014-12-15T13:07:44+02:00","dateModified":"2014-12-15T13:07:44+02:00"},{"@type":"WebSite","@id":"https:\/\/mamchenkov.net\/wordpress\/#website","url":"https:\/\/mamchenkov.net\/wordpress\/","name":"Blog of Leonid Mamchenkov","description":"Life, universe, and everything else","inLanguage":"en-US","publisher":{"@id":"https:\/\/mamchenkov.net\/wordpress\/#person"}}]},"og:locale":"en_US","og:site_name":"Leonid Mamchenkov - Life, universe, and everything else","og:type":"article","og:title":"focusable \u2013 set a spotlight focus on DOM element adding a overlay layer to the rest of the page - Leonid Mamchenkov","og:description":"focusable - set a spotlight focus on DOM element adding a overlay layer to the rest of the page","og:url":"https:\/\/mamchenkov.net\/wordpress\/2014\/12\/15\/focusable-set-a-spotlight-focus-on-dom-element-adding-a-overlay-layer-to-the-rest-of-the-page\/","og:image":"https:\/\/mamchenkov.net\/wordpress\/wp-content\/uploads\/2026\/03\/leonid-sailing-beer.jpg","og:image:secure_url":"https:\/\/mamchenkov.net\/wordpress\/wp-content\/uploads\/2026\/03\/leonid-sailing-beer.jpg","og:image:width":1024,"og:image:height":1024,"article:published_time":"2014-12-15T11:07:44+00:00","article:modified_time":"2014-12-15T11:07:44+00:00","article:publisher":"https:\/\/www.facebook.com\/MamchenkovBlog","twitter:card":"summary_large_image","twitter:site":"@mamchenkov","twitter:title":"focusable \u2013 set a spotlight focus on DOM element adding a overlay layer to the rest of the page - Leonid Mamchenkov","twitter:description":"focusable - set a spotlight focus on DOM element adding a overlay layer to the rest of the page","twitter:creator":"@mamchenkov","twitter:image":"https:\/\/mamchenkov.net\/wordpress\/wp-content\/uploads\/2026\/03\/leonid-sailing-beer.jpg"},"aioseo_meta_data":{"post_id":"23165","title":null,"description":null,"keywords":null,"keyphrases":null,"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":null,"og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"BlogPosting","isEnabled":true},"graphs":[]},"schema_type":"default","schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":null,"robots_max_videopreview":null,"robots_max_imagepreview":"large","priority":null,"frequency":null,"local_seo":null,"breadcrumb_settings":null,"limit_modified_date":false,"ai":null,"created":"2023-07-19 11:33:33","updated":"2026-01-15 11:00:40","seo_analyzer_scan_date":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/mamchenkov.net\/wordpress\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/mamchenkov.net\/wordpress\/category\/technology\/\" title=\"Technology\">Technology<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/mamchenkov.net\/wordpress\/category\/technology\/programming\/\" title=\"Programming\">Programming<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tfocusable \u2013 set a spotlight focus on DOM element adding a overlay layer to the rest of the page\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/mamchenkov.net\/wordpress"},{"label":"Technology","link":"https:\/\/mamchenkov.net\/wordpress\/category\/technology\/"},{"label":"Programming","link":"https:\/\/mamchenkov.net\/wordpress\/category\/technology\/programming\/"},{"label":"focusable &#8211; set a spotlight focus on DOM element adding a overlay layer to the rest of the page","link":"https:\/\/mamchenkov.net\/wordpress\/2014\/12\/15\/focusable-set-a-spotlight-focus-on-dom-element-adding-a-overlay-layer-to-the-rest-of-the-page\/"}],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":8933,"url":"https:\/\/mamchenkov.net\/wordpress\/2005\/05\/05\/sleeping-beauty\/","url_meta":{"origin":23165,"position":0},"title":"Sleeping beauty","author":"Leonid Mamchenkov","date":"May 5, 2005","format":false,"excerpt":"One of the things Maxim got from me is his ability to sleep with semiopen eyes. Sometimes they are wide open, sometimes they are open just a tiny bit. Can you see a light reflection in his eye on this picture? Well, that's a tiny bit open eye... On the\u2026","rel":"","context":"In &quot;All&quot;","block_context":{"text":"All","link":"https:\/\/mamchenkov.net\/wordpress\/category\/general\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":18895,"url":"https:\/\/mamchenkov.net\/wordpress\/2013\/12\/01\/oridomi-fold-dom-elements-like-paper\/","url_meta":{"origin":23165,"position":1},"title":"OriDomi &#8211; fold DOM elements like paper","author":"Leonid Mamchenkov","date":"December 1, 2013","format":"link","excerpt":"OriDomi - fold DOM elements like paper","rel":"","context":"In &quot;All&quot;","block_context":{"text":"All","link":"https:\/\/mamchenkov.net\/wordpress\/category\/general\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":22474,"url":"https:\/\/mamchenkov.net\/wordpress\/2014\/09\/03\/page-monitor-capture-webpage-and-diff-the-dom-change-with-phantomjs\/","url_meta":{"origin":23165,"position":2},"title":"page-monitor &#8211; capture webpage and diff the dom change with phantomjs","author":"Leonid Mamchenkov","date":"September 3, 2014","format":"link","excerpt":"page-monitor - capture webpage and diff the dom change with phantomjs","rel":"","context":"In &quot;All&quot;","block_context":{"text":"All","link":"https:\/\/mamchenkov.net\/wordpress\/category\/general\/"},"img":{"alt_text":"page-monitor","src":"https:\/\/i0.wp.com\/mamchenkov.net\/wordpress\/wp-content\/uploads\/2014\/09\/page-monitor-500x495.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":21887,"url":"https:\/\/mamchenkov.net\/wordpress\/2014\/05\/30\/jsaction-a-tiny-event-delegation-library\/","url_meta":{"origin":23165,"position":3},"title":"JsAction &#8211; a tiny event delegation library","author":"Leonid Mamchenkov","date":"May 30, 2014","format":"link","excerpt":"JsAction - a tiny event delegation library JsAction is a tiny event delegation library that allows decoupling the DOM nodes on which the action occurs from the JavaScript code that handles the action. The traditional way of adding an event handler is to obtain a reference to the node and\u2026","rel":"","context":"In &quot;All&quot;","block_context":{"text":"All","link":"https:\/\/mamchenkov.net\/wordpress\/category\/general\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":25997,"url":"https:\/\/mamchenkov.net\/wordpress\/2016\/04\/04\/share-your-public-keys-easily-with-github\/","url_meta":{"origin":23165,"position":4},"title":"Share your public keys easily with GitHub","author":"Leonid Mamchenkov","date":"April 4, 2016","format":false,"excerpt":"Here's a handy thing that I didn't know about - you can easily share your public keys by adding them to your GitHub account and then accessing the URL of the form https:\/\/github.com\/YOUR_USERNAME.keys . \u00a0What you get is a plain text response with all your public keys, ready to be\u2026","rel":"","context":"In &quot;All&quot;","block_context":{"text":"All","link":"https:\/\/mamchenkov.net\/wordpress\/category\/general\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":18624,"url":"https:\/\/mamchenkov.net\/wordpress\/2013\/09\/23\/simperium-cross-platform-data-layer\/","url_meta":{"origin":23165,"position":5},"title":"Simperium &#8211; cross-platform data layer","author":"Leonid Mamchenkov","date":"September 23, 2013","format":"link","excerpt":"Simperium - cross-platform data layer","rel":"","context":"In &quot;All&quot;","block_context":{"text":"All","link":"https:\/\/mamchenkov.net\/wordpress\/category\/general\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"jetpack_sharing_enabled":true,"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/mamchenkov.net\/wordpress\/wp-json\/wp\/v2\/posts\/23165","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mamchenkov.net\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mamchenkov.net\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mamchenkov.net\/wordpress\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/mamchenkov.net\/wordpress\/wp-json\/wp\/v2\/comments?post=23165"}],"version-history":[{"count":0,"href":"https:\/\/mamchenkov.net\/wordpress\/wp-json\/wp\/v2\/posts\/23165\/revisions"}],"wp:attachment":[{"href":"https:\/\/mamchenkov.net\/wordpress\/wp-json\/wp\/v2\/media?parent=23165"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mamchenkov.net\/wordpress\/wp-json\/wp\/v2\/categories?post=23165"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mamchenkov.net\/wordpress\/wp-json\/wp\/v2\/tags?post=23165"},{"taxonomy":"keyring_services","embeddable":true,"href":"https:\/\/mamchenkov.net\/wordpress\/wp-json\/wp\/v2\/keyring_services?post=23165"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}