us-cbp / cbp-theme Goto Github PK

Per discussion with @LaurenFormichella and @HMcFabulous, timeline needs to a little polished to be more inline with the look and feel of the overall theme. Some ideas we are still discussing include...

• Making dots dark gray outlined circles with icons that can display a subtle color when hovered over. Current implementation child items within the timeline are too loud and is competing with the parent items.
• Remove button/label style on header text - style similar to headers (clean and simple)
• Create CSS/JS to expand/collapse children of a parent

Further discussion is needed!

@HMcFabulous - Final approval on look and feel should come from you.

After playing around in the Kitchen Sink, it has come to my attention that the links inside the navbar buttons (in the app-header class) result in an unrecognized expression syntax error when calling the JQuery. I've attached a screenshot example of the issue.

With this in mind, it is not possible to create links in the app-header navbar.

To reproduce in a webpack project:

1. Install cbp-theme
2. Import cbp-theme using import 'cbp-theme'

This is the error I'm getting:

ERROR in ./~/cbp-theme/dist/js/jquery.inputmask.bundle.js
Module not found: Error: Cannot resolve 'file' or 'directory' ./jquery.inputmask in <truncated>\node_modules\cbp-theme\dist\js
 @ ./~/cbp-theme/dist/js/jquery.inputmask.bundle.js 1369:48-99 1476:48-99 1937:48-99 2294:48-99 2342:48-99

ERROR in ./~/cbp-theme/dist/js/cbp-theme.js
Module not found: Error: Cannot resolve 'file' or 'directory' ./jquery.inputmask in <truncated>\node_modules\cbp-theme\dist\js
 @ ./~/cbp-theme/dist/js/cbp-theme.js 1997:48-97

@d-amit I think the resolution to this issue is to include jquery.inputmask.js in the dist directory or re-work the bundling for jquery.inputmask.bundle.js.
#23 We can fix these issues by moving to Webpack and let it handle the dependency order and inclusion.

• We need to demonstrate more examples (practical) of cards
• Fix issues related to fonts, sizes, placement

As a user of the CBP Theme, I would like examples of select boxes that are a11y (accessible) so that my application can be more accessible.

https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules#ax_text_01

https://make.wordpress.org/accessibility/2015/09/07/accessibility-usertest-select2/

• We currently demo select2 and selectize which result in a11y issues because of the lack of labels on the rendered input tags. We will need to either provide fixes to the libraries or create our own.

The Powerpoint file attached has the 508 non-compliance issues for elements of the style guide. Not being able to tab into the actual style guide elements prevents some of the testing from being completed. Please advise when keyboard access from the left menu into the style guide itself is addressed, and I will complete that part of the testing.
There is still significant work to be done.
Style Guide 508 10-03-16.pptx

Descriptive labels, ids needed for Wizard forms.

As a new contributor, I would like a simple way to get started with the project so that I can contribute quickly with minimal friction.

• Research ways to bring contributors on board with Git, Slack, and other methods to start on the project. This could be a simple wiki to a chatbot, like this one:

18F Onboarding Process Blog

Can we investigate the use of Webpack to bundle the final distribution?

Gulp can get quite convoluted.

• Show Table with 10 columns
• Show an example of condensed table
• 4 'post' example that shows the pagination, number of records, search, actions

Issue with Scoped Search - right border missing

See CBP Style Guide
https://us-cbp.github.io/cbp-style-guide/docs/patterns/search.html

Card width and z-index is hard-coded and therefore breaks usage of cards in grids and other responsive schemes.

Update the CBP-theme bootstrap aspect from 3 to 4. If there are any gotchas or changes in the use of current bootstrap classes, please document in this issue or the wiki.

As a developer, I would like to see examples of data visualizations such as high charts so that I can ensure it adheres with the look and feel of the CBP theme.

We need to discuss best practices for creating data visualization in general and how to adhere to the theme.

In Firefox 49.0a2 (2016-07-01), I see the .input-group-btn is off vertically from the mdl-textfield before it:

It looks ok in IE 11 and Chrome Canary (54.0.2787.0)

The blanks where the user can input the page they want to jump to needs mark up. Label for and ID to tell them what the expected input would be.

The padding between selectize dropdown options is too large and not consistent with select2. See screenshots below:

A descriptive alt text for image needed for Card Example.

As a developer, I would like the CBP Theme to be published as a webjar so that in an organization that only uses webjar for ui dependencies I will be able to consume it.

• At the very least we need to provide a gradle task to create the webjar. We can think about whether we want to publish to http://www.webjars.org

.cbp-brand and .dhs-brand don't show when styles are turned off. We should add sr-only content for accessibility.

Edit:

• update header to allow for a generic brand since it is possible other organizations will use the theme.

Currently the sidebar headings have a border-top to mark a separation between filter content sections.

The border is placed at the boundary of padding-top and margin-top, which looks unbalanced at the moment.

We could control it better if we put border-bottom on filter-group-content and take out border-top from filter-group-title in _filters.scss.

H1s generally are too light compared H2s. See screenshot below.

Need a higher contrast, 4.5:1 for Spinner Examples

Focus should move to the toasts when present for screen readers to recognize and read the message.

It would be lovely if someone could contribute a dockerfile so contributors could all have a consistent development environment to work with.

As a developer, I would like to see the root or Github page home page url https://us-cbp.github.io so that we have a single destinations that describes the project and links to resources.

We need to create a simple home page, index.html, that links to the Kitchen Sink and eventually the CBP Style Guide.

Since we work on a variety of machines and environments, we need

.gitattributes: Normalize whitespace and line-endings across OS'es. Example

.editorconfig: Standardize developer experience when using an IDE. Example

File Upload examples need descriptive labels and ids.

The Mode of Transportation checkboxes on the vertical filters need descriptive and matching labels, ids.

Color contrast too low and a colorblind or low vision user would likely only see the middle dot if any.

Updates to the Kitchen Sink Tables need to be maded based on feedback from our accessibility expert.

All of the tables shown need scope=row added, and some of them also need the scope=col identifier as well. There was one other table, Example A, that looked to be a layout table versus an actual data table. The scope=row needs to be on the most unique column of data to provide the best mapping for a screen reader.

All radio buttons and checkboxes need markup to associate them to their instructions. Label for and ID are the most commonly used form for this. Need exactly matching text in both the label for and ID for any given form control. Applies to radio buttons, checkboxes, and toggles (the toggles are currently correctly marked up).

Overall issue for ensuring accesibility (Section 508)

• Determine strategy for testing accesibility (we currently use pa11y, on the kitchen sink)
• Work with our Accessibility expert and create issues as needed
• Using Google's a11y chrome Accessibility Developer Tools plugin

The date picker mask feature does not work in IE11.

Per our a11y expert: A color blind user would not be able to detect the difference in these 2 blues, and would see this as a solid color. Needs higher contrast between the 2 colors and we will need to set the animation rate to avoid seizures.

We may want to remove the example.

There are IE and FF "hacks" adjusting css to make the search example in the kitchen sink page line up properly within the navbar form in the top header. I think I tracked it down to a display: inline-block that should be a just block. That would help clean up the hacks a little.

The Split Button caret sections are separated from the action buttons

Split Button separated:

Oringally, this is how it should look:

Ensure tables are accessible using Chrome Accessibility Tools.

Currently the custom JS in cbp-theme looks for all selectize or select2 components and adds on a change listener to the components to add or remove 'is-dirty' class to apply MDL label animations.

Issue:
If application renders dom on the fly or is using React, the components are not present when the cbp-theme custom js is ran so those components dont have the getDirty method applied to them.

Proposed solution:
If we add logic to the singletons of select2 and selectize ( if they are present), that adds the logic to remove/add 'is-dirty' class on change of value. If anyone has an alternative solutions, please elaborate on this issue. Maybe override onChange to include this logic and extend previous onChange logic.

Current Workaround:
For my case, on the React event componentDidUpdate I run getDirty logic.

Current Implementation

As a contributor, I would like to quickly see all the components so that I can quickly experiment, fix and improve the development loop and showcase components to other parties.

The current kitchen sink, the page with all the components, is currently hosted under app/kitchensink. Ideally, we would host it on Github Pages

As a developer, I need unit tests to cover the javascript functionality to ensure if I add or modify the cbp-theme that it will still work correctly.

For the find and replace dialog box, the checkboxes need matching label for and ID. These can also use title for markup, but since you started with label for and ID, might as well just get those matching.

In the table examples that have a toggle to show/hide columns:

The show and hide columns checkboxes all require label for and id markup so a user knows which column they are showing or hiding.

This may already be fixed but is a carry over issue from our previous project:

• Label alignment with text needs to be fixed in all browsers

As a developer, I would like to incorporate security checks, testing, code coverage, static analysis to the continuous integration process so that we can ensure higher quality of code.

We currently use Travis CI and want to enhance the build process so we need to research tools to:

• automate security vulnerabilities coming from code and dependencies
• create acceptance tests
• automate static code analysis

See: https://github.com/integrations

As a developer, I would like resources that for open source CBP projects, so that we have a shared understanding of best practices and guidelines for creating and maintaining open source projects for CBP.

• Use 18F Open Source Guide as a template

We don't need gzip files for distribution.

https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/optimize-encoding-and-transfer?hl=en

The Default label colors need higher contrast, 4.5:1

Per feedback from our accessibility expert:

• Add "label for" and “id" markup to associate the label to the form field so a screen reader can provide direction. Checkboxes, accordions, Input text etc…

DONE - App Header: The arrow to open the drop down is not keyboard accessible, but it does open with 3 options via mouse. Must have keboard access as well.

DONE - The open and close carets at each section are not keyboard accessible, but the do function with mouse.
DONE - The options under Tags are not keyboard accessible. They can be executed by mouse.

DONE - The arrow to open the drop down is not keyboard accessible, but it does open with 3 options via mouse. Must have keyboard access as well.

• For each of the categories in this section, focus appears to land on the active element, but there is no visual indication of focus. Let users know what section they are on by visually highlighting.

• The sort arrow on the sortable column is not keyboard accessible. Nor is the sort arrow in Examples C, F

• Focus goes to the circled tags, but the focus indicator is not visible on them.

package.json defines dependencies for jquery and jquery.inputmask.

However, the package dist directory also contains both of these. We should get rid of one or the other to avoid confusion.