Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[a11y] Make selected state work in windows high contrast mode #1342

Merged
merged 7 commits into from
Apr 24, 2019

Conversation

sarahill
Copy link
Contributor

@sarahill sarahill commented Apr 23, 2019

WHY are these changes introduced?

Fixes https://github.com/Shopify/polaris-ux/issues/150

The selected date doesn't display in windows high contrast mode.

WHAT is this pull request doing?

Use the Windows high contrast media query to display background color for selected states.

Screen Capture on 2019-04-23 at 16-08-02

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Copy-paste this code in playground/Playground.tsx:
import * as React from 'react';
import {Page, DatePicker} from '../src';

interface State {}

export default class Playground extends React.Component<{}, State> {
  state = {
    month: 1,
    year: 2018,
    selected: {
      start: new Date('Wed Feb 07 2018 00:00:00 GMT-0500 (EST)'),
      end: new Date('Wed Feb 07 2018 00:00:00 GMT-0500 (EST)'),
    },
  };

  render() {
    const {month, year, selected} = this.state;

    return (
      <DatePicker
        month={month}
        year={year}
        onChange={this.handleChange}
        onMonthChange={this.handleMonthChange}
        selected={selected}
        allowRange
      />
    );
  }

  handleChange = (value) => {
    this.setState({selected: value});
  };

  handleMonthChange = (month, year) => {
    this.setState({
      month,
      year,
    });
  };
}

🎩 checklist

@BPScott BPScott temporarily deployed to polaris-react-pr-1342 April 23, 2019 20:06 Inactive
@sarahill sarahill changed the title [WIP] [a11y] Make selected state work in windows high contrast mode [a11y] Make selected state work in windows high contrast mode Apr 23, 2019
@BPScott BPScott temporarily deployed to polaris-react-pr-1342 April 23, 2019 20:12 Inactive
@sarahill sarahill requested review from ry5n and dpersing April 23, 2019 20:12
@BPScott BPScott temporarily deployed to polaris-react-pr-1342 April 23, 2019 20:29 Inactive
Copy link
Contributor

@dpersing dpersing left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks rad!

@BPScott BPScott requested a deployment to polaris-react-pr-1342 April 24, 2019 18:32 Abandoned
@sarahill sarahill merged commit 476510b into master Apr 24, 2019
@sarahill sarahill deleted the date-picker-selected branch April 24, 2019 18:42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants