Need to define requirements and strategy for javascript

[occupant]

Is your feature request related to a problem? Please describe.
The project currently has no handling for javascript. As Bootstrap is not being used and jQuery is something we want to avoid, we need to identify and implement a suitable replacement.

Describe the solution you'd like
I think there are several parts to this initial step:

1. • identify a set of MVP features / functions
2. • assess several frameworks based on our ideal criteria
3. • identify the tools we need in the project to handle linting, packaging, anything else needed

1. Current features vs those of several frameworks

Bootstrap 2 (current)	Needed (TBC)	Material	Gov.UK	USWDS	AGDS	Bootstrap 4
affix	N (sticky)	N	N	N	N	N (deprecated I think)
alert	Y	Y (Dialog, snackbar)	Y (warning)	Y	N	Y
animation	?	Y	N	N	Y	N (deprecated I think)
button	?	Y	?	N	N	Y
carousel	Y	N	N	N	N	Y
collapse	Y	Y	Y	Y	Y	Y
dropdown	Y	Y	N	Y	N	Y
modal	Y	Y (Dialog)	N	N	N	Y
popover	Y	Y	N	N	N	Y
scrollspy	?	N	N	N	N	Y
tabs	Y	Y	Y	N	N	Y
tooltip	?	N	N	N	N	Y
Other
Snackbar	?	Y	N			Y (toast)
Drawers		Y	N			N
Progress bar	?	Y	N			Y
…

2. Framework quick assessment

Framework	Complete (as per above)	Modular	Well-documented	Easy to use	License	Well maintained	Dependencies	Light	WCAG 2.1
Material	Almost	Y	Y	node	MIT	Y		N	N
Gov.UK	N	Y	Y	node	MIT	Y		Y	Y
USWDS	N	Y	Y	node	Mixed MIT, SIL, Public Domain	Y		Y	Y
AGDS	N	Y	Y	?	MIT	Y		Y	Y
Bootstrap 4	Y	Y	Y	Y	MIT	Y	jQuery, popper.js	N	?

Material.io https://github.com/material-components/material-components-web
Gov.UK https://github.com/alphagov/govuk-frontend
USWDS https://github.com/uswds/uswds
ACDS https://github.com/govau/design-system-components/
Bootstrap 4 https://github.com/twbs/bootstrap

3. Tooling needed

This could be altered depending on the approach we take, but my assumption at this point is we will need Babel and one of jslint / eslint / etc.

Describe alternatives you've considered
It is possible to write our own js from scratch, but this seems like a worst case scenario in terms of initial and ongoing effort.

[richardtape]

Some notes.

Alert

There's a great example on the main WAI-ARIA site: https://www.w3.org/TR/wai-aria-practices/examples/alert/alert.html

With a practical example: https://heydonworks.com/practical_aria_examples/#offline-alert

Accordions

https://github.com/scottaohara/a11y_accordions

Tabs

https://github.com/scottaohara/a11y_tab_widget

Off-Canvas Menu

Best Vanilla JS solution I've found: https://github.com/toomuchdesign/offside

Minimal alternative: https://codepen.io/marcysutton/pen/JoQqVw

Possibility to do it with just CSS: https://css-tricks.com/off-canvas-menu-with-css-target/

Breadcrumbs

https://scottaohara.github.io/a11y_breadcrumbs/

Tooltips

(No JS) https://codepen.io/mpiotrowicz/pen/PwQYMd

Icon Buttons

https://www.sarasoueidan.com/blog/accessible-icon-buttons/ Literally the only post you'll need

Dropdown Buttons

https://a11y-guidelines.orange.com/web_EN/exemples/simple-menu/simple-menu.html

[occupant]

That's great, thanks Richard. I (sadly) found a carousel that might work:
https://www.w3.org/TR/2019/NOTE-wai-aria-practices-1.1-20190207/examples/carousel/carousel-1/carousel-1.html

[occupant]

Group notes:

Recommendation

The group revisited this and recommends moving forward with a series of small, optional javascript utility scripts over adopting a framework's javascript wholesale. These scripts could either be bespoke javascript or individual 'plugins' that can be updated, included, dropped as required. Keeping them decoupled allows for greater ease of use, performance and flexibility.

Scripts required

Using the current Bootstrap javascript utilities as a guide, we went through each and made note of our need to carry these forward or leave them behind / for another time as determined by need.

Component / Utility	Needed	Comments
affix	N	Recommend using position: sticky
alert	Y	Utility to dismiss feedback content, ideally can also handle snackbar / toast meaning it needs to have both timing and placement options (ie. top, right, bottom, left)
animation	N	Recommend CSS
button	Y	Utility to define state regardless of focus
carousel	N	*
collapse	Y	Utility to expand / collapse content vertically (ie. accordion)
dropdown	Y	Utility to show additional content relative to a trigger
modal	N	Not v.1
tooltip	N	Not v.1
popover	N	Not v.1
scrollspy	N	Infrequently implemented, Should use intersection observer
tabs	Y	Implemention should convert to accordions at small viewports
tooltip	N	Not v.1
snackbar / toast	Y	Only if can be accommodated by extending alert
drawers	Y	Utility to show offscreen regions with push / cover (usually top, right, bottom or left)
Progress bar	N	Infrequently implemented
…

• The rationale here needs some explanation. While it is a given that this will be required by some sites, we are intentionally excluding it from the supported options, as it does not have our support for Usability and Accessibilty reasons. We agreed we want to have any distributed components be ones we could recommend using. When a carousel is required by a site owner, there are many javascript libraries that can be used to suit the specific needs of this request. It will be the responsibility of the developer and site owner to make an informed decision. We make this recommendation knowing that we will undoubtably have to build and support these in our own projects.