Flarnie Marchan fb2f44e86f [website] a11y fixes (#10927)
* [Gatsby docs a11y] Add `aria-label` to search input

**what is the change?:**
See title.

**why make this change?:**
There was no label on this input, and screen readers might not have been
able to identify it's purpose.
[The `placeholder` doesn't count as a label.](http://a11yproject.com/posts/placeholder-input-elements/)

**test plan:**
Manually inspected the HTML in the devtools, and ran the aXe a11y audit
tool, and the warning generated by aXe was gone.

**issue:**
Checklist item on list of docs a11y issues -
https://github.com/bvaughn/react/wiki/Gatsby-A11y-Fixes

* [Gatsby Docs a11y] Increase contrast of 'installation' page tabs

**what is the change?:**
Change the dark blue used for the text/background of the tabs on the
'installation' page to a slightly darker blue, which we were already
using for the 'focus' style of the tabs. It looked a bit weird before,
imo, when the 'focus' was darker.

Now the 'focus' style just lightens the border to the new signature
blue.

**why make this change?:**

To add enough contrast that folks who see colors differently can still
decipher the writing on the tabs on this page.

We plan to refactor this page and remove the tabs soon, so not too
worried about making this fix perfect.

**test plan:**
Manual testing - loaded the page and it looks ok, and ran aXe a11y
audit, no more warnings about contrast. :)

(Flarnie will insert a screenshot)

**issue:**
checklist item on https://github.com/bvaughn/react/wiki/Gatsby-A11y-Fixes
2017-09-28 13:57:34 -07:00
2017-09-28 10:18:04 -07:00
2017-09-28 12:08:40 -07:00
2017-09-28 10:18:04 -07:00
2017-09-28 13:57:34 -07:00
2017-09-28 10:18:04 -07:00
2017-09-28 10:18:04 -07:00
2016-07-19 15:08:58 -07:00
2013-05-29 12:54:02 -07:00
2016-07-19 15:08:58 -07:00
2016-07-19 12:18:49 -07:00
2017-09-28 12:08:40 -07:00
2016-07-19 15:08:58 -07:00
2017-03-20 16:15:01 +00:00
2017-05-01 13:39:10 +01:00

React Documentation & Website

Read the React Documentation

This folder is not the right place to read the documentation.

Instead, head over to the React website to read it.

This folder only contains the source code for the website.

Installation

If you are working on the site, you will want to install and run a local copy of it.

We use Jekyll to build the site using (mostly) Markdown, and we host it by pushing HTML to GitHub Pages.

Dependencies

In order to use Jekyll, you will need to have Ruby installed. macOS comes pre-installed with Ruby, but you may need to update RubyGems (via gem update --system). Otherwise, RVM and rbenv are popular ways to install Ruby.

The version of the Pygment syntax highlighter used by Jekyll requires Python 2.7.x (not 3.x). macOS comes pre-installed with Python 2.7, but you may need to install it on other OSs.

Once you have RubyGems and installed Bundler (via gem install bundler), use it to install the dependencies:

$ cd react/docs
$ bundle install # Might need sudo.
$ npm install

Instructions

The site requires React, so first make sure you've built the project (via grunt).

Use Jekyll to serve the website locally (by default, at http://localhost:4000):

$ cd react/docs
$ bundle exec rake
$ bundle exec rake fetch_remotes
$ bundle exec jekyll serve -w
$ open http://localhost:4000/react/index.html

We use SASS (with Bourbon) for our CSS, and we use JSX to transform some of our JS. If you only want to modify the HTML or Markdown, you do not have to do anything because we package pre-compiled copies of the CSS and JS. If you want to modify the CSS or JS, use Rake to compile them:

$ cd react/docs
$ bundle exec rake watch # Automatically compiles as needed.
# bundle exec rake         Manually compile CSS and JS.
# bundle exec rake js      Manually compile JS, only.

Afterthoughts

Updating facebook.github.io/react

The easiest way to do this is to have a separate clone of this repository, checked out to the gh-pages branch. We have a build step that expects this to be in a directory named react-gh-pages at the same depth as react. Then it's just a matter of running grunt docs, which will compile the site and copy it out to this repository. From there, you can check it in.

Note: This should only be done for new releases. You should create a tag corresponding to the release tag in the main repository.

We also have a rake task that does the same thing (without creating commits). It expects the directory structure mentioned above.

$ bundle exec rake release

Removing the Jekyll / Ruby Dependency

In an ideal world, we would not be adding a Ruby dependency on part of our project. We would like to move towards a point where we are using React to render the website.

Description
The React documentation website
Readme 259 MiB
Languages
TypeScript 59.1%
JavaScript 34.6%
CSS 6.1%
HTML 0.2%