DEV Community

Discussion on: styled-components, one more time

 
jensgro profile image
Jens Grochtdreis

As I told you multiple times before: read the smashingmagazine article. It shows the mannifold aspects of a button that aren't recreated by a simple attribute.

Besides: if you know it should be a button and you use an attribute, why not use the element in the first place?

That's not a matter of taste. It's a matter of using something as intended. There maybe something similar in JS, but maybe not. In HTML there are elements with a certain meaning. If they were not you could just write a page with div. Funny thing is: you could. But it would be bad code. And tahat is not a matter of taste. Because if there is something that should be used as intended and you don't use it, but otherwise use another element which you try to change as much as it is possible to mimic the originally intended element. How would you call that? Interesting idea? Crativity?

I call it bad code. And bad code should only be a vehicle in an article to tell you, what NOT to write.

And please, if you would only read the article and read something about WAI-ARIA you would understand my "common phrases". I don't intend top write a second article in the comments. I only tell you, where in my opinion you are wrong and where you can find guidance to be better. We all should thrive to be better. If you don't get this sentiment, all other comments from my side would be useless.

I should write an article about writing an article.

Thread Thread
 
stereobooster profile image
stereobooster

It is ok to not know everything.
It is ok to say I got triggered never mind.
It is ok to say this is the best practice (mantra, rule of thumb), which I follow and never questioned myself.
It isn't ok to call code bad without explaining why. I can quote Kurt Vonnegut on this: "Dr. Hoenikker used to say that any scientist who couldn't explain to an eight-year-old what he was doing was a charlatan".

I don't intend top write a second article in the comments

I didn't ask you to write an article I asked to pinpoint at least one example to show the difference between button and div role="button".

Thread Thread
 
jensgro profile image
Jens Grochtdreis

Read the linked article. The author explaines everything you need.

Thread Thread
 
stereobooster profile image
stereobooster

ok

Thread Thread
 
suckup_de profile image
Lars Moelleken

Button

  • keyboard friendly
  • disabling via fieldset
  • different states
  • accessible by default
Thread Thread
 
gunnarbittersmann profile image
Gunnar Bittersmann

What’s the difference between <button type="button"> and <div class="button" role="button" tabindex="0">, you ask? It’s the behavior.

In her talk “ARIA, accessibility APIs & coding like you give a damn!”, Léonie Watson demonstated what it would take to turn a <div> into a button. And it takes a lot! (VideoSlides)

TL;DR: Don’t do it! Use the <button> element.