When you make a special button or slider that isn't a normal HTML one, what special code words do you add to it in React to help screen readers and other tools understand what it is and how to use it?

When you create custom user interface elements in React, like a `<div>` that acts as a button or a complex range input that isn't a standard HTML `<input type="range">`, you add special attributes called ARIA attributes to them. ARIA stands for Accessible Rich Internet Applications. These attributes are not for visual styling or functionality; instead, they provide semantic meaning to assistive technologies like screen readers, telling them what the custom component is, its current state, and how users can interact with it. For a custom button, you primarily use the `role` attribute along with `tabIndex` and potentially `aria-label`: * `role="button"`: This is the most crucial attribute for a custom button. It explicitly tells screen readers that the element, regardless of its underlying HTML tag (e.g., a `<div>` or `<span>`), should be treated as a button. This allows screen readers to announce it as a button and provide instructions on how to activate it. * `tabIndex="0"`: This HTML attribute makes the custom element focusable using the keyboard's Tab key. Without it, keyboard users cannot navigate to or interact with your custom button. A value of `0` places the....