diff --git a/R/a11yFileInput.R b/R/a11yFileInput.R index fe97835..070a7e8 100644 --- a/R/a11yFileInput.R +++ b/R/a11yFileInput.R @@ -26,8 +26,10 @@ a11yFileInput <- function( class = "shiny-input-file", name = inputId, type = "file", - style = "position: absolute !important; top: -99999px !important; \ - left: -99999px !important;", + style = "position: absolute !important; top: 0px !important; \ + left: 0px !important; height: 0px !important; width: 0px !important; \ + display: none !important", + tabindex = -1, `data-restore` = restoredValue ) if (multiple) { @@ -55,8 +57,11 @@ a11yFileInput <- function( class = "input-group-btn input-group-prepend", htmltools::tags$span( class = "btn btn-default btn-file", - onclick = paste0("$('#", inputId, "').click();"), - buttonLabel + tabindex = 0, + onclick = "fileInputClick(event);", + onkeydown = "fileInputKeydown(event);", + buttonLabel, + `data-target` = inputId ), inputTag ), diff --git a/inst/css/a11yShinyInputs.css b/inst/css/a11yShinyInputs.css index 9bf347e..573f9b8 100644 --- a/inst/css/a11yShinyInputs.css +++ b/inst/css/a11yShinyInputs.css @@ -16,4 +16,10 @@ fieldset.shiny-input-container legend { fieldset.shiny-input-container div.select-all-container { margin-top: -5px; margin-bottom: 10px; +} + +.btn-file:focus { + color: #333; + background-color: #e6e6e6; + border-color: #adadad; } \ No newline at end of file diff --git a/inst/js/a11yShinyInputs.js b/inst/js/a11yShinyInputs.js index 41541dc..09fdbae 100644 --- a/inst/js/a11yShinyInputs.js +++ b/inst/js/a11yShinyInputs.js @@ -11,4 +11,13 @@ const clearAll = function(event) { $input.find('input[type=\"checkbox\"]').prop('checked', false); $input.trigger('change'); return false; -}; \ No newline at end of file +}; +const fileInputClick = function(event) { + $('#' + $(event.target).data('target')).click(); +} +const fileInputKeydown = function(event) { + if (event.key == "Enter" || event.key == " ") { + event.preventDefault(); + $('#' + $(event.target).data('target')).click(); + } +} \ No newline at end of file diff --git a/inst/js/a11yShinyInputs.min.js b/inst/js/a11yShinyInputs.min.js index aa17e28..7bd1052 100644 --- a/inst/js/a11yShinyInputs.min.js +++ b/inst/js/a11yShinyInputs.min.js @@ -1 +1 @@ -const checkAll=function(e){e.preventDefault();e=$(e.target).closest(".shiny-input-a11ycheckboxgroup");return e.find('input[type="checkbox"]').prop("checked",!0),e.trigger("change"),!1},clearAll=function(e){e.preventDefault();e=$(e.target).closest(".shiny-input-a11ycheckboxgroup");return e.find('input[type="checkbox"]').prop("checked",!1),e.trigger("change"),!1}; \ No newline at end of file +const checkAll=function(t){t.preventDefault();const e=$(t.target).closest(".shiny-input-a11ycheckboxgroup");e.find('input[type="checkbox"]').prop("checked",true);e.trigger("change");return false};const clearAll=function(t){t.preventDefault();const e=$(t.target).closest(".shiny-input-a11ycheckboxgroup");e.find('input[type="checkbox"]').prop("checked",false);e.trigger("change");return false};const fileInputClick=function(t){$("#"+$(t.target).data("target")).click()};const fileInputKeydown=function(t){if(t.key=="Enter"||t.key==" "){t.preventDefault();$("#"+$(t.target).data("target")).click()}}; \ No newline at end of file diff --git a/inst/js/a11yShinyInputs.min.js.map b/inst/js/a11yShinyInputs.min.js.map index 17dce4f..b25a09c 100644 --- a/inst/js/a11yShinyInputs.min.js.map +++ b/inst/js/a11yShinyInputs.min.js.map @@ -1 +1 @@ -{"version":3,"sources":["a11yShinyInputs.js"],"names":["checkAll","event","preventDefault","$input","$","target","closest","find","prop","trigger","clearAll"],"mappings":"AAAA,MAAMA,SAAW,SAASC,GACxBA,EAAMC,eAAe,EACfC,EAASC,EAAEH,EAAMI,MAAM,EAAEC,QAAQ,gCAAgC,EAGvE,OAFAH,EAAOI,KAAK,wBAA0B,EAAEC,KAAK,UAAW,CAAA,CAAI,EAC5DL,EAAOM,QAAQ,QAAQ,EAChB,CAAA,CACT,EACMC,SAAW,SAAST,GACxBA,EAAMC,eAAe,EACfC,EAASC,EAAEH,EAAMI,MAAM,EAAEC,QAAQ,gCAAgC,EAGvE,OAFAH,EAAOI,KAAK,wBAA0B,EAAEC,KAAK,UAAW,CAAA,CAAK,EAC7DL,EAAOM,QAAQ,QAAQ,EAChB,CAAA,CACT"} \ No newline at end of file +{"version":3,"sources":["inst/js/a11yShinyInputs.js"],"names":["checkAll","event","preventDefault","$input","$","target","closest","find","prop","trigger","clearAll","fileInputClick","data","click","fileInputKeydown","key"],"mappings":"AAAA,MAAMA,SAAW,SAASC,GACxBA,EAAMC,eAAe,EACrB,MAAMC,EAASC,EAAEH,EAAMI,MAAM,EAAEC,QAAQ,gCAAgC,EACvEH,EAAOI,KAAK,wBAA0B,EAAEC,KAAK,UAAW,IAAI,EAC5DL,EAAOM,QAAQ,QAAQ,EACvB,OAAO,KACT,EACA,MAAMC,SAAW,SAAST,GACxBA,EAAMC,eAAe,EACrB,MAAMC,EAASC,EAAEH,EAAMI,MAAM,EAAEC,QAAQ,gCAAgC,EACvEH,EAAOI,KAAK,wBAA0B,EAAEC,KAAK,UAAW,KAAK,EAC7DL,EAAOM,QAAQ,QAAQ,EACvB,OAAO,KACT,EACA,MAAME,eAAiB,SAASV,GAC9BG,EAAE,IAAMA,EAAEH,EAAMI,MAAM,EAAEO,KAAK,QAAQ,CAAC,EAAEC,MAAM,CAChD,EACA,MAAMC,iBAAmB,SAASb,GAChC,GAAIA,EAAMc,KAAO,SAAWd,EAAMc,KAAO,IAAK,CAC5Cd,EAAMC,eAAe,EACrBE,EAAE,IAAMA,EAAEH,EAAMI,MAAM,EAAEO,KAAK,QAAQ,CAAC,EAAEC,MAAM,CAChD,CACF"} \ No newline at end of file