MelSumner

so let's say there's a route called like, about

Then the URL is pretty easy: https://mysite.com/about

But let's say that in the route you want to also render user or settings depending on the user's actions

What does that URL look like?

https://mysite.com/about/with/settings https://mysite.com/about?settings

MelSumner

Accessible Toggle in Ember.js

In https://joshcollinsworth.com/blog/accessible-toggle-buttons, there is a toggle button component in various frameworks. This is the Ember equivalent of those examples.

In app/components/toggle-button.hbs:

<button aria-pressed="{{if this.isPressed "true" "false"}}" {{on "click" this.toggleButton}}>
  {{@buttonText}}
 <span aria-hidden="true" class="icon">▼</span>

MelSumner

Add spacebar activation for a focused link

This is a component in an Ember app that has ember-keyboard installed.

{{!-- component: my-cta.hbs --}}

<a class="my-cta" 
{{on-key "Space" this.doRouteTransition}} 
href={{@myUrl}}

MelSumner

Call To Action (CTA) Component

"If it goes to a URL, it should be a link. If it performs an action, it should be a button."

This is the rule and for good reason-- the keyboard interactions are different, the visual affordances are different, and browsers and assistive tech treat these things differently.

We do what we can to educate both designers and developers about this, since over the years it has gotten a little fuzzy and maybe even ignored entirely. But lately, things are good. Folks understand that we need these things to be different for more inclusive design. It's great!

Except...the CTA.

MelSumner

Let's Make A Dropdown

Here, we intend a component that can be used for something like a user menu in a nav. Maybe you've heard it called "popover" or something like that.

It is not meant to be a select element, or used in a <form>.

Goals:

• make a component that other developers can consume as an addon
• it should be accessible

MelSumner

Hexadecimal color code for transparency

How to set transparency with hex value ?

For example, you want to set 40% alpha transparence to #000000 (black color), you need to add 66 like this #66000000.

Download This sample on Google Play Store

MelSumner

On undoing, fixing, or removing commits in git

A git choose-your-own-adventure!

This document is an attempt to be a fairly comprehensive guide to recovering from what you did not mean to do when using git. It isn't that git is so complicated that you need a large document to take care or your particular problem, it is more that the set of things that you might have done is so large that different techniques are needed depending on exactly what you have done and what you want to have happen.

MelSumner

• Start Date: (fill me in with today's date, YYYY-MM-DD)
• Relevant Team(s): (fill this in with the team(s) to which this RFC applies)
• RFC PR: (after opening the RFC PR, update this with a link to it and update the file name)
• Tracking: (leave this empty)

Interactive New Ember App Creation

Summary

As part of the effort to make new Ember apps more conformant for digital accessibility requirements at a global scale, this RFC proposes an interactive workflow for new Ember apps. This will also have the benefit of assisting new users who prefer an interactive model of new app creation.

MelSumner

Safari Keyboard Navigation

In order to allow for full keyboard navigation of all element in Safari on macOS, make sure the following options are enabled.

All Controls in macOS

In the macOS settings, allow "All Controls" to be keyboard accessible. Enable this feature by going to:

1. Settings
2. Keyboard

MelSumner

Document Active Element (DAE) is a JavaScript bookmarklet intended to help you more easily identify where the activeElement is on your screen.

To use:

1. Add a new bookmark
2. in the "Name" field, type DAE
3. in the URL field, add the following code:

javascript:(function(){ document.activeElement.style.border = "1px solid red"; })();