Tessa Kelly
NoRedInk
github: @tesk9
twitter: @t_kelly9
slides.com/tessak/
typing-web/live
slides.com/tessak/typing-web/live
it "can be toggled open and closed" do
find("#log-in").click
expect(page).
to have_selector(".login-modal-form")
find("#log-in").click
expect(page).
not_to have_selector(".login-modal-form")
end
it 'can be toggled open and closed' do
click_on "Log In"
expect(page).
to have_content "Email or username"
expect(page).
to have_content "Password"
click_on "Log In"
expect(page).
not_to have_content "Email or username"
expect(page).
not_to have_content "Password"
end
it 'can be toggled open and closed' do
click_on "Log In"
expect(page).
to have_content "Email or username"
expect(page).
to have_content "Password"
click_on "Log In"
expect(page).
not_to have_content "Email or username"
expect(page).
not_to have_content "Password"
end
Failure/Error: click_on "Log In"
Capybara::ElementNotFound:
Unable to find link or button "Log In"
import Html exposing (..)
view =
div [] [ text "Hello, ReactiveConf!"
Naming Error
Line 7, Column 14
I cannot find a `txet` variable:
7| div [] [ txet "Hello, ReactiveConf!" ]
^^^^
These names seem close though:
text
cite
del
dt
import Html exposing (..)
view =
div [] [ txet "Hello, ReactiveConf!" ]
Parse Error
Line 8, Column 1
Something went wrong while parsing a
list in view's definition.
7| div [] [ text "Hello, ReactiveConf!"
8|
^
I was expecting:
- an argument, like `name` or `total`
- the end of that list. Maybe you
forgot some code? Or maybe the
body of `view` needs to be indented?
import Html exposing (Html, div, text)
import Html.Events exposing (onClick)
view exclamations =
div
[ onClick (exclamations ++ "!")
]
[ text
("Hello, ReactiveConf!"
++ exclamations)
]
Oooooooops!
The clickable div strikes again!
How can we avoid this mistake?
Inaccessible code
shouldn't compile
➜ elm install tesk9/accessible-html
import Html exposing (Html, text, div)
viewHtml : Html msg
viewHtml =
div [] [ text "Hello again!!" ]
import Accessibility
exposing (Html, text, div)
viewAccessibleHtml : Html msg
viewAccessibleHtml =
div [] [ text "Hello again!!" ]
import Browser
import Html exposing (..)
import Html.Events exposing (onClick)
view exclamations =
div
[ onClick (exclamations ++ "!")
]
[ text
("Hello, ReactiveConf!"
++ exclamations)
]
import Accessibility as Html exposing (..)
Type Mismatch
Line 17, Column 9
The 1st argument to `div` is not what I expect:
17| div [ onClick () ] [ text ("Hello, ReactiveCon"...
^^^^^^^^^^^^^^
This argument is a list of type:
List (Html.Attribute ())
But `div` needs the 1st argument to be:
List (Html.Attribute Never)
(except for when you're reeealllyy sure you want them)
Roots & meta elements
Page structure & layout
Text elements and such
Media and embedded content
Tabular information
Forms
Interactive elements
Types of HTML Inputs
<img src="assets/pretty-flower-0f4a0e47782fcec1a2a7eb824eedb2b13fb9c52412e298039771c869396f87ab.jpg" />
<img alt="" src="assets/pretty-flower-0f4a0e47782fcec1a2a7eb824eedb2b13fb9c52412e298039771c869396f87ab.jpg" />
import Accessibility exposing (decorativeImg)
import Html.Attributes exposing (src)
decorativeImg [ src "assets/pretty-flower-0f4a0e47782fcec1a2a7eb824eedb2b13fb9c52412e298039771c869396f87ab.jpg" ]
import Accessibility exposing (img)
import Html.Attributes exposing (src)
img
"""Piano, broken beyond repair,
sitting incongruously on the
edge of a driveway
"""
[ src "assets/images/broken-piano.jpg" ]
Tessa Kelly
NoRedInk
twitter: @t_kelly9
github: @tesk9
If you're interested in learning more about accessibility best practices, I recommend browsing the WCAG guidelines.
MDN also has friendly resources available.
I'd love to hear about whatever you build!