Merge Chapter 2 code #2
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* Added HTML to index.html * Added classes prefixed with 'navbar' to style.css
using semantic HTML and aria attributes
* index.html: Add modebar HTML to <body> * style.css: Add classes prefixed with 'modebar'
* Add aria attributes to communicate structure and labels
* index.html: Include side menu HTML at bottom of <body> section * style.css: Add classes prefixed with 'sidemenu-' to style menu
* index.html: HTML for button placed at bottom of <body> section * style.css: float-btn and float-btn:hover classes defined
* index.html: Add HTML for "Feed" mode placeholder page at end of <body> * style.css: Add CSS classes prefixed with 'app-page'
* Skip link added per convention * Reimplemented side menu as unordered list per convention * Placed bottom mode bar into tab sequence * Redefined mode content pages as tab panels * Wrote javascript to support correct keyboard menu behavior
* When user clicks on a bottom mode bar button, the mode switches - the button corresponding to new mode is highlighted * The menu items, app page, and app title change to correspond to mode switch - The global 'mode' variable is updated.
Used JS to make it link to content page of current mode
* Changed tab order so that action button comes before content * This seems more logical.
* It now calls toggleSideMenu asking for first menu item to be focused * When NVDA screen reader is on, it intercepts keydown events on buttons * This prevented the first menu item from being focused, since that behavior was bult into keydown
* w3 example has no <nav> container for menu <ol> Changed menu-closed to display:none * This appears to be what w3 example wants * Indicates that menu is invisible to screen reader * However, NVDA still seems to read menu when closed (?)
* Did not make all suggested changes pending discussion.
found by validator.w3.org
* Wrapped toggleMenu() in setTimeout so that screen readers register the menu as closed when "esc" is used to exit menu
* Focus outline now goes around entire menu item (Could not figure out how to use <button> instead of <a>) * Added "Post to Feed" button to demonstrate UI * Fixed skip link
so that it uses new naming scheme for app pages (e.g., "feedModeMain")
* App title changes when mode subpages become active * Mode subpages are no longer tab panels * Added "App Modes" aria-label to tabpanel * Hid skip link when mode subpage is active
Contributor
Author
|
@warior4356 This PR is obsolete. I am actually going to delete the |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Overview
The Chapter 2 code builds a skeleton single-page web app using HTML and CSS. This pull request merges the code from Chapter 2 into the main branch. Closes #1.
Details
The skeleton app includes the following user interface components:
A theme of Chapter 2 is designing web apps for accessibility through the use of semantic HTML and ARIA attributes. These have been used in the HTML code to enhance accessibility.
Here is a screenshot of the final state of the app at the end of Chapter 2:
Testing
I have tested the app via visual inspection. Additional testing using a screen reader emulator should be performed to assess the accessibility of the app.