diff --git a/README.md b/README.md
index fa9b426af98d6bf3396e8c67116c7d67090574bb..d1e9674564e3f810d47ad545b7f0341717264bf5 100644
--- a/README.md
+++ b/README.md
@@ -1,10 +1,11 @@
# Course Search & Enroll - Front End
#### First time run `npm install -g @angular/cli` then `npm install`
-#### Next run `npm start` to start server
+#### Next run `npm start` to start server
## Required Reading!
+
New to Angular? [Angular tutorial](https://angular.io/tutorial)
[Official Angular Style Guide](https://angular.io/guide/styleguide) Go to source for all things Angular
@@ -14,6 +15,7 @@ New to Angular Material? [Angular Material](https://material.angular.io/compents
[Angular Material Guides](https://material.angular.io/guides) Set of nice howtos
## Before you start
+
Consider a lightweight IDE for developing [Visual Studio Code](https://code.visualstudio.com/)
works great with typescript ecosystem.
@@ -45,10 +47,15 @@ Run `ng lint` to excute typescript linting. `ng lint --fix` will attempt to fix
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
+## Accessibilty Change Log
+
+[Accessibility Change Log](accessibility.md)
+
## Dependancies
+
[Angular](http://angular.io)
-[Angular CLI](https://github.com/angular/angular-cli)
+[Angular CLI](https://github.com/angular/angular-cli)
[Angular Material 2](https://material.angular.io)
@@ -57,16 +64,17 @@ To get more help on the Angular CLI use `ng help` or go check out the [Angular C
[Material Design Icons](https://material.io/icons/) If searching for an icon look here: [Material Icons](https://material.io/icons/) These icons are added by a `<link>` tag in the `index.html` file.
## Grid System
-UW-Style comes with a basic grid system borrowed from Foundation 6. See their documentation here: [Foundation Grid](https://foundation.zurb.com/sites/docs/flex-grid.html). **Note:** that the `.column` and `.row` classes for Foundation have been renamed to `.uw-row` and `.uw-col` and you will need to use the `uw-flex-column` mixin to build your grid widths. You cannot use `small-6, medium-8` etc. There are various examples in the [UW Style](https://git.doit.wisc.edu/uw-madison-digital-strategy/uw-style) repository.
+UW-Style comes with a basic grid system borrowed from Foundation 6. See their documentation here: [Foundation Grid](https://foundation.zurb.com/sites/docs/flex-grid.html). **Note:** that the `.column` and `.row` classes for Foundation have been renamed to `.uw-row` and `.uw-col` and you will need to use the `uw-flex-column` mixin to build your grid widths. You cannot use `small-6, medium-8` etc. There are various examples in the [UW Style](https://git.doit.wisc.edu/uw-madison-digital-strategy/uw-style) repository.
If you are doing a more complicated layout it is recommended that you use Angular's official layout engine [Angular Flex Layout](https://github.com/angular/flex-layout). This layout is not CSS based and integrates deeper with Angular. Follow their documentation and `npm install` and add this to your project. To learn more about the grid system see their docs here: [Angular Flex Layout Wiki](https://github.com/angular/flex-layout/wiki)
### Removing UW-Style sass imports
-If you want to use a different grid system or find yourself wanting to remove a portion of the css, comment out any `@imports` located here: `/assets/uwstyle/assets/scss/uw_style.scss`
+If you want to use a different grid system or find yourself wanting to remove a portion of the css, comment out any `@imports` located here: `/assets/uwstyle/assets/scss/uw_style.scss`
## Basic project structure
+
<pre>
|-- app
| |-- app.component.html
@@ -91,7 +99,7 @@ If you want to use a different grid system or find yourself wanting to remove a
| | |-- home.component.html
| | |-- home.component.scss
| | |-- home.component.spec.ts
-| | `-- home.component.ts
+| | `-- home.component.ts
| `-- shared # App wide shared directory. All modules could have a shared Directory too
| `-- shared.module.ts # Only add Material components here!
|-- assets
@@ -113,4 +121,3 @@ If you want to use a different grid system or find yourself wanting to remove a
../e2e/ # All project end to end tests ex: "ng e2e"
../tsconfig.json # Primary typescript config
</pre>
-
diff --git a/accessibility.md b/accessibility.md
new file mode 100644
index 0000000000000000000000000000000000000000..cb47dde2f3e5368b7bbee6220316e9890cf586bb
--- /dev/null
+++ b/accessibility.md
@@ -0,0 +1,71 @@
+# Accessibility Change Log
+
+## Version 1.0.19
+
+### Fixed
+
+* Review "Skip to main content" button functionality
+ * Add missing id to h1, to fix "Skip to main content" link
+ * Create additional link to "Skip to utility menu"
+ * Change Delete Note from h2 to h3 for semantic markup
+ * Change labels for Edit note and Add note to include term's name
+ * Update the text on note dialog to - This action cannot be undone (!303)
+
+* Remove redundant tooltips and adjust position of remaining ones to match mobile view
+ * Remove tooltips from course keys icons on sidenav
+ * Remove tooltips from menu buttons on sidenav
+ * Adjust positions of remaining tooltips to match how they are displayed on mobile (!277)
+
+* Fix color text for hint and label for invalid subject on search form
+ * Change color (from #0479a8 blue to #ff4e4e red) of the hint and label of invalid Subject field on Search form, as well as change position of Subject hint to be left aligned (!273)
+
+* Drag and drop accessibility improvement
+ * Use the cdkDragStarted property to check for the click and drag event
+ * Set an assistive text to be read by the screen reader (text is invisible on UI)
+ * Not applied to Saved for Later or courses in search yet (!247)
+
+* Implement "Skip to main content" functionality
+ * Add "Skip to main content" button - keyboard and screen reader users will see a button on the top-left corner which offers skipping the header and main navigation entirely and takes users to the main Degree Planner content
+ * Change icon for 'Course is not offered' to strikethrough
+ * Increase the width of Degree Plans dropdown to 300px (!245)
+
+* Give all course-items a role of button, and appropriate label (!242)
+
+* Include unique h1 on DP view visible for screen readers only
+ * Add Degree Planner h1 right after main navigation - consistent location with Course Search app
+ * Add sr-only class and assign to it styles recommended by WebAIM (https://webaim.org/techniques/css/invisiblecontent/) to visually hide content but still be read by a screen reader
+ * Screen readers will still highlight the h1 and it will be slightly visible when tabbing through the content (!241)
+
+* Aria implementation
+ * Change academic year panel title to h2 for headings hierarchy
+ * Change term description title within term container from h2 to h3
+ * Add missing aria-labels
+ * Change the size of hint messages to 14px
+ * Add aria-describedby to saved for later, planned, and enrolled courses containers
+ * Replace #ff8000 orange warning color on inputs with #0479a8 blue (!234)
+
+* Cross browser accessibility fix for outline style. Continue implementing aria and roles
+ * Apply outline style to elements that were missing focus across the browsers
+ * Add missing roles to applicable elements (main, navigation)
+ * Improve/add missing aria-labels (!232)
+
+* Add focus state and style to tabbable elements (!216)
+
+* Alt-text revisions and aria-labels revision on icons, buttons, links
+ * Add role="img" to svgs
+ * Refactor icon’s alt texts to not include the word 'icon'
+ * Add aria-label to buttons and links containing only icons (!212)
+
+* Adjust icons font size and yellow color used on the app to a darker shade to fix low color contrast (!209)
+ * Changed all icon font size to 24px
+ * Changed yellow color used on the map to a darker shade
+
+* Font size adjustments:
+ * Increase academic year title font to 18px (!184)
+
+* Initial accessibility fixes
+ * Change "Add degree plan" input field placeholder from "i.e. Psychology" to "Plan Name"
+ * Add tooltips and alt text to all icons used within the app
+ * Add A11y module to the project
+ * Add cdkFocusInitial where needed to specify which element to focus on first in the region ex: after opening a dialog, the focus lands on the first input field
+ * Include word 'year' in academic years titles ex: Past year: 2017-2018; Current year: 2019 - 2020 etc. Instead of just 2019 - 2020 (!166)
diff --git a/package-lock.json b/package-lock.json
index 3282426ba71ba1a5714a393c99bd65fa6807642c..fd339ada94b14fc37ea87da1c54181372fb3e7e5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
{
"name": "course-search-enroll-fe",
- "version": "1.0.18",
+ "version": "1.0.19",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
diff --git a/package.json b/package.json
index 2c7c4d6fcf875a124a361a297801d980fbe63559..4c17966dca28f113f3289685b0713a30b5907fa7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "course-search-enroll-fe",
- "version": "1.0.18",
+ "version": "1.0.19",
"scripts": {
"ng": "ng",
"start": "ng serve --proxy-config proxy.json --open",
diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts
index 4c7c3d22f8f3c6da1ca0cb4b256e1c8870583360..2efdd1cf4a323ec0feddef1df5948e9f6f258cb2 100644
--- a/src/environments/environment.prod.ts
+++ b/src/environments/environment.prod.ts
@@ -1,6 +1,6 @@
export const environment = {
production: true,
- version: '1.0.18',
+ version: '1.0.19',
apiPlannerUrl: '/api/planner/v1',
apiSearchUrl: '/api/search/v1',
apiEnrollUrl: '/api/enroll/v1',