Keyboard Accessibility #301

majapw · 2017-02-07T00:04:03Z

This is an MVP of keyboard accessibility! I imagine there will still be some polish to take care of, especially when it comes to managing focus and aria roles throughout. BUT I would really like to get this merged so that we can iterate more on it (and add better messaging/validation/accessibility to the inputs themselves as well).

HAVE A GIF!

@airbnb/webinfra plz give me some love. #

majapw · 2017-02-24T20:18:03Z

src/components/CalendarDay.jsx

+          onClick={e => this.onDayClick(day, e)}
+          tabIndex={isFocused ? 0 : -1}
+        >
+          {renderDay ? renderDay(day) : day.format('D')}


This may cause problems due to the fact that renderDay could return anything. Thoughts?

We originally decided my suggestion of using a component here like <Day>{renderDay ? renderDay(day) : day.format('D')}</Day> so that a propType could be applied to the return value - is that perhaps worth doing here?

I'm still not super sure how that would work? What would the Day component look like?

function Day({ children }) { return React.Children.only(children); } Day.propTypes = { children: PropTypes.node.isRequired, };

and the propType can be as fancy as we want :-)

I guess my only Q is that given that buttons only allow "Phrasing content" (https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) so while we could create a proptype to limit the node to one of these dom elements, that actually seems pretty hard to do. @backwardok with this is mind, do you think it is more reasonable to put a role="button" on the td maybe?

You can do that, but you'll need to make sure that you add all the related keyboard handling to that element

majapw · 2017-02-24T22:33:26Z

src/components/DateInput.jsx

@@ -59,10 +61,10 @@ export default class DateInput extends React.Component {
  }

  componentDidUpdate(prevProps) {
-    const { focused } = this.props;
-    if (prevProps.focused === focused) return;
+    const { focused, hasFocus } = this.props;


Need to come up with some better nomenclature to denote component "focus" (ie which is currently being selected) vs. DOM "focus" because this PR separates the two.

majapw · 2017-02-25T00:45:07Z

src/components/DayPicker.jsx

+        break;
+
+      case 27: // Escape
+        onBlur();


So this takes focus back to the input, so maybe this name is not quite right.

majapw · 2017-02-25T00:45:32Z

src/components/DayPicker.jsx

+    }
+
+    // If there was a month transition, do not update the focused date until the transition has
+    // completed. Otherwise, attempting to focus on a DOM node may interrupt the CSS animation.


Incidentally, the way this behavior manifests itself is weird AF

where does the focus happen after?

(and maybe add a comment with a see [insert function name here])

majapw · 2017-02-25T00:46:22Z

src/components/DayPicker.jsx

