Browse Source

Fix Readme, make style changes, test accesiblity of inputs

Fix readme to show how to install and deploy.

Made style changes to ensure good contrast and tested with google
chromes lighthouse accessiblity checker.

tested the accessibiltiy of inputs to ensure they meet requirements.
master
fraz 1 year ago
parent
commit
f783d1c20d
3 changed files with 17 additions and 2 deletions
  1. +14
    -0
      README.md
  2. +1
    -1
      src/App.css
  3. +2
    -1
      src/Components/Inputs.js

+ 14
- 0
README.md View File

@@ -3,3 +3,17 @@
This part of coursework for CA357

We used ReactJS to design and develop a web accessible timetable viewer that currently displays the CASE 2 timetable for any input but could be easily modified to account for any course.

## Requirements

- NodeJS 6.0 >=

## Installation

- Run `npm install`
- Run `npm start` to start a local dev server

## Deployment

- run `npm run build` to create a build version.
- Transfer Build folder to production server.

+ 1
- 1
src/App.css View File

@@ -79,7 +79,7 @@ caption {
width: 100%;
text-align: center;
margin: 10% 0;
font-size: 48px;
font-size: 36px;
}

.results {


+ 2
- 1
src/Components/Inputs.js View File

@@ -128,10 +128,11 @@ class Inputs extends React.Component{
else
return(
<div className="autoComplete">
<h1>Timetable Search</h1>
<div id="searchFields" className="autoInner">
<div>{this.state.error}</div>
<label htmlFor="moduleCode">Course Code:</label>
<input value={this.state.moduleCode} onChange={this.changeHandler} onKeyDown={this.keyPressHandler} type="text" placeholder="e.g. CASE3" autoComplete="off" role="combobox" aria-autocomplete="both" aria-activedescendant="suggestion-1" aria-owns="results" id="search" name="moduleCode"></input>
<input value={this.state.moduleCode} onChange={this.changeHandler} onKeyDown={this.keyPressHandler} type="text" placeholder="e.g. CASE3" autoComplete="off" role="combobox" aria-autocomplete="both" aria-activedescendant="suggestion-1" aria-owns="results" id="moduleCode" name="moduleCode"></input>
</div>
<div className="results" id="search-autocomplete">
<div id="results" role="listbox">


Loading…
Cancel
Save