Release MDC Segmented Button

[abhiomkar]

Tracking bug to implement and release MDC Segmented Button (AKA Toggle Group Button).

• Draft Design Doc
• Get Design Doc reviewed
• Build initial prototype
• Create bare structure of Segmented button component
  • Create folder (packages/mdc-segmented-button)
  • Add bare minimum files including package.json, Sass files (bare minimum)
  • Add README file with bare minimum document structure
• Add base styles and theme mixins
• Add adapter interface & foundation (Add unit tests)
• Implement MDC vanilla component - component.ts (Add unit tests)
• Update README documentation in each above step.
• Fully test (Manual) for accessibility.
  • Perform accessibility audit using chrome dev tool.
  • Manually test using screen readers (Minimum 2 screen readers)
• Set appropriate visibility setting in NPM registry for @material/segmented-button package.
• UX review (Material Design)
• Remove package from dependency test exemptions

[gschrag]

Pull Requests related to this Issue:

PR#6073: Add new package for segmented button
PR#6141: Add initial SASS styles
PR#6165: Add Adapters and Foundations
PR#6198: Add foundation business logic
PR#6222: Add component outlines
PR#6223: Implement components
PR#6277: Add ripple and touch-target support
PR#6279: Add README.md
PR#6380: Fix SASS include statements
PR#6381: Auto selections if singleSelect
PR#6382: Add README.md

[gschrag]

I believe there are still some themeability that needs to be added to the component before it's finished, such as density and being disabled, as well as some functionality like if there should be a default selection in the case of single-select. But could you provide the specific things that need to be completed for the component to be included in the material-component-web npm package?

[abhiomkar]

Hi Gabriel -- Do you have a link to the updated demo of this component?

[abhiomkar]

Sent you the checklist for accessibility self-assessment. You'll have to manually test using at-least 2 screen readers.

[gschrag]

The updated demo is live at: http://mdc-segmented-button.surge.sh/
The demo doesn't demonstrate a usage for the buttons other than toggling them on/off, but does log emitted events to the console.

[abhiomkar]

Looking great! Can you update the demo to include following usages?

• Single select with only icons
• Multi-select with only icons
• Single select containing icons + label in all segments.
• Multi-select containing icons + label in all segments.

(Remove baseline example).

I'll share this demo with design for feedback. Meanwhile please fill out the a11y self-assessment checklist.

Let me know if you've any questions!

[gschrag]

I've updated the demo.

[gschrag]

I've filled out the a11y checklist as much as I could, except for:

1.16 Magnification and screen reading works, but I haven't tested on Firefox or IE.
2.7 I don't know if the singleSelect unselecting a segment should be read out loud with a screen reader (or how to do it)
Secondary Use Cases: I don't know what to put here. The component works with tab, shift+tab, and enter, but not arrow keys
Platforms: I've only tested the component in Chrome on a Pixelbook

[aeromac]

Is there a difference between this at the toggle buttons? The buttons page says 'MDC Web currently does not support toggle button groups' but it looks like it, in fact, does - but by a different name?