Adobe Developers Live | Get Hooked: Building a More Accessible UI with React Aria and React Hooks

today we're going to talk about a little bit about react spectrum which is an implementation of adobe's design system called spectrum we're also going to cover uh some react aria which is a set of hooks that you can use to build accessible ui components so these hooks actually power react spectrum so we're going to cover how you can take advantage of both and a little bit of intro i'm danielle i'm the engineering manager and today we think we have devin and we are on the rack spectrum team so i'm going to go through some of the components and the benefits from their spectrum library and devon is going to take you through some of the react r demos and show you how they work so first of all we're going to start with an intro as i said react spectrum is implementation of adobe's design system so spectrum is a set of guidelines uh patterns and designs that all of the applications in adobe should be based on and the goals of spectrum are to unify our products and to give users cohesive design and consistent and inclusive user experiences so the design systems uh they're more than just styles and as the name would suggest you know they're full they're full and complete systems so we're going to talk a little bit about the pieces that make up the design system uh at its lowest level there are the design tokens as you can see here and these are needed to construct and maintain the design system so they represent things like spacing and colors styles um animations as data and they are centralized to allow unity across the design so looking at the example here you can see that there is a base token or a global token which represents a single value such as the color in this case it's a blue now these can be used directly but they're not really tied to anything so adding some meaning behind them will help with the usage and therefore we have the alias and the component specific um tokens that you see here so they all inherit from a global token but the alias gives context an intended purpose and this in this case would be the cta background color so that is our call to action type components and then the main block color here which is the blue and then underneath that you can see that there's a component specific token and these tokens tend to be an exhaustive representation of every value that's used by a component so it should say everything you need to know about where a token is meant to be used so you can see here it's attached to the button and then of course the cta background color and underneath that you can see our react spectrum button which implements the third token for its background color of course we have the components so complete with defined behavior and interactions for the most part they tend to be lower level components that can be used to build a ui so we've got form elements such as radio check boxes text fields you have modals pickers menus so one uses these to put together a full experience and these are some of the components that we have included in react spectrum the higher level definition of design comes in the form of patterns so you can use the designs um you want the design system to allow for creative flexibility while keeping the core design consistent so to achieve this spectrum provide some guides on common patterns that are used in our products uh you can see here we have cards tables dialogues and layouts these are constantly being added to as the system grows organically so now let me cover the basics let's talk a little bit about react spectrum and we'll have a look at the library so react spectrum aims to achieve a number of goals it's accessible so more often than not accessibility uh it's not as comprehensive as it should be in many products the difference between just passing an accessibility winter and really delivering a quality experience for those who may not use the products maybe the same way as i would there's a really big difference so we've included accessibility in the api design from scratch and not as an afterthought it's part of the component which means we've made it's made it integrated into the way the component works we follow the y aria patterns and with help with for from our accessibility team we're able to have full keyboard support and touch support in our components we also test across multiple screen renders browsers and devices adobe products are used in all over the world and because of that our library needs to be internationalized so we support over 30 languages we also include support for right to left languages in which the components mirror for those languages that are read from right to left and on top of that we support internationalized date and number formatting for different locales responsive design is an important feature of any application and with so many devices available we need to make sure that our components adapt no matter the platform so we make sure that we build for different screen sizes we also include support for dark mode automatically so it's pretty common nowadays to have applications offer a dark mode and we're able to support that based on both the user's os setting as well as at the application level we're able to support different scales depending on the interaction mode of the user so maybe mouse or touch we're able to figure out using media queries for the most part what type of interaction mode the user is using and adjust the set scale accordingly so for touch devices they need to have a bigger hit area because you're using your finger so we adjust for that and then for for scale when you're using a mouse or a stylus they have a more precise hit area so the default for that would be smaller and as mentioned before we cover interactions no matter how you use our components via touch or screen reader the support is there and of course we test this across multiple devices platforms and browsers customizable spectrum is pretty specific with its styles but we want to give the ability for people to be able to change that based on their own designs so we allow custom themes on top of react spectrum but if you need something with even more flexibility you can use our lower level hooks in the react aria library to control how you render and devin is going to spend some more time on this a little later now let's have a look at the architecture and how we make all of this possible so the it's broken up into three parts the component the behavior and the state now not all components have all three parts they use what makes sense and we're able to make all of this possible by using react hooks so looking at uh the state hook firstly so this is react stately now this is the state management of the component and it's meant to be cross-platform makes no assumptions about the dom or the view system there's no theming or anything spectrum specific in here it uses react hooks and it returns an interface reading and updating component state uh and as i've said before no components have a state hook so maybe the more simpler simpler components such as a status or a badge you might not have any state at all so the next layer is react aria which is the behavior hook so this is platform specific it depends on the platform api so dom here and but again there's no theme specific logic in here but this is really the guts of the component it implements all of the event handling internationalization accessibility and interactions it's all in here and it uses the state hook to implement its behavior and then it returns platform-specific props that you can spend on spread on to your dom elements within your components and then we have react spectrum so react spectrum uh is the component level this is the view uh so it's very theme and platform specific it renders dom nodes it implements the design from spectrum and takes the styles and it uses the props that return from the behavior hook and the state that's returned from the statehook to provide the functionality for the component so the question may be why do we split it all up why not offer just a single ui library and there are a few reasons for this uh first of all we're pretty big into sharing code so adobe has a pretty wide ecosystem of products that spans multiple technologies and with the goal of spectrum to unify all of these products we wanted to break down the code to give as much chance as possible to share across the teams the react spectrum has the opinion of react and web but as i mentioned before react aria and rex stately have the opportunity to be able to share it across different platforms and different frameworks and this is something that we're currently exploring now there's always going to be custom ui um cases and special cases that don't quite fit the spectrum definitions and in these cases we wanted to provide helpful hooks and tools that you can take advantage of in order to build custom ui and still have a high level of accessibility along with cohesive design and interactions so for example if you had a custom grid component you know it would still have selection it'd probably still support touch uh you would need to follow the aria grid pattern that includes keyboard navigation and focus management so we approve we provide all of those for you to help simplify building custom ui as i mentioned react spectrum is customizable so the separation of styles allows us to be able to apply custom themes when needed and we really wanted to take the work that we had done to build these full-featured and accessible components and expose them without having to without tying it to the adobe's uh design specifically so you know there's more to a design system than just the styling you have the interactions and behaviors of focus and accessibility they all make up the design and just because you change the style doesn't really mean that the thought that went into those areas is lost so we wanted to offer that to the community to the community to be able to build with and then if you want to use the spectrum styles then it's all included in react spectrum uh but if you wanted to take the work that we did on these components to make their behaviors consistent across you know platforms then we're able to provide that for you so we're going to go over a couple of cool features in the components we have currently in rare spectrum uh first of all i mentioned the dark dark mode support so we supply default themes for react spectrum and they handle the default dark and the light color themes now you can specify what theme you would like your app to be in so maybe you only want it in a light theme however if you wanted to support your application changing color or changing the themes based on the mode of the operating system and the user preferences then this is automatically supported so if your computer is set to dark mode which you can see here our components will appear in a dark color theme if your mobile device is set in dark mode the same thing will happen if your customer changes their preference in the middle of a session uh then with the components are able to pick up that change and you can see that happening here so we've worked on making sure our components uh behave the same or behave in an expected way across different devices and platforms so for example we have popovers they're not really a great experience on mobile so when you add a pop over to your application and the viewers use this on or the users use this on a touch device we're able to detect that and render your pop over in a modal instead so another example here is menus typically menus appear in a tray on mobile and touch devices and mostly you know because of the screen size and the hit area for touch so our menu component is actually it actually swaps between a menu and a tray depending on the available screen size so you can see here that this is the same component when viewed on a desktop on the left hand side and on a phone on the right hand side on right headstand so same component same code different view now tool tips uh tooltips are pretty simple like visually a pretty simple component spectrum guidelines or tooltips follow a very similar pattern to the native tooltips that you see in a browser and but there are a few intricacies that native tool tips implement which we model after and react spectrum so for example you're going to show one tooltip at a time there's a warm-up and a cool-down timer there's a delay for the first tool tip that gets rendered and then no delay for sequential tooltips and then uh for focus it instantly brings up a tooltip for accessibility and brand crumbs this is our brenthamp's component so this is an example of component that follows a pretty specific spectrum behavior the breadcrumbs have an aria pattern but spectrum has published some additional guidelines and how they should look so the breadcrumbs have an overflow behavior here in which the breadcrumbs collapse into the menu from which you can select so here you can see the breadcrumb shifting in and out of the menu which is by triggered by a browser resize and this is all handled in react spectrum so we're moving on to dialogues so this is an example of a concept we adopted to handle more complex uh ui layouts in in our components like dialogue so for example as menus we saw that you could have an icon or a second line of text so we need to make sure that we weren't taking up space for this optional content when it wasn't being used while also managing the layout between the spacing between these elements when they were used so the diagram here shows a standard layout for a dialogue and we have multiple layouts in which we support and there we're able to do this by using a concept called slots and take advantage of a css grid so one of the challenges we had was being allowed i mean allowing content flexibility while also making sure that we were able to control the style of the contents uh how spectrum had defined it so to take advantage of this uh we well the advantage of this method is we're able to shift elements around when needed without using a lot of props or having the user implement different codes different codes so you can see here this is a full screen dialog but we actually shift where the buttons are positioned uh based on this the limited space when you get smaller so using slots we're able to specify where the content should be positioned in different scenarios without any effort on the user's part now we can have a look at one of the components that we built so far that has really been more work than we ever thought it was going to be and this is the picker so the picker is spectrum's version of a select component and it supports more advanced or advanced options like icons and the second level of text and um and very custom design so we couldn't use a native select so we needed to support full keyboard accessibility um you need to be able to tab to the drop down uh open it with space and enter use the arrow keys to navigate the items uh be able to use home and end and page up and page down and then to select is the enter or space bar and then dismissing use the escape key we also wanted to sort type ahead which is something that native select supports so once you focus the picker you you're able to type in order to search the items and you can even do this without opening the pickup and still be able to make a selection so this is an important feature that's included with uh native that we wanted to support and it's helpful when dealing with long lists such as picking uh picking a country another feature we have is integration with the browser native autofill unfortunately there's no javascript event for this so we had to render hidden select and handle its unchanged event when to capture the the value when it's updated we also thought internationalization including right-to-left languages like arabic and hebrew that you can see here all of the languages these languages the entire component is mirrored as you can see so the text is on the right and the chevron and that icon are on the left and then mobile um so screen space is really limited it's really hard to use a drop down menu as i mentioned so the pop over is replaced by a tray which is a bigger area for the user to scroll we ensure that users can use the next and previous button on the software keyboard as well so they can navigate through the through the form which is expected with the native select and then finally those are the mobile screen readers navigating with those you utilize swipe gestures so one of the problems with this is there's no escape key for this so there's no real way to close a picker so we had to add some hidden buttons or close buttons at the start of the end of the list in order to make sure that screen readers could navigate them so that they can escape out of them so it's kind of a good example of the complexities that exist when supporting different platforms and building components from scratch so magenta are you using your x spectrum um since we open source in july the new magento staff services are using spectrum and magento and all of the other experience cloud products or adapt are adopting a spectrum over time as well and i had a couple examples here some of the admin admin extensions in magento have already started migrating to react spectrum this is including the amazon sales channel product recommendations and the upcoming live search offering so that's all we're going to cover for react spectrum uh there's a number of chrono bonus components available so you can go and check them out and we're working on adding more and now i'm going to hand it over to devin who's going to talk a little bit about reactdaria all right thanks danny let me share my screen okay so as danny has shown react spectrum makes building adobe themed applications pretty easy but what if you want to customize the design a bit more um you know build something that's your design as opposed to our design in that case the react aria library that danny mentioned might be a good fit so as you mentioned react aria is alive helps implement the behavior for your custom components along with react stately which provides the state management react arya doesn't provide any rendering or styling so it's up to you to bring your own dom structure and css this makes it really easy to bring into an existing react component library that you might already have and make it more accessible react aria provides interactions behavior and accessibility that can be shared between different implementations of the same component regardless of the design if you think about it a button or even a more complex component like a drop down usually behaves pretty similarly or even the same even if the design is a bit different so why are we rewriting the entire component each time instead of sharing the parts that are the same we built react aria to be that shared layer so you can focus on the unique parts of your components like their design rather than re-implementing the behavior as well react arya starts with interactions building components work well across devices is really hard so react aria provides hooks that implement interactions that work across mouse touch keyboard and screen readers we have high level events like press and hover that cover combine these different interaction models together into a single api so you don't need to worry about the details of each of these types of interactions we handle a ton of edge cases and different browser quirks that we found while testing these to ensure a consistent user experience moving up one level from interactions we have arya for those who don't know arya is a w3c standard that specifies semantics for many common ui controls so that assistive technology like screen readers can make sense of the div soup that we use to implement these components but arya is a contract since it only specifies semantics it's up to the developer to implement all of the behavior with javascript and this is the hard part so there's an additional document published by the w3c called the why aria authoring practices which provides patterns and examples of implementing this behavior on top of aria they typically specify keyboard interactions that are expected by users of these controls along with the required roles and states that make them accessible to assistive technology adobe has invested a lot into accessibility and we're lucky to have an amazing accessibility team who we work with to ensure our components meet accessibility standards so to help give back to the wider community and make this easier to implement react aria provides react hooks for each aria pattern which provide both the semantics and the behavior together this way you can simply spread the props that it returns onto the elements that you'd normally render to implement these common ui patterns and get accessibility in behavior pretty much for free all you need to do is provide the styling all right so let's go through a demo i want to show you how you can take an existing component that you might have and make it more accessible using react aria so here i'm i'm i've got a basic setup already um so you can see i've got some i'm using tailwind css um for the styling in this case and i've got some components that i've already made um so when i when i click this button you can see i've got a dialogue here with kind of a sign up form and and some buttons and stuff so um just a basic basic dialog and but what you'll notice is there's a few a few issues here um with accessibility that i'd like to point out and then we can try to fix so first off um you can uh notice that if i if i open this dialog you can see the focus ring is actually still back there on this button so focus isn't really moving into the into the dialog properly uh when it opens and so if i and if i tab tab forward you know i'll get i'll get there but it should it should move into the dialog as soon as it opens automatically um now the other issue here is that the focus doesn't um isn't contained within the dialog so if i tab forward here i actually ended up down here out of the dialog or you can see if i tab backward actually get back to this button that's kind of outside the dialog here as well so um it's generally recommended that dialogues contain focus within them so that the user can more easily navigate around without kind of going to things that are kind of hidden or outside the dialogue so those are the first couple issues that we need to solve so here i show you um basically the setup we've got here is like we've got an application um i've like this dialogue trigger component that's basically this button um has this label for the uh for the button there and then you pass a dialogue component as a child um and that's what shows up in here so i've made this dialog component it's got like a title and a label for the um sign up button down here um and then just some contents a couple text fields and a check box um so take a look at that dialog component so a couple things we've got here a an outer div which is kind of this fixed position wrapper thing that's taking over the whole page here um we've got this is a backdrop so this is that um this kind of grayish back background color that's kind of covering the whole page um and then this is our actual dialog here um with this rectangle um and then we've got our we got our title which is just an h3 um and we pass in our children which is this whole area down here and then at the bottom we have a couple buttons um and when these are pressed it just triggers this on close prop on the dialogues props and that ends up closing the dialog so the state for that is actually managed by the dialog trigger which renders this button out here and then it has like just a piece of regular react state here to keep track of whether the dialogue is open or not when you press the button sets it to open um when it's open it takes the children clones those so that it can add uh this is open prop and an enclosed prop and and that that's how the the button here can um can um pass to can close the dialog from within it and that just calls set open to set to false um and this dialog is also rendered into a portal which puts it at the end of the document body so if i were to inspect this you would see this dialog here is here at the end of the document body um and then my actual app is inside this root element back here so we're getting a nice portal there which will make sure that we're outside of any overflow behavior that's going on all right so let's see if we can fix a couple of these problems because i mentioned before uh the focus doesn't go into the dialog and then it doesn't it's not really contained inside there either which would be a good feature for accessibility so um the way we're going to do this is using some components and hooks from react aria which is a nice library of of of hooks to make a building accessible components more easy so first what we're going to need is the focus scope component so i'm going to import that focus scope from react aria focus um and focus scope um essentially you wrap some some children within it and it will make sure that focus is either contained within there or um and that's kind of the main feature but it can do a couple other things as well so let's do that first so we'll say focus scope um contain and we'll just wrap our dialog element in that so i'll save that and now uh when i open this dialog up you can see once i've put focus in here when i tab through when i tab to the end goes back to the beginning and if i shift tab it'll go back where it's so now we've got focus containment in our dialog with just one line of code but i mentioned the other thing was we wanted focus to move into the dialog when it first opens and actually we'd like this first input really to receive focus so we can do that by adding the auto focus prop to the focus scope as well and then and then when the when the dialog opens it'll auto focus the first focusable thing within it so now if i click on the on the button again you can see focus immediately moved to the first input within it so um already doing pretty well here improving some accessibility pretty easily okay so um one other thing that's important with dialogs is for keyboard users to be able to close them easily and usually this is done using the escape key um so right now i'm pressing the escape and nothing's happening so we need to wire this up now i could do this manually it could add a keyboard listener and all that stuff but react aria has a hook for this that will also help us with another feature which is kind of nice which is when you want to click outside on this backdrop be nice if the dialogue closed as as well so to do that we're going to use the use overlay hook use overlay from react aria overlays okay um and so what we need to do and the general pattern with these react aria hooks is you pass it some props um and maybe a ref and it gives you back some other props that you can apply to your specific dom elements so i'm going to say let's see let overlay props equal use overlay press the props in and i'm going to need a ref uh let's see so ref equals use ref and i need to import that and i'm going to apply the ref here to um to our dialog element so that use overlay has access to it um and you can see here i've got i've called use overlay this says it provides the behavior for overlays and pop-overs menus those type of things and handles the escape key so perfect so all i need to do now is take this props that it's returned and apply this as well to our dialog element so if i just spread that spread that on there and i save all this now when i open up the dialog again and i press escape dialog closes and if i click click outside dialog also closes super nice okay now one other thing that would be good was is when i when i hit escape or when i close the dialogue in any way like focus doesn't really go anywhere like now i don't know where focus went it kind of went like to the page i think you can see kind of in firefox shows you the little outline there um but it'd be nice uh and generally what's recommended is for um when you close the dialog for focus to be restored back to whatever opens the dialog in this case this button right here um and luckily focus scope makes this quite easy as well so we can just put the restore focus prop on focus scope here and it'll take care of that so now if i open this back up and i hit escape again you can see focus was restored back to this button right here in the and the focus ring showed up so great another another feature down okay so let's take a look at some accessibility properties here and we we need to use firefox has this built-in accessibility inspector that's really good so we can right-click on the dialog here and and select inspect accessibility properties so you can see um this is showing the accessibility tree and and you can kind of ignore the outer ones because there's this iframe here but for this frame you can see the accessibility tree um so let's see we've got we've got things inside the dialog here we've got um we've also got this section out here uh oh and that's our button behind the dialogue okay okay well the other problem here is that like there's no nothing indicating to like a screen reader or anything that's going to use the accessibility tree here like uh that this is a dialogue at all um so we kind of need to we need to fix that problem first so these semantics are really important and providing semantic elements is really important because it helps screen readers and other assistive technology make sense of this kind of div soup that we've created here yeah you see we've got all these divs but like they don't really have any meaning associated with them so it's really hard for a screen reader to kind of like know what's going on here so um we need to apply some aria attributes and arya is the accessible rich internet application spec and it has it provides a bunch of attributes to html elements to provide them with semantics um so react aria implements a lot of this um and and will help us help us out here so uh let's close that for a second and i'm gonna um i'm gonna import um use dialog from react aria dialog all right and then i need to kind of do the same thing as i did with overlays here for the dialog so let's see dialog props equals use dialog and i need to pass it the props and the ref again all right and then i just kind of also spread those props onto the dialog element okay so i'll open up the dialog again and maybe inspect the preference expect this again oh check this out now we have a dialog so now it knows uh the accessibility tree is showing that uh it knows that this is a dialog so how does it know that well let's just inspect element here and see what's going on so you can see it's added a role equals dialog attribute here and also a tab index to make sure that this dialog is actually focusable um and and this role here is what's really giving it that semantics so in the accessibility tree you can see that it knows it's a dialogue but we do have one issue showing up here um which is that we need a label so when it reads the dialogue it needs to know like a name for it so that it knows um what to say when it's reading the dialogue so it says dialogue should be labeled uh luckily uh we have an element already that's the title here um in the dom but we just need to associate it with that dialog so it knows that's the name of the dialog luckily use dialog makes this pretty easy and it actually returns a title props um as well and we just need to take this title props here and assign and assign this to our um our h3 here to associate the title with the dialogue all right so title props actually okay so now if i open up this dialog again you can see we've got uh dialog and it's labeled now as sign up so how is it doing that if we inspect element again you'll see that the dialog here has an aria labeled by attribute it's got this long random id string here but you can see that this id matches the id attribute that is placed automatically on the h3 for us so just by just by taking this title props here and applying it to the h3 we automatically get this nice aria association between the dialog and the title so we've already improved our accessibility quite a bit just by applying a couple lines of code okay so um one other problem here that we notice when we look at the accessibility tree is that this uh this button that's outside the dialog is actually still visible uh even while the dialogue's open even and and that's kind of going to be frustrating for a screen reader user because they're going to be navigating around with kind of a virtual cursor as they move around and and they're going to navigate to this which is outside the dialog but they don't really know they're not really going to know that it's outside the dialogue and that it shouldn't really be accessed and you know cited users can't uh can't interact with that while the dialogue's open so so neither should um screen reader users right so what we need to do is actually make this dialog modal and and modal a modal means that the user can't interact with anything outside that that dialog while it's open um so uh there's a couple steps to do this um first of all we need to import uh use uh modal from react aria slash uh overlays i think um i guess i could put it up here as well combine the imports okay so um to do this i just gonna do the same pattern again modal props equals use modal and actually this doesn't take any arguments in this case um and then we just need to apply this as well to our dialog element um now at this point it's not actually going to do anything because there's a couple other things that we need to set up so um in order to implement this what we actually have to do is apply this aria hidden attribute to everything outside of the dialogue um and this is kind of backwards from the way that react components typically work you know and in react typically you you're only affecting things within your your component but in this case we actually have to affect stuff outside of our dialogue in order to hide it um and so this is implemented by react aria using a context and so when used modal is called it actually tells the parent providers on the page um hey i've got a modal open now and and then that will take care of hiding everything else so we need to um we need to import a couple other components here to handle that so so first off we actually need to replace this this portal down here with uh with an implementation of the same thing in react aria that also handles this modal aspect and so that's the overlay container component i'm sorry that's actually from the overlays package um and so we'll just we'll just replace the portal here with this overlay container and that's what's going to communicate with the the outer can outer providers to indicate that it's within a modal so we got that and now we need to do is wrap our application actually inside of a overlay provider so i need to import overlay provider from react arias overlays and then i just need to wrap wrap this application in that and save this and so now when a modal opens uh this used modal is going to indicate to uh to to the overlay provider that hey there's a modal open now and then this overlay container is going to keep track of where the boundary is between um between the modal and the rest of our app so with this we should be able to open our open our our dialog again and inspect accessibility properties and now you see that section that we had that's outside the dialog is empty now so uh so that that button is being hidden so let's take a look at what happened in our dom structure if we inspect element again you'll see we've got our dialogue here still and that's all also all the same but if we go to our application you'll see that it's got this uh aria hidden attribute on it uh and that's the overlay provider element handling uh doing that and then if i close uh my dialog you'll see aria hidden got removed automatically from this div and you know my dialog is gone so now when i inspect accessibility properties again you'll see there's my push button so handling hiding everything outside of the dialog pretty simply by adding a couple wrappers around our dialog so now we have a pretty much fully accessible dialog component here you know we can tab through it and it makes sure that the focus is contained within the dialog and auto focuses it on on open we can hit escape or click outside and it restores focus back to the button and we made sure that for screen readers we're hiding everything outside the dialog and we made sure that this thing has semantics and is connected to the title and is labeled properly so now we should uh screen reader users should be able to use our dialog pretty easily as well as keyboard users so that's kind of how a look at how how it works to take an existing uh html structure that you might already have in an application and and make that fully accessible using reactdaria so let me go back to the slides now so that's react aria it provides the accessibility interactions and state management for many common components so you can focus on your custom design it gives you complete rendering and styling control since you are in the dom structure just take the event handlers and aria props we give you and spread them onto the appropriate elements and you get most of the behavior and accessibility for free and you can worry less about cross browser cross device and assistive technology testing because we've taken care to ensure everything is well tested we hope it helps making uh make building your own fully accessible components much easier so how can you get started with react aria and react spectrum first uh check out our documentation at reactspectrum.adobe.com we put a ton of effort into this there's a lot of examples uh using the components in different situations and we show all the visual options that our components provide and lots of conceptual documentation about as well about topics like layout styling testing accessibility internationalization and more we also have documentation for each react aria and react stately hook on the website as well with examples of the components if you want to learn more about spectrum design head over to spectrum.adobe.com this is the website that our design team created and it showcases all the components as well but with more design oriented content it tells you when you should use each component and variant and whether another might be appropriate and documents the behaviors and anatomy of each component as well and finally we're open source so you can check us out on github under the adobe org we only open sourced a couple months ago but already the response has been amazing and we've gotten a bunch of contributors from outside adobe including some entirely new components so if you're interested in contributing to an open source component library we'd love to have you and that's it so thanks uh for listening uh we might have a few minutes left for questions if anyone has them you can post them in the chat and we also have eduardo from the magento team here to help answer questions as well hey all eduardo here are there any questions for you to send them our way i know like 30 seconds left before jason's closing remarks all right we're right on time so thank you everyone's joining and um don't enjoy closing our remarks and thank you for joining us here sure thing thank you thanks bye [Music]

Channel: Adobe Developers

Views: 896

Keywords: Adobe IO, Adobe developers, Adobe CC, Adobe I/O, adobe.io

Id: ysnqK0sNnjA

Length: 45min 50sec (2750 seconds)

Published: Mon Oct 26 2020