Improve accessibility for interactive session cards #4061
Conversation
| </div> | ||
| <div id="sr-live-region" aria-live="polite" class="visually-hidden"></div> |
There was a problem hiding this comment.
This is a good idea to put updates here. So much so that this should likely go to the application.html.erb so it's on every page.
| import { pollAndReplace } from './turbo_shim'; | ||
|
|
||
| const sessionStatusMap = new Map(); | ||
|
|
||
| function checkStatusChanges() { |
There was a problem hiding this comment.
I think the way you have this is a bit complicated. Instead of pulling things from text, you should just embed them in data attributes, for not only ease, but it's also less error prone if CSS classes change.
If you embed all this information into data attributes, like so
--- a/apps/dashboard/app/views/batch_connect/sessions/_panel.html.erb
+++ b/apps/dashboard/app/views/batch_connect/sessions/_panel.html.erb
@@ -1,5 +1,8 @@
<div id="<%= "id_#{session.id}" %>" class="card session-panel mb-4"
- data-id="<%= session.id%>" data-hash="<%= session.to_hash %>" >
+ data-id="<%= session.id %>" data-hash="<%= session.to_hash %>"
+ data-status="<%= status(session).downcase %>"
+ data-title="<%= session.title %>"
+ data-bc-card='true' >
<%= render_card_partial('card_header', session) %>
<%= render_card_partial('card_body', session) %>
</div>You can query on the same stuff and just extract the status.
document.querySelectorAll('[data-bc-card]')[0].dataset.statusQuerying by classes like '.status' or even .card.session-panel can be error prone if we ever change those classes (card is a boostrap class, so we have no control it).
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset
Fixes #664