Visual and accesibility for Sender Id management section

[lgalloherran]

I'm designing the Alphanumeric Sender ID management section and I want to validate the visuals and accesibility issues of the pages for this section. The main items I want to receive feedback on are:

1. Full size modal: Is size correct? Can I use a modal without footer and action buttons? Can it be scrollable?
2. Alpha Sender detail page: Managing a disclosure, is the size correct? Can I manage a status circle on a disclosure? Are there any other options?
3. Status element: Are these colors correct? Is the figure (circle) for the status correct?

[katieporter]

Hey @lgalloherran - thanks for sharing this work, we'll be sure to take a look before your office hours time slots next week so we've got good context going into that meeting. We may drop some comments in your designs while we are reviewing, too.

In the meantime, here are some thoughts:

1. Wide modal: The width is almost correct. The wide modal uses the size-80 token for its width, which is equal to 816px. You can always reference the Anatomy section of any component to get more detail on styling. If you're working in Sketch, there's a Wide Modal symbol that you can use that will give you the right width. We don't have the component built in Figma quite yet, so you'll need to compose it yourself for now if you're working in Figma. In terms of height, the modal will fill 90% of the height of the viewport, so you can just approximate that in your design. It's fine to have a modal without a footer/action buttons, and yes, the modal can scroll.
2. Alpha sender disclosure: The disclosure can be any width that you'd like. It will fill 100% of its container, so if you don't want it to fill the full width of the page, you can use Grid or wrap the Disclosures in a Box with a set width to control the width. Just be sure to work with your engineers to ensure that the width scales well at different screen sizes. You should be able to include a status circle in the Disclosure like you have in your design, though you'll need to pair it with text so you aren't relying only on color to communicate the status (so that users with color blindness also know the status).
3. Status element: I think these status circles work fine since they are also paired with text. Are you using tokens for the colors? If not, I'd recommend color-background-error, color-background-warning (or something more neutral if the in-progress state is a neutral state - in that case, color-background-darker might be a better fit), and color-background-success.