Accessibility is very important when it comes to the components library. Our components need to be accessible to all users. Some users may be blind, use screen readers to access our websites, or have a motor disability, which means they can only use the keyboard to access the website.
If you are using Windows, you can use tools such as NVDA to run a screen reader on your machine. If you are using a macOS, then you can use VoiceOver, which is built into macOS.
We've already added aria-popup to our DirectiveToggleDirective. However, we also need to set the aria-controls attribute, which tells the screen reader what element the popup is, which is controlled by this toggle. In our HTML, we have aria-controls set to dropdown-menu, which is the ID on the drop-down menu element. When we have multiple drop-downs, these IDs need to be different...