button default

[jbubar]

Overview

In the site guide, there is a btn class for all buttons. Would it be better to make this a default on all html elemnts?
This issue is to figure that out.

Action Items

• look into

html elements

look into where .btn is used

come up with a proposal and share it with UI/UX and the dev team.

Resources/Instructions

.btn {
  border: 0;
  box-shadow: 0 0 8px 0 rgba($color-black, 0.2);
  display: inline-block;
  font-weight: map-get($font-weight, bold);
  text-decoration: none;
  transition: all 100ms ease-in;
  white-space: nowrap;
  margin: 0 20px 20px 0;
}
- https://www.figma.com/file/0RRPy1Ph7HafI3qOITg0Mr/Hack-for-LA-Website?node-id=3686%3A93

[Sihemgourou]

All team meeting discussion:

• Looks like there is some consensus around this issue. Sounds like the team would like to add styles on classes rather than html tags directly.
• We need to consider standardizing html elements for accessibility
• We also might need to consider standardizing the layout variables on the site (media queries, responsive etc).

[Sihemgourou]

Next action :

• discuss during next pm/design meeting with @Aveline-art, @daniellex0, and pms

[Aveline-art]

Intro

I have taken a brief dive into buttons and I would like to make a somewhat informal proposal. Before I start, a few notes on what I have found after navigating other websites:

• <button> tags are mostly used for things that activates a fun animation (such as a see more/see less button), or for submitting something (like a newsletter).
• <a> tags are used when the going to a different webpage, either on the same website or on other website. It seems that 90% of the time, a tags are used for components that visually looks like a button.
• Somewhat rarer are <input type="button" > tags which are usually used for forms, like a signin or register form (although they are sometimes <button> tags.

Proposal

Based on that, I will propose:

• Turn all of our buttons into <a> tags if they are links to other pages
• Turn all of our buttons into <button> tags if they do not go to other pages (such as the newsletter)
• If we ever need to do something strange, like make a <div> into a button, we can leverage ARIA attributes such as role="" to denote that it is button or link.
• Also, to adhere to the design system, all button components should have class = "btn [color] [size] at minimum.
• A good number of our button components are wrapped as: <a href="./join-us"><button>Join us</button></a> which absolutely should not happen. They should be changed as one or the other based on the above.
• To check for accessibility, we should leverage accessibility inspectors on Chrome/Firefox/Edge.

Next steps:

• If accepted, we can start creating an issue to update all the buttons on our website.
• If not, we should give suggestions on edits to the proposal (and assign someone to do the research).

Sources

Links, Buttons, & Other Clickable Elements
ARIA: button role
<a>: The Anchor element
<button>: The Button element
Can I nest a <button> element inside an <a> using HTML5?
The a element

Buzzfeed a tag

Buzzfeed button tag

Codecademy a tag

Codecademy button tag

VentureCapitalist a tag

VentureCapitalist button tag

Buzzfeed input tag

[averdin2]

I think @Aveline-art's proposal on how to implement buttons is a good idea.

[ExperimentsInHonesty]

I suggest we find all the buttons everywhere on the site, and list out

1. what the desired action of the button is
2. how it is coded now
3. what the recommended change is.

[abuna1985]

I second with @averdin2 this is a good idea. We should adopt this button standardization and begin an audit.

[Aveline-art]

Closed because of proposal acceptance. Next step is: #1921