How was the work with ARIA and keyboard navigation organized?

To ensure interface accessibility, ARIA (Accessible Rich Internet Applications) attributes were used, which helped describe the semantics of elements for assistive technologies such as screen readers. For example, roles (role), states (aria-expanded, aria-checked), and properties were added to dynamic components so that users with limitations could understand and interact with the interface.

Keyboard navigation was implemented through focus management and handling keyboard events (e.g., keydown, keyup). Interactive elements provided navigation via the Tab key, as well as support for Enter and Space keys for activation. In complex components (menus, tabs), standard navigation patterns were implemented, such as arrow keys to switch between items.

An example of using ARIA and keyboard navigation for a custom button:

<button 
  role="button" 
  aria-pressed={isPressed} 
  tabIndex={0} 
  onKeyDown={e => {
    if (e.key === 'Enter' || e.key === ' ') {
      togglePressed();
    }
  }}
  onClick={togglePressed}
>
  {isPressed ? 'On' : 'Off'}
</button>