From 2a7150bf6ff862efa96ca724141431d426f20772 Mon Sep 17 00:00:00 2001 From: neuroalien <105230050+neuroalien@users.noreply.github.com> Date: Sun, 28 Jan 2024 11:06:53 +0000 Subject: [PATCH] AO3-6566 ARIA controls must contain the exact ID (#4590) The ID of the modal controlled by the link to modal is `modal`. The hash sign must not be included in the reference to the element. As per Sarken's comment, I've removed the redundant setting of the aria attribute in HTML options, since it's always overwritten by the JavaScript. --- app/helpers/application_helper.rb | 2 +- public/javascripts/ao3modal.js | 2 +- public/javascripts/ao3modal.min.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index 8f5054c9782..616ad862b04 100755 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -150,7 +150,7 @@ def link_to_modal(content = "", options = {}) options[:for] ||= "" options[:title] ||= options[:for] - html_options = { "class" => options[:class] + " modal", "title" => options[:title], "aria-controls" => "#modal" } + html_options = { class: "#{options[:class]} modal", title: options[:title] } link_to content, options[:for], html_options end diff --git a/public/javascripts/ao3modal.js b/public/javascripts/ao3modal.js index b2b161a9a25..3f16fae3a5e 100644 --- a/public/javascripts/ao3modal.js +++ b/public/javascripts/ao3modal.js @@ -193,7 +193,7 @@ jQuery(document).ready(function() { .append(img); a.addClass('modal modal-attached') - .attr('aria-controls', '#modal') + .attr('aria-controls', 'modal') .filter(function() { return $(this).closest('.userstuff').length === 0; }).click(function(event){ diff --git a/public/javascripts/ao3modal.min.js b/public/javascripts/ao3modal.min.js index 8220d37f538..612e7128521 100644 --- a/public/javascripts/ao3modal.min.js +++ b/public/javascripts/ao3modal.min.js @@ -1 +1 @@ -jQuery(document).ready((function(){window.ao3modal=function(t){var e,a,i,o,s,n,l,d,r,c,p,h,m=!1,g=t("
",{id:"modal-bg"}).addClass("modal-closer"),f=t("
").addClass("loading"),u=t("
",{id:"modal-wrap"}).addClass("modal-closer"),v=t("
",{id:"modal"}),w=t("
").addClass("content userstuff"),b=t("").addClass("action modal-closer").click((function(t){t.preventDefault()})).attr("href","#").text("Close"),y=t("").addClass("title"),k=(l=navigator.userAgent||navigator.vendor||window.opera,/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(ad|hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(l)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(l.substr(0,4))),x=-1,C=k?0:(o=t("

").css({width:"100%",height:200}),s=t("

").css({height:150,left:0,overflow:"hidden",top:0,visibility:"hidden",width:200}).append(o).appendTo(t("body")),n=o[0].offsetWidth,s.css("overflow","scroll"),n==(i=o[0].offsetWidth)&&(i=s[0].clientWidth),s.remove(),n-i);function z(e){k||t("body").css({"margin-right":e?"":C,overflow:e?"":"hidden",height:e?"":g.height()})}function O(){var a,i,o=!v.is(":visible");k&&x<0&&(x=t(window).scrollTop()),o&&v.css("opacity",0).show(),v.removeClass("tall"),v.hasClass("img")?(w.children("img").first(),v.toggleClass("tall",v.height()>=.95*g.height())):k||(a=g.height()*e.scale,i=Math.min(a,e.max),v.toggleClass("tall",!i||v[0].scrollHeight>i)),o&&v.hide().css("opacity",""),k?u.css("top",x):u.css("top",t(window).scrollTop())}function j(e,i){m=!1,w.empty(),e instanceof t?w.append(e):w.html(e),i=i instanceof t?i:t("").addClass("title").text(i||""),y.replaceWith(i),y=i,w.is(":empty")||(O(),w.is(":visible")||(a.toggleHandlers(!0),f.hide(),v.fadeIn((function(){w.focus()}))))}function D(e,a){if(v.hide(),u.show(),t.support.opacity?g.add(f).fadeIn():g.add(f).show(),z(!1),m=!0,0===e.indexOf("#"))j(t(e).html(),a||"");else if(e.indexOf(".jpg")==e.length-4||e.indexOf(".gif")==e.length-4||e.indexOf(".bmp")==e.length-4||e.indexOf(".png")==e.length-4){v.addClass("img");var i=t("").appendTo(t("body")).attr("src",e),o=function(){var o=t("").addClass("title").attr({href:e,title:"View original",target:"_blank"}).text(a||(-1!=e.indexOf("/")?e.substring(e.lastIndexOf("/")+1):e)).css("text-decoration","underline");i.remove(),m&&(a&&i.attr("alt",a),j(i[0],o))};i[0].complete?o():i.load(o)}else t.ajax({url:e,success:function(t){m&&j(t,a)}})}function T(){m=!1,y.text(""),a.toggleHandlers(!1),u.fadeOut((function(){j(""),z(!0),v.css("width","").removeClass("tall img"),k&&x>=0&&(t("html, body").animate({scrollTop:x},"fast"),x=-1)})),t.support.opacity?g.fadeOut():g.hide()}function q(e){e.each((function(){var e=!!t(this).is("img")&&t(this).removeClass("modal"),a=e?t("").css("border","none").attr({title:e.attr("title")||e.attr("alt"),href:e.attr("src")}).replaceAll(e).append(e):t(this);a.addClass("modal modal-attached").attr("aria-controls","#modal").filter((function(){return 0===t(this).closest(".userstuff").length})).click((function(e){D(t(this).attr("href"),t(this).attr("title")),e.preventDefault()})),0===a.attr("href").indexOf("#")&&t(a.attr("href")).hide()}))}return t("body").append(g.append(f),u.append(v.append(w,t("
").addClass("footer").append(y,b)).trap())),e=k?null:(d={},(r=v.clone()).css("margin-top",9001).addClass("tall").appendTo(g),d.scale=r.height()?parseInt(r.css("height"))/100:.8,d.max=parseInt(r.css("max-height")),r.remove(),d),t("body").click((function(e){(t(e.target).hasClass("modal-closer")||v.hasClass("img")&&t(e.target).hasClass("content"))&&T()})),t(window).resize((function(){v.is(":visible")&&O()})),c={38:-20,40:20,33:-200,34:200},p=!1,h={keydown:function(e){if(c[e.which])w[0].scrollTop+=c[e.which],e.preventDefault();else if(v.is(":visible")){var a=e.target,i=a.tagName.toLowerCase(),o=27==e.which,s=13==e.which,n=/^(input|textarea|a|button)$/.test(i),l=!!t(a).closest("#modal")[0];!o&&(!s||l&&n)||T();var d=e.ctrlKey||e.metaKey;(o||!l&&!d||s&&!n)&&(e.preventDefault(),e.stopPropagation())}},keypress:function(t){c[t.which]&&t.preventDefault()},keyup:function(t){c[t.which]?t.preventDefault():9!=t.which||p||(b.focus(),p=!0,t.preventDefault())}},a={toggleHandlers:function(e){for(var a in p=!1,h)h.hasOwnProperty(a)&&(e?t("body").on(a,h[a]):t("body").off(a,h[a]))}},q(t("a.modal, img.modal")),t("body").on("click","a.modal, img.modal",(function(e){var a=t(this);a.is(".modal-attached")||(q(a),e.preventDefault(),a.is("img")?a.parent().click():a.click())})),{show:D,setContent:j,hide:T,addLink:q}}(jQuery)})); +jQuery(document).ready(function(){window.ao3modal=function(t){var e,a,i,o,s,l,n,d,c,r,p,h,m=!1,$=t("
",{id:"modal-bg"}).addClass("modal-closer"),f=t("
").addClass("loading"),g=t("
",{id:"modal-wrap"}).addClass("modal-closer"),u=t("
",{id:"modal"}),v=t("
").addClass("content userstuff"),w=t("").addClass("action modal-closer").click(function(t){t.preventDefault()}).attr("href","#").text("Close"),b=t("").addClass("title"),_=(l=navigator.userAgent||navigator.vendor||window.opera,/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(ad|hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(l)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(l.substr(0,4))),k=-1,y=_?0:(d=t("

").css({width:"100%",height:200}),c=t("

").css({height:150,left:0,overflow:"hidden",top:0,visibility:"hidden",width:200}).append(d).appendTo(t("body")),r=d[0].offsetWidth,c.css("overflow","scroll"),r==(n=d[0].offsetWidth)&&(n=c[0].clientWidth),c.remove(),r-n);function x(e){!_&&t("body").css({"margin-right":e?"":y,overflow:e?"":"hidden",height:e?"":$.height()})}function C(){var e,a,i,o=!u.is(":visible");_&&k<0&&(k=t(window).scrollTop()),o&&u.css("opacity",0).show(),u.removeClass("tall"),u.hasClass("img")?(e=v.children("img").first(),u.toggleClass("tall",u.height()>=.95*$.height())):_||(i=Math.min(a=$.height()*p.scale,p.max),u.toggleClass("tall",!i||u[0].scrollHeight>i)),o&&u.hide().css("opacity",""),_?g.css("top",k):g.css("top",t(window).scrollTop())}function z(e,a){m=!1,v.empty(),e instanceof t?v.append(e):v.html(e),a=a instanceof t?a:t("").addClass("title").text(a||""),b.replaceWith(a),b=a,v.is(":empty")||(C(),v.is(":visible")||(h.toggleHandlers(!0),f.hide(),u.fadeIn(function(){v.focus()})))}function O(e,a){if(u.hide(),g.show(),t.support.opacity?$.add(f).fadeIn():$.add(f).show(),x(!1),m=!0,0===e.indexOf("#"))z(t(e).html(),a||"");else if(e.indexOf(".jpg")==e.length-4||e.indexOf(".gif")==e.length-4||e.indexOf(".bmp")==e.length-4||e.indexOf(".png")==e.length-4){u.addClass("img");var i=t("").appendTo(t("body")).attr("src",e),o=function(){var o=t("").addClass("title").attr({href:e,title:"View original",target:"_blank"}).text(a||(-1!=e.indexOf("/")?e.substring(e.lastIndexOf("/")+1):e)).css("text-decoration","underline");i.remove(),m&&(a&&i.attr("alt",a),z(i[0],o))};i[0].complete?o():i.load(o)}else t.ajax({url:e,success:function(t){m&&z(t,a)}})}function D(){m=!1,b.text(""),h.toggleHandlers(!1),g.fadeOut(function(){z(""),x(!0),u.css("width","").removeClass("tall img"),_&&k>=0&&(t("html, body").animate({scrollTop:k},"fast"),k=-1)}),t.support.opacity?$.fadeOut():$.hide()}function j(e){e.each(function(){var e=!!t(this).is("img")&&t(this).removeClass("modal"),a=e?t("").css("border","none").attr({title:e.attr("title")||e.attr("alt"),href:e.attr("src")}).replaceAll(e).append(e):t(this);a.addClass("modal modal-attached").attr("aria-controls","modal").filter(function(){return 0===t(this).closest(".userstuff").length}).click(function(e){O(t(this).attr("href"),t(this).attr("title")),e.preventDefault()}),0===a.attr("href").indexOf("#")&&t(a.attr("href")).hide()})}return t("body").append($.append(f),g.append(u.append(v,t("
").addClass("footer").append(b,w)).trap())),p=_?null:(e={},(a=u.clone()).css("margin-top",9001).addClass("tall").appendTo($),e.scale=a.height()?parseInt(a.css("height"))/100:.8,e.max=parseInt(a.css("max-height")),a.remove(),e),t("body").click(function(e){(t(e.target).hasClass("modal-closer")||u.hasClass("img")&&t(e.target).hasClass("content"))&&D()}),t(window).resize(function(){u.is(":visible")&&C()}),h=(i={38:-20,40:20,33:-200,34:200},o=!1,s={keydown:function(e){if(i[e.which])v[0].scrollTop+=i[e.which],e.preventDefault();else if(u.is(":visible")){var a=e.target,o=a.tagName.toLowerCase(),s=27==e.which,l=13==e.which,n=/^(input|textarea|a|button)$/.test(o),d=!!t(a).closest("#modal")[0];(s||l&&(!d||!n))&&D();var c=e.ctrlKey||e.metaKey;!s&&(d||c)&&(!l||n)||(e.preventDefault(),e.stopPropagation())}},keypress:function(t){i[t.which]&&t.preventDefault()},keyup:function(t){i[t.which]?t.preventDefault():9!=t.which||o||(w.focus(),o=!0,t.preventDefault())}},{toggleHandlers:function(e){for(var a in o=!1,s)s.hasOwnProperty(a)&&(e?t("body").on(a,s[a]):t("body").off(a,s[a]))}}),j(t("a.modal, img.modal")),t("body").on("click","a.modal, img.modal",function(e){var a=t(this);!a.is(".modal-attached")&&(j(a),e.preventDefault(),a.is("img")?a.parent().click():a.click())}),{show:O,setContent:z,hide:D,addLink:j}}(jQuery)});