darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-07-09 19:04:33 -04:00
Code Issues Packages Projects Releases Wiki Activity

Added an sr-only alert to the site for upload errors (and any other errors we might want to only announce to the screen reader)

Browse Source
This commit is contained in:
Jonathan Bobel
2025-04-01 10:46:56 -04:00
parent f55d47e3d1
commit 2064fc864a
7 changed files with 54 additions and 184 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
app/assets/javascripts/fileUpload.js
View File

@@ -1,3 +1,25 @@
function announceUploadStatusFromElement() {
const srRegion = document.getElementById('upload-status-live');
const success = document.getElementById('upload-success');
const error = document.getElementById('upload-error');
if (!srRegion) return;
const message = error?.textContent || success?.textContent;
if (message) {
srRegion.textContent = '';
setTimeout(() => {
srRegion.textContent = message;
console.log(message);
}, 50);
}
}
document.addEventListener('DOMContentLoaded', () => {
announceUploadStatusFromElement();
});
(function(Modules) {
"use strict";
@@ -11,19 +33,9 @@
Uploading<span class="dot-anim" aria-hidden="true"></span>
</button>
`);
const $srStatus = $('#upload-status-live');
if ($srStatus.length) {
// Clear and re-set the content to ensure it's treated as a change
$srStatus.html('');
setTimeout(() => {
$srStatus.html('<span>File is uploading</span>');
}, 50);
}
};
this.start = function(component) {
this.$form = $(component);
// Handle "Upload your file" button click — CSP-safe version

5
app/templates/base.html
View File

@@ -11,6 +11,11 @@
{% include "components/head.html" %}
</head>
<body class="usa-template__body {{ bodyClasses }}">
<div id="upload-status-live"
class="usa-sr-only"
aria-live="assertive"
role="status">
</div>
<script nonce="{{ csp_nonce() }}">document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');</script>
{% block bodyStart %}
{% block extra_javascripts_before_body %}

4
app/templates/components/banner.html
View File

@@ -4,10 +4,6 @@
{% macro banner(body, type=None, with_tick=False, delete_button=None, subhead=None, context=None, action=None, id=None, thing=None) %}
<div
class='banner{% if type %}-{{ type }}{% endif %}{% if with_tick %}-with-tick{% endif %}'
{% if type == 'dangerous' %}
role='group'
tabindex='-1'
{% endif %}
{% if id %}
id={{ id }}
{% endif %}

3
app/templates/views/check/column-errors.html
View File

@@ -23,6 +23,9 @@ Error
<div class="">
{% call banner_wrapper(type='dangerous') %}
{# Alert for users of AT #}
<span id="upload-error" class="usa-sr-only">File upload failed</span>
{% if recipients.too_many_rows %}
<div class="usa-alert usa-alert--error" role="alert">

2
app/templates/views/check/ok.html
View File

@@ -21,6 +21,8 @@
{{ template|string }}
<div class="bottom-gutter-3-2">
{# Alert for users of AT #}
<span id="upload-success" class="usa-sr-only">File upload successful</span>
<form method="post" enctype="multipart/form-data" action="{{url_for('main.preview_job', service_id=current_service.id, template_id=template_id, upload_id=upload_id)}}" class='page-footer'>
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
{% if choose_time_form %}

2
app/templates/views/check/row-errors.html
View File

@@ -17,6 +17,8 @@
<div class="">
{% call banner_wrapper(type='dangerous') %}
{# Alert for users of AT #}
<span id="upload-failed" class="usa-sr-only">File upload failed</span>
{% if row_errors|length == 1 %}
<div class="usa-alert usa-alert--error" role="alert">
<div class="usa-alert__body">

190
poetry.lock generated
View File

File diff suppressed because it is too large Load Diff