Demo site using AWS UI Components

[aaronbnb]

Is there a demo site/playground built using the AWS UI Components?

I'm concerned with accessibility and want to test the components before recommending them to a client. I'm an IAAP-certified accessibility engineer. If I do find accessibility issues, I'll be happy to report them as issues.

I'd prefer not to have to spin up a Node application to test the components. Thanks.

[abdhalees]

HI Aaron,

Thanks for opening this issue. Publishing complete documentation for the design system is something that we definitely want to do, and which we're actively working on at the moment. This will include similar functionality to what you describe.

and please feel free to open another issue if you have any other concerns.

[massi-ang]

In the meanwhile, you might want to browse around the AWS Console (https://console.aws.amazon.com) where you will find most of these components being used.

[massi-ang]

I have also started a playground: https://codesandbox.io/s/awsui-playground-ytsxel

[aaronbnb]

Thank you for your quick action. It currently has containers and tables. The pages for forms and buttons aren't implemented. I look forward to more components.

It's unclear which accessibility features are available out of the box. In your playground, the icon-based next/previous page controls have blank aria-label attributes (so no text representation - a WCAG error), but on the AWS Console site, those pagination controls do have proper aria-label attributes.

A demo site would be great to add to the GitHub Readme, NPM cover page. I'm sure many would check it out.

[abdhalees]

@aaronbnb For the pagination aria-labels you can use ariaLabels prop in the Pagination component to show the text representation of these buttons, same as for Table

[massi-ang]

I am a noob in accessibility :-) but I have now read up on aria-labels and will add them to the examples as i build them. On the other end, I ma trying to simply build a base library to showcase the components, and you can edit them to test any additional configuration.

[abdhalees]

Thanks @massi-ang for your efforts!

[aaronbnb]

Hey @massi-ang I second what others said. Thanks for spinning this up so fast; great potential here. No worries about being a noob; I really appreciate you jumping into action.

An aria-label attribute is easily applied to a component to provide an accessible name (i.e. what assistive technologies such as screen readers announce as the control's name). As the aria-label attribute is context-dependent, devs ultimately have the responsibility to set that. It makes sense to include the demos - when appropriate.

Components such as Tabs and Expandable section should have attributes such as aria-expanded and aria-selected which are toggled to describe the component's current state to assistive technologies. They are not context-dependent. If AWS offers these sorts of attributes out-of-the-box, please include in the demo (as Bootstrap does). Bootstrap handles the scripting to toggle them. If in AWS UI, it requires some special configuration, then leave them out. It's hard to thread the needle, change a codebase to add them so it's worth understanding if AWS UI doesn't come with them.

[abdhalees]

@aaronbnb I can confirm that aria-expanded in Tabs and aria-selected in Expandable section are supported in AWS UI out of the box