omitting aria-selected if grid or option doesnt support selection (#2172)

Author: LFDanLu

packages/@react-aria/grid/src/useGridRow.ts

@@ -59,7 +59,7 @@ export function useGridRow<T, C extends GridCollection<T>, S extends GridState<T
 
   let rowProps: HTMLAttributes<HTMLElement> = {
     role: 'row',
-    'aria-selected': isSelected,
+    'aria-selected': state.selectionManager.selectionMode !== 'none' ? isSelected : undefined,
     ...pressProps
   };
 

packages/@react-aria/listbox/src/useOption.ts

@@ -109,7 +109,7 @@ export function useOption<T>(props: AriaOptionProps, state: ListState<T>, ref: R
   let optionProps = {
     role: 'option',
     'aria-disabled': isDisabled,
-    'aria-selected': isSelected
+    'aria-selected': state.selectionManager.selectionMode !== 'none' ? isSelected : undefined
   };
 
   // Safari with VoiceOver on macOS misreads options with aria-labelledby or aria-label as simply "text".

packages/@react-spectrum/listbox/test/ListBox.test.js

@@ -96,7 +96,7 @@ describe('ListBox', function () {
     let i = 1;
     for (let item of items) {
       expect(item).toHaveAttribute('tabindex');
-      expect(item).toHaveAttribute('aria-selected');
+      expect(item).not.toHaveAttribute('aria-selected');
       expect(item).toHaveAttribute('aria-disabled');
       expect(item).toHaveAttribute('aria-posinset', '' + i++);
       expect(item).toHaveAttribute('aria-setsize');
@@ -246,7 +246,7 @@ describe('ListBox', function () {
     });
 
     it('supports disabled items', function () {
-      let tree = renderComponent({onSelectionChange, disabledKeys: ['Baz'], autoFocus: 'first'});
+      let tree = renderComponent({onSelectionChange, selectionMode: 'single', disabledKeys: ['Baz'], autoFocus: 'first'});
       let listbox = tree.getByRole('listbox');
       let options = within(listbox).getAllByRole('option');
 

packages/@react-spectrum/table/test/Table.test.js

@@ -195,7 +195,7 @@ describe('TableView', function () {
     expect(rowheader).toHaveTextContent('Foo 2');
     expect(rowheader).toHaveAttribute('aria-colindex', '1');
 
-    expect(rows[1]).toHaveAttribute('aria-selected', 'false');
+    expect(rows[1]).not.toHaveAttribute('aria-selected');
     expect(rows[1]).toHaveAttribute('aria-labelledby', rowheader.id);
 
 
@@ -355,7 +355,7 @@ describe('TableView', function () {
     expect(rowheader).toHaveTextContent('Foo 2');
     expect(rowheader).toHaveAttribute('aria-colindex', '1');
 
-    expect(rows[1]).toHaveAttribute('aria-selected', 'false');
+    expect(rows[1]).not.toHaveAttribute('aria-selected');
     expect(rows[1]).toHaveAttribute('aria-labelledby', rowheader.id);
 
     let cells = within(rowgroups[1]).getAllByRole('gridcell');