fix(hooks): return boolean for aria-selected (#1603)

Author: silviuaavram

src/hooks/useCombobox/__tests__/getItemProps.test.js

@@ -49,14 +49,14 @@ describe('getItemProps', () => {
       const {result} = renderUseCombobox({highlightedIndex: 2})
       const itemProps = result.current.getItemProps({index: 2})
 
-      expect(itemProps['aria-selected']).toEqual('true')
+      expect(itemProps['aria-selected']).toEqual(true)
     })
 
     test("assign 'false' to aria-selected if item is not highlighted", () => {
       const {result} = renderUseCombobox({highlightedIndex: 1})
       const itemProps = result.current.getItemProps({index: 2})
 
-      expect(itemProps['aria-selected']).toEqual('false')
+      expect(itemProps['aria-selected']).toEqual(false)
     })
 
     test("click handler is not called if it's disabled", () => {

src/hooks/useCombobox/index.js

@@ -321,7 +321,7 @@ function useCombobox(userProps = {}) {
           }
         }),
         'aria-disabled': disabled,
-        'aria-selected': `${index === latestState.highlightedIndex}`,
+        'aria-selected': index === latestState.highlightedIndex,
         id: elementIds.getItemId(index),
         role: 'option',
         ...(!disabled && {

src/hooks/useSelect/__tests__/getItemProps.test.js

@@ -53,15 +53,15 @@ describe('getItemProps', () => {
       const item2Props = result.current.getItemProps({index: 2})
       const item3Props = result.current.getItemProps({index: 3})
 
-      expect(item2Props['aria-selected']).toEqual('false')
-      expect(item3Props['aria-selected']).toEqual('true')
+      expect(item2Props['aria-selected']).toEqual(false)
+      expect(item3Props['aria-selected']).toEqual(true)
     })
 
     test("assign 'false' to aria-selected if item is not highlighted", () => {
       const {result} = renderUseSelect({highlightedIndex: 1})
       const itemProps = result.current.getItemProps({index: 2})
 
-      expect(itemProps['aria-selected']).toEqual('false')
+      expect(itemProps['aria-selected']).toEqual(false)
     })
 
     test('omit click handler when disabled', () => {

src/hooks/useSelect/index.js

@@ -467,7 +467,7 @@ function useSelect(userProps = {}) {
           }
         }),
         'aria-disabled': disabled,
-        'aria-selected': `${item === latestState.selectedItem}`,
+        'aria-selected': item === latestState.selectedItem,
         id: elementIds.getItemId(index),
         role: 'option',
         ...rest,

src/hooks/useSelect/testUtils.js

@@ -88,7 +88,7 @@ export function DropdownSelect({renderSpy, renderItem, ...props}) {
                 <li
                   data-testid={dataTestIds.item(index)}
                   key={`${stringItem}${index}`}
-                  {...getItemProps({item, index, disabled: item.disabled})}
+                  {...getItemProps({item, index})}
                 >
                   {stringItem}
                 </li>