a11y: use role=alert for messages from Django and JS #1641
Closed
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
davidbgk
force-pushed
the
dom-driven-alerts
branch
from
b98de4d
to
6d47382
Compare
|
The only place where we set a message from views is when we clone a map. |
davidbgk
force-pushed
the
dom-driven-alerts
branch
2 times, most recently
from
3616311
to
9a2b4fd
Compare
|
The |
Also define a custom module+css for alerts (chore).
davidbgk
force-pushed
the
dom-driven-alerts
branch
from
9a2b4fd
to
d6e4da3
Compare
|
There are two remaining complex cases where there are buttons and logic within the alert:
|
almet
approved these changes
Mar 11, 2024
| @@ -0,0 +1,54 @@ | |||
| export default class Alerts { | |||
| constructor() { | |||
| this.alertNode = document.querySelector('[role="alert"]') | |||
There was a problem hiding this comment.
nit: Maybe alertNode could be a private property of the object?
| } | ||
|
|
||
| add(message, level = 'info', duration = 3000) { | ||
| this.alertNode.innerHTML = ` |
There was a problem hiding this comment.
Is this replacing all the whole node? How does this plays with multiple alerts being added?
There was a problem hiding this comment.
That's indeed a concern, I was wondering if that case actually happens 🤔
|
|
||
| _display(alert) { | ||
| const duration = alert.dataset?.duration || 3000 | ||
| const level = alert.dataset?.level || 'info' |
There was a problem hiding this comment.
This repeats (in the code) the default behavior values. Maybe use a constant tied to the class instead?
| ` | ||
| const alertDiv = wrapper.firstElementChild | ||
| this.alertNode.after(alertDiv) | ||
| if (isFinite(duration)) { |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Also define a custom module+css for alerts (chore).
This is an early stage, more a discussion at this point.
It works with messages from Django and set dynamically via JS.
The old code is still present.
See: