Accessibility: Improve keyboard accessibility in Collapse
#59022
Conversation
ashharrison90
added
type/bug
add to changelog
type/accessibility
ashharrison90
requested review from
joshhunt,
JoaoSilvaGrafana,
leventebalogh,
zoltanbedi and
supilee
and removed request for
a team
| @@ -145,10 +145,10 @@ export const Collapse = ({ | |||
|
|
|||
| return ( | |||
| <div className={panelClass}> | |||
| <div className={headerClass} onClick={onClickToggle}> | |||
| <button type="button" className={cx(buttonStyles, headerClass)} onClick={onClickToggle}> | |||
There was a problem hiding this comment.
Seems like a similar button is used more than once, should we have a separate component for it? Maybe a modified version of IconButton?
There was a problem hiding this comment.
@Clarity-89 don't quite understand - do you mean creating a component for <button type="button ...>? 🤔
There was a problem hiding this comment.
Basically, but also with the clear button styles.
There was a problem hiding this comment.
ah got it. yeah that could have value... 🤔 lemme have a think about implementation
There was a problem hiding this comment.
gonna merge for now whilst we think about an implementation for exposing an unstyled button.
debating between just exposing a new Button variant (unstyled), or a whole new component UnstyledButton. neither of which feel super nice tbh. wondering whether we shouldn't expose this as although it's being used quite a bit internally, i don't think we'd want to expose it externally as part of @grafana/ui? idk, any thoughts? 🤔
…rafana#59097) Accessibility: Improve keyboard accessibility in `Collapse` (grafana#59022) fix keyboard accessibility in Collapse (cherry picked from commit 19e97a1) Co-authored-by: Ashley Harrison <ashley.harrison@grafana.com>
What is this feature?
<button>) for the collapse headerWhy do we need this feature?
Who is this feature for?
Which issue(s) does this PR fix?:
Fixes #59021
Special notes for your reviewer: