Conversation
Currently, the modal title is hard-coded to be an h4 element. This makes sense as a default, but ideally, it would be toggleable to respect a user's heading hierarchy for a11y. This creates an input that allows toggling to whatever level is desired.
gadenbuie
left a comment
There was a problem hiding this comment.
Adding an argument is a relatively large public API change; it's best to open an issue first to discuss the need, feature and approach before opening a PR.
That said, I'd prefer to explore options that don't add new arguments. A few occur to me:
titleis optional; users can include a heading with whatever level they want in the UI elements passed to....- I strongly suspect we could use better, possibly more semantic, HTML that avoids using
hXtags at all - We could have
titleaccept a character string (default, current treatment) or a tag, in which case we could inspect the tag and make sure its anh1,h2, ...,h6element and we could also append the appropriate Bootstrap class to it.
I'd prefer these over adding a new argument.
Yep I get that, thanks for letting me know. It's my first time trying to do something like this. Didn't want to feel like I was coming to the party empty-handed. That said, I think I designed this one to be fairly backwards-compatible/invisible--the current behavior in the previous version should be the new default in the proposed version, so nothing should break (unless, I guess, if folks are specifying inputs positionally, which they could be...we could move the title_level argument to the end to circumvent that?)
Yeah these options, especially 2 and 3, seem good too. Right now, the current hard-coding means that an app with only h2s would skip to h4 for this title, which a11y trackers then flag. In my case, I was providing an h3() as an input to title, which meant I was getting an h3 inside an h4, which was pretty goofy-looking! Since supportive technologies do take advantage of the header tags, I think they are sufficiently semantic, but just need to be more flexible to match the hierarchy the user has constructed elsewhere in their app. |
gadenbuie
left a comment
There was a problem hiding this comment.
Thanks for talking through your reaction to the options. I think the best way forward is to side-step the heading level issue entirely with better ARIA attributes 😄
This ensures that the modal title is not hard-coded to be an h4. Instead, it will be a div with an appropriate id that can be used to set an aria-labelledby attribute on the modal container parent. It also only applies the attribute when the title is specified, as a title is optional. This leaves users to specify the title as whatever kind of element they want (or plain text).
gadenbuie
left a comment
There was a problem hiding this comment.
Looks great! Just a few tiny comments below.
A couple follow up tasks to finish this up:
- Can you please create a tiny demo and include the code in the PR description? (You can borrow from any existing modal example.)
- If you can, can you compare the appearance between the CRAN release of shiny and this branch? It'd be awesome if you could include screenshots of each in the PR description
- We'll need a news bullet, which you could add at the top of
NEWS.mdthe dev version section under a## Breaking changessection. Include your GitHub handle and the PR number in parenthesis at the end --(@BajczA475 #4331).
| `data-bs-backdrop` = backdrop, | ||
| `data-keyboard` = keyboard, | ||
| `data-bs-keyboard` = keyboard, | ||
| if (has_title) `aria-labelledby` = "shiny-modal-title", |
There was a problem hiding this comment.
This doesn't quite work as written, we need to assign to the argument when has_title is TRUE:
| if (has_title) `aria-labelledby` = "shiny-modal-title", | |
| `aria-labelledby` = if (has_title) "shiny-modal-title", |
This relies on a nice htmltools behavior that it will drop NULL attributes (and if (FALSE) "foo" returns NULL in R).
| div(class = "modal-title", | ||
| id = "shiny-modal-title", | ||
| title) |
There was a problem hiding this comment.
small style nit: Let's put this on one line
| div(class = "modal-title", | |
| id = "shiny-modal-title", | |
| title) | |
| div(class = "modal-title", id = "shiny-modal-title", title) |
|
Hi,
Thanks for checking this out and providing feedback+next steps! I wanted to
acknowledge receipt of it--I intend to do it, but I've gotten busy at work.
I'll revisit it when things slow down.
Cheers,
A
|
Currently, the modal title is hard-coded to be an h4 element. This makes sense as a default, but ideally, it would be toggleable to respect a user's heading hierarchy for a11y. This creates an input that allows toggling to whatever level is desired.