Sarah Federman sarahbethfederman

aria-maxlength discussion

This is a short overview of the background and decisions that need to be made to map the maxlength HTML attribute and create an aria-maxlength ARIA attribute.

Background

Although the HTML maxlength prop can be used to limit characters in native inputs, it has no accessibility mappings and is not communicated to screen reader users (either up front or when the character limit is reached).

This becomes a pain point when authoring text inputs that have character limits in several ways:

It necessitates a custom live region announcement when the character limit is approaching and exceeded, despite there often being no visual text equivalent.

How to get speech output as text from screen readers

Sometimes you need text, rather than voice, output from screen readers. Why? It's really useful for bug reports ("this disclosure icon is announced as 'black dash triangle dash filled dash x2 underscore final dot png' and needs alt text"). Luckily, getting this text is easy to do.

VoiceOver on MacOS

In VoiceOver you press Option + Control + Shift + C to have the last item that was announced copied to the clipboard. Bonus feature: pressing Option + Control + Shift + Z to save the last phrase to the desktop as an audio file.

VoiceOver on iOS

A three-finger quadruple tap copies the last announcement to the clipboard.

Introduction

Many people are confused by the {{mut}} helper because it seems very magical. This gist aims to help you construct a mental model for understanding what is going on when you use it.

History

Prior to the introduction of {{mut}}, form elements were two-way bound by default. That is, given this component:

import Ember from 'ember';
export default Ember.Component.extend({

I really liked @tjvantoll article Handling Failed HTTP Responses With fetch(). The one thing I found annoying with it, though, is that response.statusText always returns the generic error message associated with the error code. Most APIs, however, will generally return some kind of useful, more human friendly message in the body.

Here's a modification that will capture this message. The key is that rather than throwing an error, you just throw the response and then process it in the catch block to extract the message in the body:

fetch("/api/foo")
  .then( response => {
    if (!response.ok) { throw response }
    return response.json()  //we only get here if there is no error
 })

	import Accessibility
	import UIKit

	extension CGColor {
	var rgba: String { String(format: "R: %1.3f, G: %2.3f, B: %3.3f, A: %4.3f", components![0], components![1], components![2], components![3]) }
	}


	let hues: ClosedRange<Int> = (0...359)
	hues // with constant saturation, brightness, and alpha

	// this is a blend of settings found in two locations in GastbyJS documentation
	// gatsby-remark-plugins section in MDX plugins page:
	// https://www.gatsbyjs.org/docs/mdx/plugins/#gatsby-remark-plugins
	// and gatsby-remark-autolink-headers page options section:
	// https://www.gatsbyjs.org/packages/gatsby-remark-auto-headers/?=autolink%20headers#options

	module.exports = {
	plugins: [
	'gatsby-remark-autolink-headers',
	{

	import React from 'react';
	import { BLOCKS } from '@contentful/rich-text-types';
	import { documentToHtmlString } from './lib';

	import BlogPostBlockquoteEmoji, {
	contentfulId as BLOCKQUOTE_EMOJI,
	} from '../BlogPostBlockquoteEmoji';
	import BlogPostCaption, { contentfulId as CAPTION } from '../BlogPostCaption';
	import BlogPostColumns, { contentfulId as COLUMNS } from '../BlogPostColumns';
	import BlogPostImage from '../BlogPostImage';

	#!/usr/bin/env babel-node
	require('dotenv').config()
	import contentful from 'contentful'
	import fs from 'fs-extra-promise'

	// Contentful Config
	const apiToken = process.env.CONTENTFUL_DELIVERY_API_TOKEN
	const spaceId = process.env.CONTENTFUL_SPACE_ID
	const client = contentful.createClient({ accessToken: apiToken, space: spaceId })