From 0e77ed13d3e7441c1c6630c61bff48edc20bd6bc Mon Sep 17 00:00:00 2001
From: Andrea Pryglova <apryglov@cisco.com>
Date: Fri, 17 May 2024 10:17:51 +0200
Subject: [PATCH] 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.
---
 packages/emoji-mart/src/components/Navigation/Navigation.tsx | 5 +++--
 packages/emoji-mart/src/components/Picker/PickerStyles.scss  | 2 +-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/emoji-mart/src/components/Navigation/Navigation.tsx b/packages/emoji-mart/src/components/Navigation/Navigation.tsx
index 515b7ede..a357703c 100644
--- a/packages/emoji-mart/src/components/Navigation/Navigation.tsx
+++ b/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 })
diff --git a/packages/emoji-mart/src/components/Picker/PickerStyles.scss b/packages/emoji-mart/src/components/Picker/PickerStyles.scss
index 7177e47e..e68b6613 100644
--- a/packages/emoji-mart/src/components/Picker/PickerStyles.scss
+++ b/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));
   }
 }