Update Header and Footer to use correct templates provided by DOL

ltsheu commented 6 years ago

The 14(c) application is not using the correct HTML/CSS markup for the DOL Header and Footer. Update the DOL Header and Footer to use the correct markup.

Acceptance Criteria

[ ] The HTML / CSS structure should be what is provided in the DOL templates

Accessibility

NOTE: Remove any accessibility criteria that don't apply to this user story. For the full list of accessibility requirements, see issue #198, Fully Accessible Experience.

Keyboard Accessibility

[ ] An interactive element or function can be accessed or activated by keyboard
[ ] keyboard "trap" not found
[ ] if non-standard keyboard commands are needed and they are documented
[ ] TITLE provides information and equivalent information is found through text or visual context
[ ] The visual focus can be determined at all times.
[ ] focus always appears on the element it is programmatically on.
[ ] if focus remains in the modal dialog box until the box is closed.
[ ] if focus moves to revealed content OR a description of the content change is provided.
[ ] the tab order is logical

Web: Forms

Web forms include controls (checkboxes, radio buttons etc.), and editable content (text input, select options etc.).

[ ] all form fields and their instructions and cues have HTML (‘Label for’ and ‘ID’ are used or TITLE is descriptive) or ARIA for association.
[ ] All 'Label for' and 'ID' are valid code pairs.
[ ] All form instructions that are provided by mouse over are available onscreen.
[ ] All ARIA form fields have a NAME property that contains all of the instructions.
[ ] All ARIA form fields have correct Role, State, and Value properties.
[ ] All form controls identify their purpose. (Check if there are multiple form controls with the same visual label).

Web: Links and User Controls

Links and/or user controls must have meaningful names that describe the unique destination, function, and/or purpose of the control for assistive technology.

[ ] All links have a unique and meaningful description.
[ ] All scripted elements have a unique and meaningful description.

Web: Images

Web images include interactive images (links, buttons etc.), static images, charts, diagrams, text rendered as an image, etc.

[ ] All images have an ALT, TITLE, or ARIA attribute.
[ ] All meaningful images with ALT have an equivalent text description.
[ ] All decorative images with ALT have ALT="".
[ ] All images that contain text with ALT have the same text in the ALT attribute.
[ ] CAPTCHA images describe their purpose. (DNA, after the captcha is removed)
[ ] All components that have multiple statuses provide their current status

Web: Image Maps (if no image map, then DNA)

An image map is a single image that has designated regions or "hotspots" that contain links.Server-side image maps may not be used. Client-side image-maps must be used instead

[ ] All image maps are client side

Color and Contrast

Color dependence is using color as the sole means to convey information. There must be contrasting colors/shades at a ratio of 4.5:1 for discerning between background and foreground content.

[ ] if color is used but is not the only method to provide information.
[ ] if the contrast ratio is 4.5:1 or greater when comparing all background and foreground colors. Page titles Programmatically identify Page Titles.
[ ] There is a meaningful page title in plain language.

Time Outs

Messages and/or instructions to the user requesting their response within a given time are typically associated with sites that require a secure login. This includes both server time outs and client side security time outs. If a time out is about to occur, an alert must be posted for at least 20 seconds and the user must have the option to request more time. The alert (often a pop up window) and option to request more time must be keyboard accessible.

[ ] The application provides notification before timing out.
[ ] The application's time out notification is displayed for at least 20 seconds before timing out.
[ ] The application provides user an option to request more time before timing out.

Web: Language

A default language must be programmatically identified for each page and for passages that use a language other than the default.

[ ] if the correct default language for the page is programmatically set.
[ ] if there is not a passage in a language that differs from the default language of the page.

Web: Section Headings

Headings must be programmatically identified and must match the visual outline level.

[ ] All visually apparent headings are programmatically identified with an . ( levels do not need to be correct.)
[ ] Programmatic levels on all visually apparent headings match the visual structure.

Web: Data Tables (If no table, then DNA)

Data tables are those tables where the information in a cell requires a row or column header to adequately describe the cell's contents.

[ ] HTML data tables' row and/or column headers are correctly identified programmatically.
[ ] if there are data tables but none of them are images.
[ ] if all HTML complex data tables' data cells are associated with their headers programmatically.
[ ] if there are complex data tables but none of them are images

Web: Style sheet Dependence

style sheets are a means to provide visual formatting information to complement a web page's content.

[ ] The order of the content did not change OR if the order of the content changed but is still logical.
[ ] All relevant content and information from all meaningful images is available.
[ ] All content does not overlap and stays legible.
[ ] If no confusing elements are revealed on the page.

Web: Frames

Frames are a means of separating out sections of a web page into different navigable regions

[ ] if all frames' Title or Name is descriptive.

Web: Repetitive Content and Links

A method must be provided to skip blocks of repeated content or links on Web pages allowing a user to move directly to page-specific content.

[ ] There is a method to skip repetitive content.
[ ] There is a target for all skip links.
[ ] All skip functions work properly
[ ] If the relative order of the repeated components is the same as other pages.

Web: Required Plug-ins (if no plug-In, then DNA)

[ ] if on a public site, links to download all required plug-ins are provided.
[ ] All plug-ins required to view content are compliant.

QASP requirements

These requirements are taken from the Quality Assurance Surveillance Plan

[ ] at least 90% code coverage
[ ] no linting errors
[ ] deploys successfully
meets security requirements
- [ ] static scan
- [ ] OWASP ZAP
- [ ] false positives documented

mmurthydol commented 6 years ago

@binwang89 Believe this story is done. One final QA.

binwang89 commented 6 years ago

@ltsheu please confirm it is completed. i think we use the DOL template for header/footer.

ltsheu commented 6 years ago

@binwang89 @mmurthydol The 14c header/footer matches the look and functionality of the DOL header/footer, however the HTML/CSS under the hood does not match the DOL template HTML/CSS.

This chore was created as a nice-to-have in case there was time to update the Header and Footer to match the same HTML/CSS as DOL under the hood. No work has been done for this chore (it has been in the backlog). It would take some effort, as there are some challenges with the template provided by DOL in October 2017:

The DOL templates use Server Side Include files and we would have to make sure this works within our Angular application, or decide how to extract what we need from the DOL template and structure a different way.
The DOL templates may introduce change to our page layout and this would need to be mitigated.
The 14c App Header and Footer are set up with Angular4 and I'm not sure if this would need to be restructured/redone to work with the DOL templates.
The DOL template that we were provided in October 2017 (DOL-Agency-Template-with-2ndLevel-new) does not include any of the CSS we need to render the DOL templates. It only includes a Megamenu CSS file. The rest of the CSS is missing (such as for the Header or Footer).
Some of the CSS styling may conflict with our current 14c App CSS styling, so we would need to mitigate those issues. (Such as styles applied to the <body>.)

EStriegel commented 6 years ago

@mmurthydol @binwang89 Are we comfortable closing this issue? See Leslee's comment above about look/functionality vs. HTML/CSS under the hood.

phirefly commented 6 years ago

@mmurthydol will follow up with @joebhaktiarDOL on this one

EStriegel commented 6 years ago

Current header/footer is sufficient. Moving to Closed

18F / dol-whd-14c