Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Consider adding an expandable "region" #3215

Open
scottaohara opened this issue Jan 16, 2025 · 3 comments
Open

Consider adding an expandable "region" #3215

scottaohara opened this issue Jan 16, 2025 · 3 comments

Comments

@scottaohara
Copy link
Member

From the ARIA WG call today, we talked about a clickable "region / card / section of content" that expanded/collapsed to reveal more or less content.

The context being that Aaron was discussing a use case where the parent element was a button that expanded and collapsed, and complex content was nested within this button, rather than as a sibling to it, and this being a use case as to why child presentation was removed from button roles in chrome/firefox.

Rather than repeat that discussion here - it was mentioned that we could come with a pattern to sort of replicate this use case, but without needing to nest the content within a button - but still making the card/content/region/whatever fully clickable to expand/collapse.

For instance, design an expanding/collapsing card component where there's an icon (plus / minus) in one of the corners to serve as the actual button - and use javascript to otherwise make the entire card clickable / change the state of the button.

@scottaohara
Copy link
Member Author

a quick example of how i interpreted the component being discussed today - built in a way where the content does not need to be nested within a button - but the whole block/card is still clickable

https://codepen.io/scottohara/pen/ZYzRVmg

instance 1 has a visible button to show/hide the content that is hidden via inert in the default state.

instance 2 is the same markup structure, but with the button visually hidden.

both instances have a focus indicator around the entire card that appears when the button within each instance is focused - so even instance 2 not having a visible button, there is still a focus indicator that appears for the 'card'

@css-meeting-bot
Copy link
Member

The ARIA Authoring Practices (APG) Task Force just discussed Issue 3215 - Expandable region example.

The full IRC log of that discussion <jugglinmike> Topic: Issue 3215 - Expandable region example
<jugglinmike> github: https://github.com//issues/3215
<jugglinmike> Matt_King: This came up in the ARIA working group meeting
<jugglinmike> Matt_King: There is possibly the need for an example that is like a disclosure but which is distinct due to: a larger click target, a different example/collapse icon, and the mouse behavior.
<jugglinmike> Matt_King: I hope I'm representing this well. We might want to have Scott give more input
<jugglinmike> Matt_King: The description of this issue is, I believe, fairly complete
<jugglinmike> Matt_King: This originally came up because people are nesting content inside of a button. You click the button, and the content appears. That of course is a problem, and it was suggested that the APG give a better alternative
<jugglinmike> Matt_King: One of the requirements (which Scott does address) is that there is something visible which means "expand" and which would also be focusable
<jugglinmike> Jem: I like Scott's idea
<jugglinmike> Jem: Do you see any concerns about this proposal?
<jongund> https://codepen.io/scottohara/pen/ZYzRVmg
<jugglinmike> siri: My only concern is that the entire "card", if you made it focusable, wouldn't that be too much for the screen reader?
<jugglinmike> Matt_King: Scott said the "plus/minus" would be used by screen readers
<jugglinmike> Matt_King: I think they're talking about a larger chunk of content being clickable
<jugglinmike> jongund: In his example, he's showing partial text (the first paragraph of an article), and if you click, it expands to show all of the text
<jugglinmike> jongund: That's a pretty common patter that you see in a lot of websites
<jugglinmike> jongund: One of his examples has an "expand/collapse" button, and that's what becomes focusable
<jugglinmike> Matt_King: Is the actual focus only on the "plus/minus" but it's only drawn around the entire card?
<jugglinmike> Jem: It's on the entire card
<jugglinmike> Matt_King: The screen reader would describe the entire card, then, and that's a bad user experience
<jugglinmike> jongund: does the screen reader need to know anything? They have access to this regardless
<jugglinmike> Matt_King: We don't want screen reader users to think that something is visible when it isn't (or vice-versa)
<Jem> https://codepen.io/scottohara/pen/ZYzRVmg
<jugglinmike> jongund: Okay, well, what if when you have a little box that's scrollable--does the screen reader know that there is scrollable content on the page?
<jugglinmike> Matt_King: They don't have to know that, necessarily
<jugglinmike> Matt_King: I'm always hoping that the part that I'm reading is visible to other people
<jugglinmike> siri: I just ran NVDA on this example. It is not reading the text when it isn't visible. When I get to the card, it reads the title of the card. It tells me the content is collapsed.
<jugglinmike> Matt_King: Is the resolution as simple as turning Scott's example into an APG example?
<jugglinmike> jongund: I think it could be that straightforward
<jugglinmike> Matt_King: That's good, I think. I'll get this back on the agenda for next week so we can talk about next steps. It does seem like there's a practical path forward based on what's Scott's saying
<siri> also heading is narrated as clickable by NVDA
<jugglinmike> Matt_King: I hear what you're saying, though, siri. I don't like the fact that you have to go backward, either
<jugglinmike> Matt_King: Okay, we're at time. We'll get to the landmarks issue next week
<jugglinmike> Zakim, end the meeting

@scottaohara
Copy link
Member Author

responding to some of the minutes:

siri: My only concern is that the entire "card", if you made it focusable, wouldn't that be too much for the screen reader?
...
Matt_King: The screen reader would describe the entire card, then, and that's a bad user experience

the entire card isn't focusable. only the button within is. A focus indicator is put around the entire card, but that is purely styling - and purposefully done since these are the types of designs people are making, and thinking they need to put all the content in the buttons. but using modern CSS, you don't need to make such mistakes AND you can still get the design one wants.

also heading is narrated as clickable by NVDA

I didn't add anything into this to try and override default behavior from screen readers. since the entire section is clickable due to the click event listener on the entire "card", NVDA will announce it as clickable, since it is. That could be mitigated by adding another wrapping element that had the click handler on that new element instead. Then, putting role=none on that element would negate the 'clikcable' announcement, while it still would be. but i've found there are mixed opinions on doing things like that, and i opted to not introduce "clever" code into the examples.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants