CMS Design System- Disco & Audit Current State

[MDomngz]

Description

As the lead designer, I need to gain a better understanding of the current state of the CMS Design System so that I may efficiently support all mission-critical, CMS UX requirements. In addition, as lead designer, I need to gain a better understanding so that I can better support the CMS product leadership with VFS teams within the Collaboration Cycle.

Steps for Implementation

• [ ] Audit CMS DS
• [ ] Review VA DS, Drupal DS, and USW DS for reference
• [ ] Request an accessibility audit of current components (@srancour)
• [ ] Produce a report detailing findings, next steps, and recommendations

Acceptance Criteria

• [ ] Requires accessibility review

Team

Please check the team(s) that will do this work.

• [x] CMS Team
• [ ] Public Websites
• [ ] Facilities
• [ ] Accelerated Publishing

[MDomngz]

• The CMS editor UX/UI is mostly supplied by the Drupal Design System.
• Drupal works to provide a system that is consistently iterated in terms of accessibility, form, and functionality.
• Much of the Drupal CMS system is form-fields and content creation with the Knowledge Base being the only exception. The KB is set up similarly to a wiki with a search option. The template structure of the KB consists of a Landing page and an Article page. This ticket is speaking to the landing page template.
• Mural link used to consolidate and align CMS Design System work amongst the team

[MDomngz]

The previous team provided the following spreadsheet that was used as a to-do type of checklist

[MDomngz]

Current Styleguide for CMS https://prod.cms.va.gov/admin/appearance/styleguide/vagovclaro#form-actions

Breakdown of components in Prod vs Drupal10 release with notes https://docs.google.com/spreadsheets/d/1v5vc4PS1WxzctjK-qrulEL3BrVXhcTmV7VcRzin_oj4/edit#gid=0

[MDomngz]

synthesized notes from the discovery session

• sample component - Search Input
• pushed the component through the different systems to determine the output for CMS

Starting with the Claro (Drupal) component >>> 
working forward into USWDS/VADS Review in-place code for Search Input
Update VA CMS component as need Review for accessibility Output
CMS Design System component that aligns with USWDS and VADS

figma file link

Accessibility Considerations

VADS Guidance When to use the search component Use site search. There will always be users who would benefit from being able to search your site. When to consider something else Very small sites. On single-page or very small sites, you may be able to get away without a search bar. Usability guidance Make the input at least 27 characters wide. Allow the search component to be as wide as possible, but a minimum of 27 characters wide. This allows users to enter multiple search terms and still be able to see all of them. The more users can see their search terms, the easier it is to review, verify, and submit their search query. Romance languages are about 20% longer than English, so account for text swell on multilingual websites. The magnifying glass icon is effective. The magnifying glass has been shown to be almost universally recognized by users as an indicator of search, and doesn’t need to be visually paired with the word “Search” as long as it remains for screen readers. Search terms should persist into search results. When displaying the search results, preload the search bar content with the original search terms. Use a full search box on the home page. On a site’s home page the search function should appear as a search box instead of a link so users can locate it easily. Don’t offer advanced search as the default. The majority of people will do a simple search with one or two search terms. If advanced search is offered, it increases the likelihood of mistakes. Use a label even if it’s visually hidden. The form field should include a label for screen reader users. The search button should be a submit button. This reduces the number of keystrokes required to use the form. Accessibility guidance Customize form controls accessibly. If you customize this component, ensure that it continues to meet the accessibility requirements that apply to all form controls. Include the word “Search” in the button. Always include the word “search” inside the  element for screen readers. You can visually hide this text using the CSS class usa-sr-only or Sass mixin @include sr-only.