Make us more SEO friendly (#669)

* Make us more SEO friendly

After running lighthouse on most of our pages, added the required attributes and tags to improve our score.

* CR comments

* fix botched merge conflict resolution

* lowercase speedrun.com

app/javascript/vue/CategorySelector.vue

@@ -1,5 +1,5 @@
 <template>
-  <select class='form-control' v-model='selectedCategoryId' v-if='game' name='run[category]'>
+  <select class='form-control' id='category-selector' v-model='selectedCategoryId' v-if='game' name='run[category]'>
     <option v-if='nullCategory' :value='null'>
       {{nullCategory}}
     </option>

app/javascript/vue/Search.vue

@@ -1,5 +1,5 @@
 <template>
-  <div style='margin: auto'>
+  <div style='margin: auto; margin-top: 0.3rem;'>
     <vue-bootstrap-typeahead
       background-variant='dark'
       class="m-auto search"

app/views/chat_messages/_show.slim

@@ -1,6 +1,6 @@
 .list-group-item.p-0 style=('filter: grayscale(1)' unless chat_message.from_entrant?)
   .media
-    img.mr-3 src=chat_message.user&.avatar width=25 height=25
+    img.mr-3 src=chat_message.user&.avatar width=25 height=25 alt="#{chat_message.user}'s profile picture"
     .media-body
       span.mr-2 = user_badge(chat_message.user)
       = chat_message.body

app/views/games/categories/_title.slim

@@ -2,24 +2,24 @@
   .row.no-gutters
     - if @game.srdc&.cover_url
       .col-md-4 style='max-width: 200px'
-        img.card-img src[email protected]_url
+        img.card-img src[email protected]_url alt="#{@game.srdc.name}'s cover"
     .col-md-8
       .card-body
         h1.card-title = @category.game
         h6
           .btn-group.mr-2
             - if @on_game_page && @category.game.srdc.try(:url).present?
-              a.btn.btn-dark.tip href[email protected] title='See on Speedrun.com'
-                = image_tag(asset_path('srdc.png'), style: 'height: 0.8em')
+              a.btn.btn-dark.tip href[email protected] title='View on speedrun.com' aria-label='View on speedrun.com'
+                = image_tag(asset_path('srdc.png'), style: 'height: 0.8em', alt: 'Speedrun.com first place trophy')
             - elsif !@on_game_page && @category.srdc.try(:url).present?
-              a.btn.btn-dark.tip href[email protected] title='See on Speedrun.com'
+              a.btn.btn-dark.tip href[email protected] title='View on speedrun.com' aria-label='View on speedrun.com'
                 = image_tag(asset_path('srdc.png'), style: 'height: 0.8em')
             - if @category.game.srdc&.twitch_name
-              a.btn.btn-dark.tip title='See on Twitch' href="https://www.twitch.tv/directory/game/#{@category.game.srdc.twitch_name}"
+              a.btn.btn-dark.tip title='See on Twitch' href="https://www.twitch.tv/directory/game/#{@category.game.srdc.twitch_name}" aria-label='View on Twitch'
                 .text-light = icon('fab', 'twitch')
             - if @category.game.srl.present?
-              a.btn.btn-dark.tip href[email protected] title='See on SpeedRunsLive'
-                = image_tag(asset_path('srl.png'))
+              a.btn.btn-dark.tip href[email protected] title='View on SpeedRunsLive' aria-label='View on SpeedRunsLive'
+                = image_tag(asset_path('srl.png'), alt: 'SpeedRunsLive logo')
           - if @category.route
             span.mr-2
               = render partial: 'runs/export_button', locals: { \

app/views/layouts/application.slim

@@ -1,7 +1,10 @@
 doctype html
-html
+html lang='en'
   head
     title = content_for?(:title) ? yield(:title) + " - #{site_title}" : site_title
+    // TODO: all pages should set a unique meta tag
+    - description = content_for?(:description) ? yield(:description) : "The world's most advanced speedruning analytics and racing platform!"
+    meta name='description' content=description
     link href='//fonts.googleapis.com/css?family=Open+Sans|Anonymous+Pro' rel='stylesheet' type='text/css'
     link type='text/plain' rel='author' href='https://splits.io/humans.txt'
     meta name='viewport' content='width=device-width, initial-scale=1'
@@ -29,7 +32,6 @@ html
             code#matrix.d-block.text-left.my-5 style='opacity: 0.5'
           #multiupload
             .text-primary
-              #upload-spinner = render partial: 'shared/spinner', locals: {message: ''}
               h5.d-inline.text-primary
                 span#successful-uploads> 0
                 | uploaded and processing
@@ -40,8 +42,8 @@ html
             p.text-light.mt-5 This page will update automatically.
         nav.navbar.navbar-expand-md
           a.navbar-brand.text-nowrap.mr-2 href=root_path
-            img.d-inline src=asset_path('logo-imageonly.svg') height='25' style='margin-right: 0'
-            img.d-sm-inline.d-md-none.d-xl-inline src=asset_path('logo-textonly.svg') height='25' style='margin-top: .1em'
+            img.d-inline src=asset_path('logo-imageonly.svg') height='25' style='margin-right: 0' alt='Splits.io image only logo'
+            img.d-sm-inline.d-md-none.d-xl-inline src=asset_path('logo-textonly.svg') height='25' style='margin-top: .1em' alt='Splits.io text only logo'
             - if controller_name == 'races'
               img.d-sm-inline.d-md-none.d-xl-inline(
                 alt='Splits.io Versus logo'
@@ -76,14 +78,15 @@ html
                 a.nav-link.px-3 href=faq_path
                   => icon('fas', 'info-circle', class: 'd-none d-md-inline d-xl-none')
                   span.d-md-none.d-xl-inline FAQ
-              search
+              li.nav-item
+                search
             ul.nav.navbar-nav
               - if current_user.present?
                 li.nav-item class=('active' if on_a_profile_page?)
                   .dropdown
                     a.nav-link.dropdown-toggle.px-3#profileDropdownLink href='#' data-toggle='dropdown' role='button' aria-expanded='false' aria-haspopup='true'
                       - if current_user.avatar.present?
-                        img.mr-2 src=current_user.avatar width=20 height=20
+                        img.mr-2 src=current_user.avatar width=20 height=20 alt="#{current_user}'s profile picture"
                       - else
                         => icon('fas', 'user')
                       span = current_user

app/views/races/_entries_table.slim

@@ -70,10 +70,10 @@ h6.card-header Entries
                 span.text-danger = entry.runner.entries.where.not(forfeited_at: nil).count
           td.nowrap.text-center
             - if entry.runner.try(:twitch).try(:present?)
-              a.text-light.tip.mr-2 href=entry.runner.twitch.url title='Watch on Twitch'
+              a.text-light.tip.mr-2 href=entry.runner.twitch.url title='Watch on Twitch' aria-label='Watch on Twitch'
                 = icon('fab', 'twitch')
             - if entry.run.present?
-              a.text-light.tip.mr-2 href=run_path(entry.run) title='See associated run'
+              a.text-light.tip.mr-2 href=run_path(entry.run) title='See associated run' aria-label='See associated run'
                 = icon('fas', 'scroll')
 - if !race.started? && add_ghost
   .card-footer.clearfix: .float-right

app/views/races/_title.slim

@@ -29,27 +29,31 @@ race-title(
             ' created by
             = user_badge(race.owner)
           .btn-group.ml-2 v-if='!editing'
-            button.btn.btn-outline-light.btn-sm.clipboard-btn(
-              data-clipboard-text=race_url(race, join_token: race.join_token)
-              title='Copy invite link'
-              v-tippy=true
-            )
-              span#copy = icon('fas', 'share-alt')
-              span#copied style='display: none;' = icon('fas', 'check')
             - if race.belongs_to?(current_user)
-              button.btn.btn-outline-light.btn-sm(
-                :disabled='loading'
-                :title='error || "Edit"'
-                @click='edit'
-                v-if='!race.started_at'
+              button.btn.btn-outline-light.btn-sm.clipboard-btn(
+                data-clipboard-text=race_url(race, join_token: race.join_token)
+                title='Copy invite link'
                 v-tippy=true
+                aria-label='Copy race URL'
               )
-                template v-if='loading' = render partial: 'shared/spinner'
-                template v-else-if='error' = icon('fas', 'times')
-                template v-else=true = icon('fas', 'edit')
+                span#copy = icon('fas', 'share-alt')
+                span#copied style='display: none;' = icon('fas', 'check')
+              - if !race.started?
+                button.btn.btn-outline-light.btn-sm(
+                  :disabled='loading'
+                  :title='error || "Edit"'
+                  @click='edit'
+                  v-if='!editing && !race.started_at'
+                  v-tippy=true
+                  aria-label='Edit race information'
+                )
+                  template v-if='loading' = render partial: 'shared/spinner'
+                  template v-else-if='error' = icon('fas', 'times')
+                  template v-else=true = icon('fas', 'edit')
           a.btn.btn-outline-light.btn-sm.ml-2(
             href=race_path(race, controller.race_params.merge(browsersource: 1))
             title='View in browser source friendly layout (beta)'
+            aria-label='View in browser source friendly layout (beta)'
             v-if='!editing'
             v-tippy=true
           ) = icon('fas', 'broadcast-tower')

app/views/races/show.slim

@@ -35,6 +35,7 @@ race inline-template=true [email protected] v-cloak=true
                         placeholder='Chat...'
                         type='text'
                         v-model='body'
+                        aria-label='Input message'
                       )
                       .input-group-append
                         button.btn.btn-dark#chat-submit(
@@ -44,6 +45,7 @@ race inline-template=true [email protected] v-cloak=true
                           :disabled='body === ""'
                           :title='error'
                           v-tippy=true
+                          aria-label='Submit message'
                         )
                           template v-if='loading' = render partial: 'shared/spinner'
                           span.text-danger v-else-if='error' => icon('fas', 'exclamation-triangle')
@@ -52,7 +54,7 @@ race inline-template=true [email protected] v-cloak=true
               = render partial: 'chat_messages/show', locals: {chat_message: msg}
             .list-group-item.p-0
               .media
-                img.mr-3 src=asset_path('logo-darkbg-breathingroom.png') width=25 height=25
+                img.mr-3 src=asset_path('logo-darkbg-breathingroom.png') width=25 height=25 alt='Splits.io image only logo'
                 .media-body
                   span.mr-2: .badge.badge-success Splits.io
                   i Race created

app/views/runs/_export_button.slim

@@ -30,7 +30,7 @@
         => icon('fas', 'download')
         = timer
     h5.dropdown-header.font-weight-bold Online timers
-    a.dropdown-item href="https://one.livesplit.org/#/splits-io/#{run.id36}" target='_blank'
+    a.dropdown-item href="https://one.livesplit.org/#/splits-io/#{run.id36}" target='_blank' rel='noopener noreferrer'
       => icon('fas', 'cloud')
       | LiveSplit One
     h6.dropdown-header.font-weight-bold Raw data

app/views/runs/_landing.slim

@@ -96,5 +96,5 @@
           => icon('fab', 'twitch')
           ' Link with Twitch
   .row.my-5.py-5: .col-md-12.text-center
-    button#scroll-up.btn.btn-outline-secondary.btn-lg = icon('fas', 'angle-double-up')
+    button#scroll-up.btn.btn-outline-secondary.btn-lg aria-label='Scroll to top' = icon('fas', 'angle-double-up')
     big.d-block: b.text-secondary Ready to try?

app/views/runs/_title.slim

@@ -17,7 +17,7 @@ h5
         a.dropdown-item href=run_path(old_run) = old_run.duration.format
   - if run.srdc_id.present?
     a.badge.badge-dark.tip.mr-2 title='See on Speedrun.com' href=run.srdc_url
-      = image_tag(asset_path('srdc.png'), style: 'height: 0.8em')
+      = image_tag(asset_path('srdc.png'), style: 'height: 0.8em', alt: 'Speedrun.com first place trophy')
   - if run.entry.present? && !run.entry.ghost?
     a.badge.badge-dark.tip.mr-2 title='Recorded as part of a race' href=race_path(run.entry.race)
       = icon('fas', 'flag-checkered')
@@ -73,7 +73,7 @@ h5
           data={toggle: :modal, target: current_user.srdc ? '#srdc-submit' : '#srdc-link'}
           title="Automatically submit to Speedrun.com. You'll get a chance to review the details first."
         )
-          => image_tag(asset_path('srdc.png'), style: 'height: 0.8em')
+          => image_tag(asset_path('srdc.png'), style: 'height: 0.8em', alt: 'Speedrun.com first place trophy')
           span Auto-submit
     - if run.category&.srdc && run.srdc_id.blank?
       - if current_user.srdc

app/views/runs/edit.slim

@@ -29,15 +29,15 @@
     = form_for @run.video || @run.build_video, url: run_video_path(@run), method: :put, html: {class: 'card h-100'} do |f|
       h5.card-header Edit video
       .card-body
-        = f.text_field :url, class: 'form-control', placeholder: 'URL for a Twitch or YouTube VOD'
+        = f.text_field :url, class: 'form-control', placeholder: 'URL for a Twitch or YouTube VOD', 'aria-label' => 'Video URL'
       .card-footer.clearfix: .float-right: .btn-group
         = f.submit 'Save video', class: 'btn btn-outline-primary'
 
   .col.p-1
     = form_for @run, namespace: 'srdc', html: {class: 'card h-100'} do |f|
       h5.card-header Edit speedrun.com link
       .card-body
-        = f.text_field :srdc_url, class: 'form-control', placeholder: 'URL for your run on speedrun.com'
+        = f.text_field :srdc_url, class: 'form-control', placeholder: 'URL for your run on speedrun.com', 'aria-label' => 'Speedrun.com URL'
       .card-footer.clearfix: .float-right: .btn-group
         = f.submit 'Save speedrun.com link', class: 'btn btn-outline-primary'
 
@@ -90,7 +90,7 @@
     .card
       #delete-header.card-header
         h5.mb-0
-          button.btn.btn-link type='button' data={toggle: 'collapse', target: '#delete-body'} aria={expanded: true, controls: 'delete-body'}
+          button.btn.btn-link type='button' data={toggle: 'collapse', target: '#delete-body'} aria={expanded: false, controls: 'delete-body'}
             ' Delete or disown
       #delete-body.collapse aria={labelledby: 'delete-header'} data={parent: '#delete'}
         .card-body

app/views/settings/_account_links.slim

@@ -53,12 +53,12 @@
   .list-group-item
     - if current_user.srdc.nil?
       a.btn.btn-srdc.mr-2 href='#' data={toggle: :modal, target: '#srdc-link'}
-        => image_tag(asset_path('srdc.png'), style: 'height: 0.8em')
+        => image_tag(asset_path('srdc.png'), style: 'height: 0.8em', alt: 'Speedrun.com first place trophy')
         ' Connect Speedrun.com
       = render partial: 'shared/srdc_link_modal'
     - else
       = button_to(speedrun_dot_com_user_path, method: :delete, class: 'btn btn-outline-light mr-2', form_class: 'd-inline')
-        => image_tag(asset_path('srdc.png'), style: 'height: 0.8em')
+        => image_tag(asset_path('srdc.png'), style: 'height: 0.8em', alt: 'Speedrun.com first place trophy')
         ' Disconnect
       .text-muted.mt-2.float-right
         ' Linked as

app/views/settings/_authorized_applications.slim

@@ -26,7 +26,7 @@
                 td
                   div title=auth.created_at #{time_ago_in_words(auth.created_at)} ago
                 td
-                  = button_to authorization_path(application.id), class: 'btn btn-outline-light', method: :delete, data: {\
+                  = button_to authorization_path(application.id), class: 'btn btn-outline-light', method: :delete, 'aria-label' => 'Revoke application permission', data: {\
                     confirm: "Really revoke permissions from #{application.name}?"\
                   }
                     span = icon('fas', 'times')

app/views/settings/_my_applications.slim

@@ -4,7 +4,7 @@
     a.btn.btn-outline-primary.mr-2 href='/settings/applications/new'
       => icon('fas', 'plus')
       span Create Application
-    a.btn.btn-outline-secondary target='_blank' href='https://github.com/glacials/splits-io/blob/master/docs/api.md#user-authentication-and-authorization'
+    a.btn.btn-outline-secondary target='_blank' rel='noopener noreferrer' href='https://github.com/glacials/splits-io/blob/master/docs/api.md#user-authentication-and-authorization'
       => icon('fas', 'file')
       span View Documentation
     - if current_user.applications.empty?
@@ -38,11 +38,12 @@
                     code = application.redirect_uri
                   td
                     .input-group
-                      input.form-control id="client-id-#{application.uid}" type='text' value=application.uid readonly=1
+                      input.form-control id="client-id-#{application.uid}" type='text' value=application.uid readonly=1 aria-label='Client ID'
                       .input-group-append
                         .btn.btn-outline-primary.clipboard-btn.tip(
                           data-clipboard-target="#client-id-#{application.uid}"
                           title='Copy to clipboard'
+                          aria-label='Copy client ID to clipboard'
                         )
                           span#copy = icon('fas', 'copy')
                           span#copied style='display: none;' = icon('fas', 'check')
@@ -51,11 +52,12 @@
                       button.btn.btn-outline-secondary.btn-block disabled=true Hidden forever
                     - else
                       .input-group
-                        input.form-control id="client-secret-#{application.uid}" type='text' value=application.secret readonly=1
+                        input.form-control id="client-secret-#{application.uid}" type='text' value=application.secret readonly=1 aria-label='Client secret'
                         .input-group-append
                           .btn.btn-outline-primary.clipboard-btn.tip(
                             data-clipboard-target="#client-secret-#{application.uid}"
                             title='Copy to clipboard'
+                            aria-label='Copy client secret to clipboard'
                           )
                             span#copy = icon('fas', 'copy')
                             span#copied style='display: none;' = icon('fas', 'check')
@@ -64,9 +66,10 @@
                       a.btn.btn-outline-secondary.tip(
                         href=edit_application_path(application)
                         title="Edit #{application.name}"
+                        aria-label='Edit application'
                       )
                         span = icon('fas', 'edit')
-                      = link_to(application_path(application), class: 'btn btn-outline-secondary tip', method: :delete, \
+                      = link_to(application_path(application), class: 'btn btn-outline-secondary tip', method: :delete, 'aria-label' => 'Delete application',\
                         data: { \
                           confirm: "Really delete #{application.name}? This will also revoke all \
                                     #{application.access_tokens.count} authorizations and invalidate the associated \

app/views/settings/_username.slim

@@ -3,7 +3,7 @@
   .card-body
     .row
       .col-md-6
-        .mb-3: input.form-control type='text' name='user[name]' value=current_user.name
+        .mb-3: input.form-control type='text' name='user[name]' value=current_user.name aria-label='Change username'
         .card: .card-body
             p
               ' Letters, numbers, underscores. (For nerds:

app/views/shared/_run_table.slim

@@ -18,7 +18,7 @@
         = link_to(run, class: 'list-group-item list-group-item-action flex-column align-items-start bg-transparent text-light')
           .media
             - if run.game&.srdc&.cover_url
-              = image_tag(run.game&.srdc&.cover_url, skip_pipeline: true, style: 'height: 100%; width: 70px', class: 'mr-3')
+              = image_tag(run.game.srdc.cover_url, skip_pipeline: true, style: 'height: 100%; width: 70px', class: 'mr-3', alt: "#{run.game.srdc.name}'s cover")
             - else
               .mr-3 style='width: 70px; height: 70px'  
             .media-body

app/views/subscriptions/index.slim

@@ -93,7 +93,7 @@
             => icon('fab', 'twitch')
             ' Auto-highlight runs on Twitch
           li
-            => image_tag(asset_path('srdc.png'), style: 'height: 0.8em')
+            => image_tag(asset_path('srdc.png'), style: 'height: 0.8em', alt: 'Speedrun.com first place trophy')
             ' Auto-submit runs to speedrun.com
             .badge.badge-pill.badge-primary New
           li Hide runs without disowning them