DEV Community

Discussion on: styled-components, one more time

 
jensgro profile image
Jens Grochtdreis

Oh yes, I AM an expert in this field. But the comment to an article is not the place to write an article, itself. And seeing this code I thought you could need a hint to a good article.

It's good that you know smashingmagazine but as they publish loads of article, this one must have slipped your eyes. Otherwise your example wouldn't be as criticised.

And as I pointed you to the article I don't see a use in telling you all the built-in functions, a button has. Read the artice, it is really good.

I do have a strong opinion on this because I know HTML and CSS very good. And I am teaching and writing articles for more than 13 years. So I do know how to write an article. And I am alsways amazed about articles with huge faults in them.

As I am not good in JavaScript and all those frameworks I rely on articles as yours. But reading those articles and learning from others is a matter of trust. So if I do know that a part of an article is wrong and is bad code, how am I to trust the rest? Maybe the rest is okay by itself. The article wouldn't on the other hand be a guiding light for my own learning experience because I wouldn't be able to follow your code (as I know HTML better).

And for your questions about the role: Read something short about WAI-ARIA. The first rule of WAI-ARIA is: "Don't use WAI-ARIA!". Meaning: if there is somiething in HTML which can be used, use it. So, don't mimic a button, use a button. There are five simple rules of ARIA. And none reads: Make anything out of a DIV with a sprinkle auf attributes.

ARIA-attributes are a help where help is needed. And in case of a button or a haeding, noe help is needed. <div role="heading">THis is dumb code!</div> isn't good either.

Is it clearer now? And please read the article.

Thread Thread
 
stereobooster profile image
stereobooster • Edited

Can you be more specific? Like, if you would use <div role="button">, instead of a button in this browser (or screen reader), exactly this functionality will not work as expected.

As of now, it sounds like a matter of taste.

The first rule of WAI-ARIA is: "Don't use WAI-ARIA!"

Are there real consequences of using one over another? Better browser support, maybe?

You just repeat common phrases (in all 3 comments without explaining): "huge difference" (what?), "built-in functions" (what are those?), " is bad code" (based on which metrics?)

Can you be more specific?

Thread Thread
 
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.