Entrar Ainda não tem acesso?
5
respostas

fileUpload (Acessibilidade)

por Bruno Pereira Passos
| 162.8k xp | 42 posts

Tudo bem pessoal ? Estou com um problema, não posso atualizar a versao do meu primefaces ( por que irá impactar em outras partes do sistema). E estou desenvolvendo um sistema, onde estou com problemas na acessibilidade do fileUpload, (buttons, buscar,enviar,excluir). Testando com um software de acessibilidade NVDA ( para deficientes visuais), esse buttons não é reconhecido com a tecla TAB...

Dei uma pesquisada e segue um link qe encontrei uma solução porem foi na a atualização do primefaces, mas queria saber se alguem consegue me ajudar, e sabe de outros metodos de acessibilidade p conseguir contornar esta situação. Link: https://github.com/primefaces/primefaces/issues/3938 Link: https://codepen.io/accessabilly/pen/qNpZJg ( esta segunda solução não em atendeu, o mesmo continua sendo inacessivel para usuarios com deficiencias visuais)

segue codigo que do fileUpload.

<p:dialog id="arquivo1ModalDialog" header="Diploma de Conclusão" widgetVar="editarArquivo1" modal="true"
              height="240" width="650" style="position: absolute;" appendTo="@(body)"
              closeOnEscape="true" focus=":form-upload-arquivo1:btnCancelar1"  draggable="false" resizable="false"
              onHide="$(function(){PrimeFaces.focus('form:complemento');});">
        <h:form id="form-upload-arquivo1" class="form-horizontal" enctype="multipart/form-data">
            <h4>Selecione a Declaração e/ou Diploma de Conclusão do Ensino Médio</h4>
            <p:outputLabel value="Buscar:" for="arquivo1" >
                <p:fileUpload label="Buscar" id="arquivo1" mode="advanced" allowTypes="/(\.|\/)(jp.?g|png|pdf)/i"
                              sizeLimit="8000000" invalidSizeMessage="O tamanho máximo do arquivo é de 8 MB."
                              auto="false" invalidFileMessage="Tipo de arquivo inválido"
                              update="@this,:form:cpb_anexo1" oncomplete="editarArquivo1.hide()"
                              fileLimit="1" fileLimitMessage="É permitido o envio de apenas um arquivo."
                              fileUploadListener="#{atletaCidadaoController.setAnexo1}" process="@this"
                              uploadLabel="Enviar" cancelLabel="Excluir"/>
            </p:outputLabel>
            <hr/>
            <div class="control-group">
                <p:commandButton id="btnCancelar1" value="Cancelar" styleClass="botao" type="button"
                                 onclick="editarArquivo1.hide()" title="Cancelar"/>
            </div>
        </h:form>
    </p:dialog>

os buttons (uploadLabel="Enviar" cancelLabel="Excluir"). Não é reconhecido pelo software...

Desde já agradeço pessoal !

5 respostas
por Natan Souza
| 2115.9k xp | 3725 posts
Instrutor Product Design Lead

Oi Bruno, tudo certinho?

Eu não programo em Java, mas se o fileUpload é um problema, que tal um botão com o texto "Carregar arquivo"?

Aí colocaria aquele aria-live polite (educado) para informar se o arquivo foi carregado ou não.

Se o button gerado pelo Primefaces não é reconhecido pelo NVDA, não rola colocá-lo na mão? Isso é, usando HTML e JavaScript?

Abraços!

por Bruno Pereira Passos
| 162.8k xp | 42 posts

Natan de Souza Fonseca, neste exato momento estou vendo o seu curso de acessibilidade, na parte dos modais, e vendo a parte do javaScript... Porem estou tendo dificuldades com o JS, não consigo pegar o elemento que eu quero...

JS

var btnCarregaAnexo = document.querySelector('#abreDialog')
btnCarregaAnexo.style.display = 'none'

bottao

<button class="botaoCarregarAnexo" id="abreDialog">TESTE
                                        </button>

ERRO: Uncaught TypeError: Cannot read property 'style' of null at global.js.faces:53

por Natan Souza
| 2115.9k xp | 3725 posts
Instrutor Product Design Lead

Oi Bruno,

Opa espero que esteja gostando!

Sobre esse código, testei aqui em um JSBin (é tipo um CodePen) e está tudo ok. O botão ganha o display none e é ocultado.

Esse erro que você postou está vindo de um tal de global ponto JS ponto faces. Talvez o script não está sendo puxado?

Abraços!

por Bruno Pereira Passos
| 162.8k xp | 42 posts

Então Natan, eu estou suspeitando isto :/

Tipo, esse global.js é onde esta os codigos JS...

Porem eu tentei realizar este codigo em js inline mesmo... <script type="".../> mesmo assim apresenta o mesmo erro. O que me faz pensar é que como eu utilizo primefaces, eu creio que esteja perdendo os id em algum momento, e este button ele esta detro de um form....

Poderia me auxiliar como funciona a hierarquia ?

Exemplo: document.querySelector("form:carregaDeclaracao") seria isto ?

Eu quero percorrer os id's no caso pra ver se realmente estou fazendo o correto... Mas se caso for asssim, eu preciso colocar todos os id's ? inclusive os id's das divs ?

Me desculpe se não estou conseguindo me expressar !

por Natan Souza
| 2115.9k xp | 3725 posts
Instrutor Product Design Lead

Oi Bruno,

Hmm... não sei o que o PrimeFaces faz por de baixo dos panos, e se você o referenciar com uma classe em vez de um ID?

Não entendi bem seu exemplo, mas o código:

document.querySelector("form:carregaDeclaracao")

Não deve funcionar, mas se colocar form PONTO carregaDeclaração aí sim. Esses dois pontos aí no meio do código acima seria para pegar pseudo-classes.

Não precisaria colocar ID em todas as DIV, uma vez que você identifica o pai delas, seja por classe ou por ID mesmo, você consegue pegar os elementos filhos.

Vamos tentar resolver! :)

Abraços!