fix: tab controls not labeled properly

The tab controls should be announced with the correct tab role, number and position as e.g., 'Smileys and People, selected, tab, 1 of 8'. Adding tablist role for the parent and tab role for the button does the trick.

I also modified aria-selected prop. Why? Using aria-selected={selected || undefined} can be problematic because it leads to inconsistent behaviour with how assistive technologies interpret the presence and value of the aria-selected attribute.

The aria-selected attribute is meant to have a clear true or false value to indicate the selected state.

Related to - PS-20553, PS-20638

packages/emoji-mart/src/components/Navigation/Navigation.tsx

@@ -60,7 +60,7 @@ export default class Navigation extends PureComponent {
         data-position={this.props.position}
         dir={this.props.dir}
       >
-        <div class="flex relative">
+        <div class="flex relative" role="tablist">
           {this.categories.map((category, i) => {
             const title = category.name || I18n.categories[category.id]
             const selected =
@@ -73,10 +73,11 @@ export default class Navigation extends PureComponent {
             return (
               <button
                 aria-label={title}
-                aria-selected={selected || undefined}
+                aria-selected={selected ? 'true' : 'false'}
                 title={title}
                 type="button"
                 class="flex flex-grow flex-center"
+                role="tab"
                 onMouseDown={(e) => e.preventDefault()}
                 onClick={() => {
                   this.props.onClick({ category, i })

packages/emoji-mart/src/components/Picker/PickerStyles.scss

@@ -312,7 +312,7 @@ button {
     transition: transform var(--duration) var(--easing);
   }
 
-  button[aria-selected] {
+  button[aria-selected="true"] {
     color: rgb(var(--em-rgb-accent));
   }
 }