DEV Community

loading...

Discussion on: Building an Accessible Reveal-Card

link2twenty profile image
Andrew Bone Author

Ok, I'm not sure I agree with any of those points to be honest 😅

  • there is a hint when you mouse over it but if it's included in a site you'd expect the site to explain the expectation to the user
  • there is a grab cursor because you grab the card (again a hint to the user it can be dragged)
  • It does not require a double click you just can use it if you like
  • the colours are arbitrary but the colours I've used are used in many UI and have understood meanings
  • the text is partially hidden as it is no longer the focus, if you wanna read it again feel free to close the panel again
  • cards are just divs with rounded corners and a box shadow, I have no idea how that means it has bad CSS built in
  • it can offer more than one option perhaps this card wouldn't be used if there was only one option (or perhaps it can be used as a warning to make a user think before they perform an action)

Though I do want to ask about why you say using "events to change classes/css" is "really bad"? It's the first time I've heard someone say this is bad.

Thread Thread
wparad profile image
Warren Parad • Edited

there is a hint when you mouse over it but if it's included in a site you'd expect the site to explain the expectation to the user

How? If you have to make excuses for your libraries in your UI, you picked the wrong library.

there is a grab cursor because you grab the card (again a hint to the user it can be dragged)

That doesn't show on my screen.

It does not require a double click you just can use it if you like

Your example requires a double click.

the colours are arbitrary but the colours I've used are used in many UI and have understood meanings

They don't have any meaning to a user that is using the card nor the developer selecting which colors they should be. Actually it's worse, the color and display is almost 100% the toast display from bootstrap which indicates the "level" of the message.

the text is partially hidden as it is no longer the focus, if you wanna read it again feel free to close the panel again

That's irrelevant and doesn't make it good UI.

cards are just divs with rounded corners and a box shadow, I have no idea how that means it has bad CSS built in

Cards are frequently discouraged in most frameworks, UX designs, so requiring their use is frequently problematic.

Though I do want to ask about why you say using "events to change classes/css" is "really bad"? It's the first time I've heard someone say this is bad.

Writing JS to do something that css can do natively is an indication of lack of css knowledge. It's also way slower and requires management of unnecessary JS resources which provides another area where it's easy to get it wrong.

Hope that helps.

Thread Thread
link2twenty profile image
Andrew Bone Author

Which browser are you using? The cursor and drag work fine for me on mobile and on desktop in chrome, Firefox and edge?

What am I doing in JS that CSS can do natively?