Flyo Data Storage Component | Bonus: small animation at load time.

Community feedback

• 

  T

  Chamu•13,130

  @ChamuMutezvaPosted over 3 years ago

  Nice work Demian

  1
• 

  Ayoub1Dev•195

  @Ayoub1devPosted over 3 years ago

  Really nice. Looks, works and feels awesome.

  Did you use any frameworks?

  I have seen that you made it accessible for different devices using aria-label, but, you did not make it accessible for us XD. I dont't know what each icon does when I hover over it it should display a message saying what it does.

  I guess you already know, but just in case you don't, you have to add the title attribute with the function of the btn.

  <button type="button" class="menu__btn" aria-label="upload file" 
  style="user-select: auto;" ** title="Upload File" ** > .... </button>
  
  

  0

  ---

  

  Demian•245

  @denik1981Posted over 3 years ago

  @Ayoub1dev adding a title attribute to the button isn't mandatory and in fact is a bad practice against having a good a11y. Not just a11y, is a bad experience for the user itself to have an unstyled tooltip there poping up on the page.

  You would want to add a tooltip when the button itself doesn't express enough meaning of what it is supposed to do. A "folder", "new file" and "upload" icons are so used in the web that adding extra information about them is not neccesary.

  But the main concern regarding a title attribute is that you lose control of how to style it as it will delegate this task to the browser (which is also inconsistent among the plethora of browsers available).

  Check this article for more information about it. https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title

  BTW, I have used Tailwind.

  1

  

  Ayoub1Dev•195

  @Ayoub1devPosted over 3 years ago

  @denik1981 Thanks! Learning new things.

  I have another question if you don't mind, can a tooltip be styled or we have to create it from scratch using html and css?

  0

  

  Demian•245

  @denik1981Posted over 3 years ago

  @Ayoub1dev If you have finally decided that you need a tooltip, then by no doubt, having control of the style will be a better choice for you. If you think about it, the first thing a designer does is to reset (or normalize) the browser styles because they want to have full control of how the page looks.

  With a browser tooltip you cannot control when it shows up, "if it shows up", where it shows up, and how it looks. You want a tooltip that can integrate with the theme of your layout and you want to be careful of where you place it to avoid hiding important information. Also you want to be sure that for your mobile/tablet users the tooltip is not popping up as well.

  If you depend on the browser but you have decided that you are comfortable with it, then the question you should ask yourself is which browser?, cause there are tons of them out here and you will be never certain of how your tooltip looks in the browser your user is using. So, yes, we are happy to have some styles by default just in case we forgot to style them at our page but in general the less you depend on the user-agent styles, the better.

  Actually, this challenge is a good example because it requires a tooltip that nicely integrates with the theme of the component. Using its hue, font, size, placement, things that the you cannot do with the default styles provided by the browser.

  0

  

  Ayoub1Dev•195

  @Ayoub1devPosted over 3 years ago

  @denik1981 Thanks 😊 again!!

  Just curious, you have lots of experience so you either have CS degree or more than 1 year working experience, isn't it?

  0