Long tail of style and accessibility fixes

.gitignore

@@ -73,6 +73,7 @@ brakeman.html
 /app/assets/stylesheets/translations/*
 /app/assets/stylesheets/web-fonts/*
 /app/assets/stylesheets/translations/*
+/app/assets/stylesheets/editor/*
 
 # Ignore test artifacts
 /config/locales/data/html_records/*

app/assets/javascripts/editor.js

@@ -11,11 +11,11 @@
 			editor: editor,
 			class: 'pen',
 			textarea: '<textarea name="' + name + '"></textarea>',
-			list: ['p', 'h3', 'h4', 'blockquote', 'insertorderedlist', 'insertunorderedlist', 'bold', 'italic', 'underline', 'strikethrough', 'createlink', 'insertimage'],
+			list: ['p', 'h1', 'h2', 'blockquote', 'insertorderedlist', 'insertunorderedlist', 'bold', 'italic', 'underline', 'strikethrough', 'createlink', 'insertimage'],
 			title: {
 				'p': 'Paragraph',
-				'h3': 'Major Heading',
-				'h4': 'Minor Heading',
+				'h1': 'Major Heading',
+				'h2': 'Minor Heading',
 				'blockquote': 'Quotation',
 				'insertorderedlist': 'Ordered List',
 				'insertunorderedlist': 'Unordered List',

app/assets/stylesheets/_application.scss

@@ -216,16 +216,26 @@ textarea, .textarea {
 	}
 }
 
-.textarea {
+.textarea, .workshop-description {
 	> :first-child {
 		margin-top: 0;
 	}
+
 	> :last-child {
 		margin-bottom: 0;
 	}
+
 	p {
 		font-size: 1.125em;
 	}
+
+	h1 {
+		font-size: 1.667em;
+	}
+
+	h2 {
+		font-size: 1.25em;
+	}
 }
 
 input {
@@ -257,6 +267,14 @@ input {
 		}
 	}
 
+	&.big input {
+		@include font-family(secondary);
+
+		.composition & {
+			margin-top: 1em;
+		}
+	}
+
 	label,
 	&.focused label {
 		position: absolute;
@@ -290,15 +308,6 @@ input {
 		will-change: box-shadow;
 	}
 
-	&.big input {
-		font-size: 2em;
-		@include font-family(secondary);
-
-		.composition & {
-			margin-top: 1em;
-		}
-	}
-
 	&:focus, &:active, &:focus {
 
 		label {
@@ -772,12 +781,12 @@ ul.warnings li,
 	.user-nav-bar {
 		position: absolute;
 		right: 0;
-		width: auto;
 		text-align: right;
 		top: 1em;
 		font-size: 0.9em;
 		width: 100%;
 		padding-left: 13em;
+		padding-right: 1em;
 
 		a {
 			display: block;
@@ -839,7 +848,7 @@ ul.warnings li,
 			background-color: inherit;
 			@include _(transform, rotate(135deg));
 			@include _(transition, 'transform 200ms ease-in-out, background-color 200ms ease-in-out');
-			@include _(box-shadow, 0.2em -0.1em 0.8em -0.4em #000);
+			@include _(box-shadow, 0.2em -0.4em 0.8em -0.4em #000);
 		}
 
 		&.enabled {
@@ -879,7 +888,6 @@ ul.warnings li,
 
 #main {
 	position: relative;
-	max-width: (rems(68) - $sidebar-width) * 2;
 	background-color: $white;
 	padding-bottom: rems(2);
 
@@ -1223,6 +1231,14 @@ $header-tilt: 8deg;
 		}
 	}
 
+	.number-field,
+	.email-field,
+	.text-field {
+		&.big input {
+			font-size: 2em;
+		}
+	}
+
 	.flex-column {
 		display: flex;
 		align-items: flex-start;
@@ -1566,11 +1582,13 @@ input[type="submit"]:focus,
 	@include _(animation, fade-out ease-in-out 500ms infinite alternate both);
 }
 
+body {
 	input:focus,
 	textarea:focus,
 	.textarea {
 		@include _(animation, none);
 	}
+}
 
 @include breakpoint(large) {
 	#main-nav {
@@ -2153,12 +2171,19 @@ html[data-lingua-franca-example="html"] {
 	@include translation-pointer;
 }
 
+.workshop-notes {
+	p {
+		font-size: 1em;
+	}
+}
+
 .workshop-list {
 	list-style: none;
 	padding: 0 2em;
 
 	.workshop-description {
-		max-height: 10em;
+		font-size: 0.8em;
+		max-height: 20em;
 		padding: 1em;
 		overflow: hidden;
 	}

app/helpers/application_helper.rb

@@ -665,6 +665,42 @@ module ApplicationHelper
 		_!((p * 10000).to_i.to_s.gsub(/^(.*)(\d\d)$/, '\1.\2%'))
 	end
 
+	def richtext(text, reduce_headings = 2)
+		return '' unless text.present?
+		return _!(text).
+			gsub(/<(\/?)h4>/, '<\1h' + (reduce_headings + 4).to_s + '>').
+			gsub(/<(\/?)h3>/, '<\1h' + (reduce_headings + 3).to_s + '>').
+			gsub(/<(\/?)h2>/, '<\1h' + (reduce_headings + 2).to_s + '>').
+			gsub(/<(\/?)h1>/, '<\1h' + (reduce_headings + 1).to_s + '>').
+			html_safe
+	end
+
+	def textarea(name, value, options = {})
+		label_id = "#{name.to_s}-label"
+		description_id = nil
+		html = label_tag(name, nil, id: label_id)
+
+		if options[:warning].present?
+			description_id = "#{name.to_s}-label" unless options[:help].present?
+			html += content_tag(:div, _(options[:warning], :s, 2), id: description_id, class: 'warning-info')
+		end
+
+		if options[:help].present?
+			description_id = "#{name.to_s}-label"
+			html += content_tag(:div, _(options[:help], :s, 2), id: description_id, class: 'input-field-help')
+		end
+
+		html += content_tag(:div, value.present? ? value.html_safe : '',
+				id: name,
+				class: 'textarea',
+				data: { name: name },
+				lang: options[:lang],
+				aria: { labeledby: label_id, describedby: description_id }
+			)
+	
+		return content_tag(:div, html, class: ['text-area-field', 'input-field']).html_safe
+	end
+
 	private
 		def _form_field(type, name, value, options)
 			if type == 'check_box'

app/views/workshops/_show.html.haml

@@ -9,7 +9,7 @@
 			- if preview.blank? && workshop.can_show_interest?(current_user)
 				= form_tag toggle_workshop_interest_path(workshop.conference.slug, workshop.id) do
 					= button_tag (workshop.interested?(current_user) ? :remove_interest : :show_interest), :value => :toggle_interest, :class => (workshop.interested?(current_user) ? :delete : :add)
-		=_!(workshop.info).html_safe if workshop.info.present?
+		= richtext workshop.info
 		- if preview.blank? && translations_available_for_editing
 			.actions
 				- translations_available_for_editing.each do |locale|
@@ -55,6 +55,6 @@
 				%h3=_'articles.workshops.headings.needs','What do you need?'
 				%p= _!((needs.map { |x| _"workshop.options.needs.#{x}" }).join(', ').to_s.html_safe)
 		- if workshop.notes.present?
-			= columns(medium: 12) do
+			= columns(medium: 12, class: 'workshop-notes') do
 				%h3=_'articles.workshops.headings.notes','Notes'
-				=_!(workshop.notes).html_safe
+				= richtext workshop.notes, 3

app/views/workshops/new.html.haml

@@ -26,10 +26,7 @@
 					.original-text
 						%h4=_'translate.content.Translation_of'
 						.value=@workshop.title!
-				.text-area-field.input-field
-					= label_tag :info
-					.input-field-help=_'articles.workshops.paragraphs.info', :s, 2
-					.textarea#info{lang: @translation, data: {name: :info}}=(@info || '').html_safe
+				= textarea :info, @info, help: 'articles.workshops.paragraphs.info', lang: @translation
 				- if @is_translating
 					.original-text
 						%h4=_'translate.content.Translation_of'
@@ -80,10 +77,7 @@
 						= label_tag :needs_facilitators do
 							= _'workshop.options.needs_facilitators', 'Needs Additional Facilitators'
 				= columns(medium: 12) do
-					.text-area-field.input-field
-						= label_tag :notes
-						.warning-info=_'articles.workshops.paragraphs.notes','Notes are only viewable by conference hosts and workshop facilitators'
-						.textarea#notes{data: {name: :notes}}=(@workshop.notes || '').html_safe
+					= textarea :notes, @workshop.notes, warning: 'articles.workshops.paragraphs.notes'
 			= columns(medium: 12) do
 				.actions.next-prev
 					= button_tag :save, value: :save

vendor/assets/javascripts/pen.js

@@ -85,7 +85,7 @@
       stayMsg: 'Are you going to leave here?',
       textarea: '<textarea name="content"></textarea>',
       list: [
-        'blockquote', 'h2', 'h3', 'p', 'code', 'insertorderedlist', 'insertunorderedlist', 'inserthorizontalrule',
+        'blockquote', 'h1', 'h2', 'p', 'code', 'insertorderedlist', 'insertunorderedlist', 'inserthorizontalrule',
         'indent', 'outdent', 'bold', 'italic', 'underline', 'createlink', 'insertimage'
       ],
       titles: {},