+    }
+  }
+
+  onPrevMonthClick(e, nextFocusedDate) {


So with the regular button click event... nextFocusedDate is actually like the native event object or something... which is weird.

We're passing this here so that we have access to what we want to focus on after the month transition.

e should always be the last argument

coveralls · 2017-02-28T01:19:16Z

Coverage decreased (-10.5%) to 76.349% when pulling ee36ce8 on maja-a11y-work into 04d08d4 on master.

majapw · 2017-03-01T22:46:35Z

Hi @backwardok @wyattdanger @ljharb @lencioni! I still need to write tests, but I'd love to get some feedback before I do. Would y'all be able to take a look at this PR? I am pushing real hard to get it in this week.

This is the MVP. I think there will likely be some polish work that still needs to be done.

gdborton · 2017-03-01T22:58:05Z

css/DayPickerNavigation.scss

@@ -23,6 +23,7 @@

  &:active {
    background: darken($react-dates-color-white, 5%);
+    // outline: 0;


nit: remove

gdborton · 2017-03-01T23:00:07Z

css/variables.scss

@@ -16,6 +17,7 @@ $react-dates-color-gray: #565a5c !default;
 $react-dates-color-gray-dark: darken($react-dates-color-gray, 10.5%) !default;
 $react-dates-color-gray-light: lighten($react-dates-color-gray, 17.8%) !default;   // #82888a
 $react-dates-color-gray-lighter: lighten($react-dates-color-gray, 45%) !default;     // #cacccd
+$react-dates-color-gray-lightest: #eeeeee;


Isn't this changing the shade of gray by a tiny bit? Why not stick with lighten?

raejin · 2017-03-02T00:24:12Z

src/components/DayPicker.jsx

+        break;
+
+      case '?':
+        this.toggleKeyboardShortcuts();


This is probably nitpicking, but can there be an easy way to detect if the shortcut panel was activated by DateInput, hence if we're closing the shortcut panel it would focus back on the DateInput? (I tried played with it but lost myself in managing props)

Yeah I kind of wanted to do this... but it was somewhat painful! I will think more on it.

raejin · 2017-03-02T00:42:24Z

src/components/CalendarDay.jsx

+
+
+    let availabilityText = '';
+    if (BLOCKED_MODIFIER in modifiers) {


When will modifiers not include BLOCKED_MODIFIER?

if you roll your own DayPicker wrapper and define your own modifiers

raejin · 2017-03-02T01:01:04Z

src/components/DayPickerRangeController.jsx

@@ -157,9 +174,37 @@ export default class DayPickerRangeController extends React.Component {
    });
  }

+  getFirstFocusableDay(newMonth) {


Did you plan to add test for this?

SOON. first I wanted comments in case I was horribly off the mark.

moonboots · 2017-03-02T19:41:47Z

examples/DateRangePickerWrapper.jsx

 };

 class DateRangePickerWrapper extends React.Component {
  constructor(props) {
    super(props);

-    let focusedInput = null;
+    let selectedInput = null;


Renaming from focused to selected creates a pretty big diff that might make merging/rebasing other PRs hairy. If selected is required in a11y props, can the renaming be limited to external facing html props?

This nomenclature change is not ostensibly required for a11y purposes. The reason I am making it is because this PR introduces the concept of DOM focus as separate concept from the focusedInput prop and it makes sense to have a legitimately different name for the two things and have focus refer to, well, actual focus.

If there are any PRs in particular that you are concerned about, I can help with the rebasing.

backwardok

Hard to get a good sense without actually trying this out, but added some comments from a quickish perusal

backwardok · 2017-03-02T19:57:39Z

css/DayPickerKeyboardShortcuts.scss

+}
+
+.DayPickerKeyboardShortcuts__show {
+  border-top: 26px solid $react-dates-color-white;


there are a number of size numbers in this stylesheet that seem like non standard units. why are these numbers so specific? are any of these intended to be the same on purpose? can we move some of these into vars for more clarity?

I mean tbh, they're made up numbers loosely based on the padding in the DayPicker which like, are also made up and not particularly grid-based or anything. I am not a designer and I can pull these out into variables... but I don't think there will really be rhyme or reason until we get a designer to take a look.

backwardok · 2017-03-02T20:00:02Z

css/DayPickerKeyboardShortcuts.scss

+
+    &:hover,
+    &:focus {
+      fill: $react-dates-color-gray-light;


perhaps something to do in a future update, but one thing we came across during a11y testing is that users who have ie9 and enable a setting that essentially turns off background colors and text colors will end up not being able to notice the difference here. We'll likely need to do something where we change the border color or add an outline to the element for more visibility.

Yeah, let's put a pin in that for a future update.

backwardok · 2017-03-02T20:02:14Z

examples/SingleDatePickerWrapper.jsx

+    const { selected, date } = this.state;
+
+    const props = omit(this.props, [
+      'autoFocus',


Why do these need to be removed?

also instead of omit, this could use object destructuring and disable no-unused-vars

@ljharb This is in the examples, not in the core code so this only adds lodash.omit as a dev dependency. I think using omit makes things cleaner and more readable than objecting destructuring and disabling the lint rule.

@backwardok these are props on the example wrapper, not on the DateRangePicker explicitly because they have to do with instantiating the state on this component. Because we use forbidExtraProps I wanna clean them out before passing the props through to the DRP.

Maybe a comment before that line so it's understood?

backwardok · 2017-03-02T20:03:39Z

src/components/CalendarDay.jsx

+      availabilityText = modifiers[BLOCKED_MODIFIER](day) ? unavailable : available;
+    }
+
+    const ariaLabel = `${availabilityText} ${day.format('dddd')}. ${day.format('LL')}`;


I'm curious whether or not it's more valuable for screen reader users to hear the date first or the availability first. Might be something we want to run through user research at some point

Yeah, I mean I am also going to try to get a copy person to look at the text itself, we'll need to get translations done, and so on. :D We will def add this to the fray.

backwardok · 2017-03-02T20:06:04Z

src/components/DateInput.jsx

 });

 const defaultProps = {
  placeholder: 'Select Date',
  displayValue: '',
  inputValue: '',
  screenReaderMessage: '',
-  focused: false,
+  focused: false, // handles actual DOM focus


feels like these comments shouldn't need to be duplicated within the defaultProps definition

backwardok · 2017-03-02T20:25:06Z

src/components/DayPickerKeyboardShortcuts.jsx

+            ))}
+          </ul>
+
+          <button


Since this is visually one of the first things in the dialog, this should probably equivalently be one of the first things in the markup

backwardok · 2017-03-02T20:27:52Z

src/defaultPhrases.js

@@ -0,0 +1,176 @@
+const closeDatePicker = 'Close';
+const focusStartDate = 'Focus on start date';


this phrase feels a little off to me - without running this, I have a hard time understanding what it is this is describing. If I were to hear this phrase being said, I wouldn't understand why I would need to focus on the start date. Seems like this should be something more like "Select start date", but I'm not sure if that's exactly what this is accomplishing.

We're gonna run this through a copy person before we upgrade react-dates in Airbnb, so maybe let's leave it til then?

backwardok · 2017-03-02T20:30:56Z

src/defaultPhrases.js

+const keyboardShortcuts = 'Keyboard Shortcuts';
+const showKeyboardShortcutsPanel = 'Show the keyboard shortcuts panel';
+const hideKeyboardShortcutsPanel = 'Hide the keyboard shortcuts panel';
+const toggleKeyboardShortcutsPanel = 'Toggle the keyboard shortcuts panel';


Is the shortcut panel being shown non modal? Seems like you shouldn't be able to access this button when the shortcut panel is shown, in which case it should always be the "show" version.

Seems like you shouldn't be able to access this button when the shortcut panel is shown
I am not sure how to make that happen, but that's certainly not the behavior rn. Could you maybe run the code and lemme know what you think?

backwardok · 2017-03-02T20:33:28Z

src/defaultPhrases.js

+const escape = 'Escape';
+const questionMark = 'Question mark';
+const selectFocusedDate = 'Select the currently focused date';
+const moveFocusByOneDay = 'Decrement/Increment currently focused day by 1 day';


maybe easier wording as "move forward or backward one day"

or "go back or advance one day"

(Decrement and increment feel unusual for something that's not a strict number)

I feel like we can nit the text, but it would probs make sense until someone can look at the copy and give us recs.

backwardok · 2017-03-02T20:35:41Z

src/defaultPhrases.js

+const moveFocusByOneWeek = 'Decrement/Increment currently focused day by 1 week';
+const moveFocusByOneMonth = 'Decrement/Increment currently focused day by 1 month';
+const moveFocustoStartAndEndOfWeek = 'Navigate to the beginning or end of the currently focused week';
+const returnFocusToInput = 'Return focus to the input field';


This should probably be "Close date picker", since returning focus isn't really what you're trying to do when you want to close the date picker

ljharb

All the other review comments look good also.

ljharb · 2017-03-02T20:51:50Z

examples/SingleDatePickerWrapper.jsx

+    const { selected, date } = this.state;
+
+    const props = omit(this.props, [
+      'autoFocus',


also instead of omit, this could use object destructuring and disable no-unused-vars

ljharb · 2017-03-02T20:52:30Z

src/components/CalendarDay.jsx

+          ref={(ref) => { this.buttonRef = ref; }}
+          className="CalendarDay__button"
+          aria-label={ariaLabel}
+          onMouseEnter={e => this.onDayMouseEnter(day, e)}


all event callbacks ideally should use explicit return, since we don't want them to return anything

Whoops! I like, usually do this so this must have just slipped my radar.

ljharb · 2017-03-02T20:52:54Z

src/components/CalendarMonthGrid.jsx

      'CalendarMonthGrid--vertical': orientation === VERTICAL_ORIENTATION,
      'CalendarMonthGrid--vertical-scrollable': orientation === VERTICAL_SCROLLABLE,
      'CalendarMonthGrid--animating': isAnimating,
    });

+    const style = Object.assign({


can we use object spread here?

ljharb · 2017-03-02T21:23:36Z

src/components/DateInput.jsx

+    } = this.props;
+
+    switch (e.key) {
+      case 'Tab':


this would be shorter and imo cleaner as if/else instead of a switch/case

ljharb · 2017-03-02T21:25:29Z

src/components/DayPicker.jsx

    } = this.props;

    let onNextMonthClick;
    if (orientation === VERTICAL_SCROLLABLE) {
      onNextMonthClick = this.multiplyScrollableMonths;
    } else {
-      onNextMonthClick = this.onNextMonthClick;
+      onNextMonthClick = e => this.onNextMonthClick(null, e);


explicit return?

ljharb · 2017-03-02T21:26:25Z

src/utils/getPhrasePropTypes.js

+  return Object.keys(defaultPhrases).reduce((phrases, key) => {
+    const phrasesWithNewKey = { ...phrases };
+    phrasesWithNewKey[key] = PropTypes.node;
+    return phrasesWithNewKey;


return { ...phrases, [key]: PropTypes.node };

majapw · 2017-03-07T22:49:32Z

@airbnb/webinfra @backwardok @ljharb I split out some of the work and broke up the PR into two commits (one for the breaking name change and one for all the a11y work). Would appreciate another set of eyes.

Once again, I still have to write tests! but that is incoming.

backwardok · 2017-03-09T18:09:26Z

src/components/CalendarDay.jsx

+          aria-label={ariaLabel}
+          onMouseEnter={(e) => { this.onDayMouseEnter(day, e); }}
+          onMouseLeave={(e) => { this.onDayMouseLeave(day, e); }}
+          onMouseUp={(e) => { e.currentTarget.blur(); }}


note for the future - we should just have a nice looking focus state such that doing this isn't necessary. Really don't like that we have this pattern :/

Welp we probably should get a designer for this project. X_x

This is breaking functionality in IE. #1606

backwardok · 2017-03-09T18:11:38Z

src/components/DateInput.jsx

-            {screenReaderMessage}
-          </p>
-        }
+        <p id={screenReaderMessageId} className="screen-reader-only">


since screenReaderMessage isn't required, it seems like you should only render this if it exists.

backwardok · 2017-03-09T18:12:32Z

src/components/DateInput.jsx

@@ -136,14 +157,12 @@ export default class DateInput extends React.Component {
          disabled={disabled}
          readOnly={isTouch}
          required={required}
-          aria-describedby={screenReaderMessage && screenReaderMessageId}


if you were running into issues before where this was coming back as '' and still adding the attribute, then you might consider having the default value of screenReaderMessage as null or undefined so that this works

backwardok · 2017-03-09T18:21:07Z

src/components/DateRangePicker.jsx

+    });
+  }
+
+  onDayPickerBlur() {


is there any potential for this to be triggered as a result of triggering the keyboard shortcut modal? or can you not trigger it from the input itself?

backwardok · 2017-03-09T18:21:27Z

src/components/DateRangePicker.jsx

+  showKeyboardShortcutsPanel() {
+    this.setState({
+      isDateRangePickerInputFocused: false,
+      isDayPickerFocused: true,


why does showing the keyboard shortcuts panel focus the day picker?

The panel is part of the DayPicker. This is mainly to indicate the dichotomy between the input being focused and the dropdown being focused.

backwardok · 2017-03-09T18:38:31Z

src/components/DayPicker.jsx

+        this.toggleKeyboardShortcuts();
+        break;
+
+      case 'Escape':


one thing to be careful with here - I would expect that if the keyboard shortcut modal was open on top of the date picker modal, that hitting escape would close the shortcut modal and hitting escape again would close the date picker modal. It seems like hitting escape once here does both?

Okeedoke, I will address that.

backwardok · 2017-03-09T18:44:50Z

src/components/DayPicker.jsx

+    }
+
+    // If there was a month transition, do not update the focused date until the transition has
+    // completed. Otherwise, attempting to focus on a DOM node may interrupt the CSS animation.


where does the focus happen after?

backwardok · 2017-03-09T18:45:13Z

src/components/DayPicker.jsx

+    }
+
+    // If there was a month transition, do not update the focused date until the transition has
+    // completed. Otherwise, attempting to focus on a DOM node may interrupt the CSS animation.


(and maybe add a comment with a see [insert function name here])

backwardok · 2017-03-09T18:47:41Z

src/components/DayPicker.jsx

+    const { currentMonth } = this.state;
+
+    const month = newMonth || currentMonth;
+    return !day.isBefore(month.clone().startOf('month')) &&


not necessary to fix, but it might make this line a lot easier to read and understand if you pull out the month.clone().... pieces into their own consts

good call. 👍

backwardok · 2017-03-09T18:55:57Z

src/components/SingleDatePickerInput.jsx

      screenReaderMessage,
    } = this.props;

+    const screenReaderText = screenReaderMessage || phrases.keyboardNavigationInstructions;


similar comment here as in other file

wyattdanger · 2017-03-09T19:31:45Z

is the DayPickerRangeController supposed to work with keyboard in the storybook?

(update) added as an item on TODO list

wyattdanger · 2017-03-09T19:36:49Z

Looks like the Keyboard Shortcuts view could use some love in vertical orientation

majapw · 2017-03-10T23:30:52Z

src/components/DayPicker.jsx

  }

-  onPrevMonthClick(e) {
+  onKeyDown(e) {


Should stop propagation here to prevent shenanigans

majapw · 2017-03-31T21:48:52Z

src/components/CalendarDay.jsx

+          aria-label={ariaLabel}
+          onMouseEnter={(e) => { this.onDayMouseEnter(day, e); }}
+          onMouseLeave={(e) => { this.onDayMouseLeave(day, e); }}
+          onMouseUp={(e) => { e.currentTarget.blur(); }}


Welp we probably should get a designer for this project. X_x

majapw · 2017-04-04T17:44:38Z

src/components/DateInput.jsx

@@ -81,13 +87,29 @@ export default class DateInput extends React.Component {
  }

  onKeyDown(e) {


So a problem with using throttle... while it doesn't matter for the down arrow or for tabbing, typing ? (which is a shortcut for opening the keyboard shortcuts panel), sometimes works but sometimes just types a question mark into the input. :|

The basic issue is that there's an onChange handler and an onKeyDown handler attached to the input. Without throttling the order is guaranteed... with throttling, the order is more of a question mark. I think that as a result, this is an optimization we need to think a little bit more on.

majapw · 2017-04-04T22:49:50Z

src/components/DateRangePicker.jsx

+  showKeyboardShortcutsPanel() {
+    this.setState({
+      isDateRangePickerInputFocused: false,
+      isDayPickerFocused: true,


The panel is part of the DayPicker. This is mainly to indicate the dichotomy between the input being focused and the dropdown being focused.

majapw · 2017-04-04T23:54:04Z

src/components/DayPicker.jsx

+          focusedDate,
+        });
+      } else {
+        this.setState({ focusedDate: null });


Hmm, good point. I will look into what's happening with that and if they get out of sync or anything.

majapw · 2017-04-05T00:15:33Z

src/components/DayPicker.jsx

+        this.toggleKeyboardShortcuts();
+        break;
+
+      case 'Escape':


Okeedoke, I will address that.

majapw · 2017-04-05T00:56:30Z

src/components/DayPicker.jsx

+    const { currentMonth } = this.state;
+
+    const month = newMonth || currentMonth;
+    return !day.isBefore(month.clone().startOf('month')) &&


good call. 👍

coveralls · 2017-04-05T17:43:33Z

Coverage decreased (-11.4%) to 71.875% when pulling a8e86c8 on maja-a11y-work into 5ba9930 on master.

coveralls · 2017-04-05T23:38:35Z

Coverage increased (+0.6%) to 83.912% when pulling 769f049 on maja-a11y-work into 5ba9930 on master.

coveralls · 2017-04-06T00:14:22Z

Coverage increased (+0.7%) to 84.023% when pulling 1ffcac0 on maja-a11y-work into 5ba9930 on master.

coveralls · 2017-04-06T03:32:17Z

Coverage increased (+0.8%) to 84.041% when pulling b000e3f on maja-a11y-work into 5ba9930 on master.

coveralls · 2017-04-06T04:46:55Z

Coverage increased (+0.8%) to 84.114% when pulling 9f56e07 on maja-a11y-work into 5ba9930 on master.

coveralls · 2017-04-06T04:57:33Z

Coverage increased (+0.8%) to 84.114% when pulling 9f56e07 on maja-a11y-work into 5ba9930 on master.

- Adds screen reader text to the input to describe how to enter the calendar - Adds arrow navigation to the calendar itself - Adds a keyboard shortcuts panel that pops up on top of the calendar - Adds screen reader text to each CalendarDay

coveralls · 2017-04-06T22:54:44Z

Coverage increased (+0.4%) to 83.705% when pulling a5d7bbb on maja-a11y-work into 5ba9930 on master.

coveralls · 2017-04-06T22:54:44Z

Coverage increased (+0.4%) to 83.705% when pulling a5d7bbb on maja-a11y-work into 5ba9930 on master.

majapw · 2017-04-06T23:08:34Z

Hey @airbnb/webinfra, this PR is ready to go! Please take a look and give me your feedback!

moonboots · 2017-04-06T23:16:05Z

src/defaultPhrases.js

+const chooseAvailableStartDate = ({ checkin_date }) => `Choose ${checkin_date} as your check-in date. It's available.`;
+
+// eslint-disable-next-line camelcase
+const chooseAvailableEndDate = ({ checkout_date }) => `Choose ${checkout_date} as your check-out date. It's available.`;


What's the plan for integrating these with the internal translation setup?

So when you look at getPhrase, you'll see that each phrase accepts a function, node, or string and behaves accordingly. My plan is to add code to our wrappers that automatically pulls in our translations appropriately and create a phrase bundle that can easily be spread onto any page.

We might want to do this for the more base-level components (ie DayPickerRangeController) we're using as well.

wyattdanger

👍

coveralls · 2017-04-07T02:56:39Z

Coverage increased (+0.5%) to 83.742% when pulling 780522e on maja-a11y-work into 5ba9930 on master.

majapw mentioned this pull request Feb 10, 2017

Fix lint warnings where possible #322

Merged

majapw force-pushed the maja-a11y-work branch from 2b6cc8a to 80cbe95 Compare February 24, 2017 20:09

majapw commented Feb 24, 2017

View reviewed changes

majapw force-pushed the maja-a11y-work branch from 80cbe95 to 617e4b7 Compare February 25, 2017 00:29

majapw commented Feb 25, 2017

View reviewed changes

majapw force-pushed the maja-a11y-work branch 2 times, most recently from 3cc2495 to d0a4f58 Compare February 28, 2017 00:17

majapw added the semver-major: breaking change A non-backwards-compatible change; anything that breaks code - including adding a peerDep. label Feb 28, 2017

majapw force-pushed the maja-a11y-work branch from d0a4f58 to ee36ce8 Compare February 28, 2017 00:58

majapw force-pushed the maja-a11y-work branch from ee36ce8 to 22d43ea Compare March 1, 2017 22:44

gdborton reviewed Mar 1, 2017

View reviewed changes

raejin reviewed Mar 2, 2017

View reviewed changes

moonboots reviewed Mar 2, 2017

View reviewed changes

backwardok reviewed Mar 2, 2017

View reviewed changes

ljharb reviewed Mar 2, 2017

View reviewed changes

majapw mentioned this pull request Mar 2, 2017

Moves phrases out into one shared defaultPhrases file #351

Merged

majapw force-pushed the maja-a11y-work branch 2 times, most recently from 7c1e502 to fd54581 Compare March 7, 2017 18:51

backwardok reviewed Mar 9, 2017

View reviewed changes

majapw force-pushed the maja-a11y-work branch 3 times, most recently from a3639b8 to 79e5803 Compare April 4, 2017 16:12

majapw commented Apr 5, 2017

View reviewed changes

majapw force-pushed the maja-a11y-work branch 2 times, most recently from f40732e to a8e86c8 Compare April 5, 2017 17:30

majapw force-pushed the maja-a11y-work branch from a8e86c8 to 769f049 Compare April 5, 2017 23:18

majapw force-pushed the maja-a11y-work branch from 769f049 to 1ffcac0 Compare April 6, 2017 00:02

majapw force-pushed the maja-a11y-work branch from 1ffcac0 to b000e3f Compare April 6, 2017 03:20

majapw force-pushed the maja-a11y-work branch 2 times, most recently from 350fb4b to 9f56e07 Compare April 6, 2017 04:36

majapw force-pushed the maja-a11y-work branch from 9f56e07 to 5183125 Compare April 6, 2017 21:28

moonboots reviewed Apr 6, 2017

View reviewed changes

wyattdanger approved these changes Apr 7, 2017

View reviewed changes

majapw force-pushed the maja-a11y-work branch from a5d7bbb to 9fe41fc Compare April 7, 2017 01:24

Clean up accessibility phrases based on new copy

780522e

majapw force-pushed the maja-a11y-work branch from 9fe41fc to 780522e Compare April 7, 2017 02:44

majapw merged commit cc67a5e into master Apr 7, 2017

majapw deleted the maja-a11y-work branch December 4, 2017 21:51



		let availabilityText = '';
		if (BLOCKED_MODIFIER in modifiers) {

+                          ))}
+                        </ul>
+                        <button

		@@ -0,0 +1,176 @@
		const closeDatePicker = 'Close';
		const focusStartDate = 'Focus on start date';

		@@ -81,13 +87,29 @@ export default class DateInput extends React.Component {
		}

		onKeyDown(e) {

Keyboard Accessibility #301

Keyboard Accessibility #301

Conversation

majapw commented Feb 7, 2017 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

coveralls commented Feb 28, 2017

majapw commented Mar 1, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

backwardok left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ljharb left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

majapw commented Mar 7, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

majapw commented Feb 7, 2017 •

edited