fix(cdk-experimental/listbox): fix issue with aria-selected (#25373)

Author: mmalerba

src/cdk-experimental/listbox/listbox.md

@@ -29,14 +29,18 @@ The available CSS classes are listed below, by directive.
 
 In addition to CSS classes, these directives add aria attributes that can be targeted in CSS.
 
-| Directive  | Attribute Selector               | Applied...                               |
-|:-----------|----------------------------------|------------------------------------------|
-| cdkOption  | \[aria-disabled="true"]          | If the option is disabled                |
-| cdkOption  | \[aria-selected="true"]          | If the option is selected                |
-| cdkListbox | \[aria-disabled="true"]          | If the listbox is selected               |
-| cdkListbox | \[aria-multiselectable="true"]   | If the listbox allows multiple selection |
-| cdkListbox | \[aria-orientation="horizontal"] | If the listbox is oriented horizontally  |
-| cdkListbox | \[aria-orientation="vertical"]   | If the listbox is oriented vertically    |
+| Directive  | Attribute Selector               | Applied...                              |
+|:-----------|----------------------------------|-----------------------------------------|
+| cdkOption  | \[aria-disabled="true"]          | If the option is disabled               |
+| cdkOption  | \[aria-disabled="false"]         | If the option is not disabled           |
+| cdkOption  | \[aria-selected="true"]          | If the option is selected               |
+| cdkOption  | \[aria-selected="false"]         | If the option is not selected           |
+| cdkListbox | \[aria-disabled="true"]          | If the listbox is disabled              |
+| cdkListbox | \[aria-disabled="false"]         | If the listbox is not disabled          |
+| cdkListbox | \[aria-multiselectable="true"]   | If the listbox is multiple selection    |
+| cdkListbox | \[aria-multiselectable="false"]  | If the listbox is single selection      |
+| cdkListbox | \[aria-orientation="horizontal"] | If the listbox is oriented horizontally |
+| cdkListbox | \[aria-orientation="vertical"]   | If the listbox is oriented vertically   |
 
 ### Getting started
 

src/cdk-experimental/listbox/listbox.spec.ts

@@ -115,7 +115,7 @@ describe('CdkOption and CdkListbox', () => {
       expect(listbox.value).toEqual([]);
       for (let i = 0; i < options.length; i++) {
         expect(options[i].isSelected()).toBeFalse();
-        expect(optionEls[i].hasAttribute('aria-selected')).toBeFalse();
+        expect(optionEls[i].getAttribute('aria-selected')).toBe('false');
       }
       expect(fixture.componentInstance.changedOption).toBeUndefined();
     });

src/cdk-experimental/listbox/listbox.ts

@@ -93,9 +93,9 @@ class ListboxSelectionModel<T> extends SelectionModel<T> {
     'role': 'option',
     'class': 'cdk-option',
     '[id]': 'id',
-    '[attr.aria-selected]': 'isSelected() || null',
+    '[attr.aria-selected]': 'isSelected()',
     '[attr.tabindex]': '_getTabIndex()',
-    '[attr.aria-disabled]': 'disabled || null',
+    '[attr.aria-disabled]': 'disabled',
     '[class.cdk-option-active]': 'isActive()',
     '(click)': '_clicked.next($event)',
     '(focus)': '_handleFocus()',
@@ -243,8 +243,8 @@ export class CdkOption<T = unknown> implements ListKeyManagerOption, Highlightab
     'class': 'cdk-listbox',
     '[id]': 'id',
     '[attr.tabindex]': '_getTabIndex()',
-    '[attr.aria-disabled]': 'disabled || null',
-    '[attr.aria-multiselectable]': 'multiple || null',
+    '[attr.aria-disabled]': 'disabled',
+    '[attr.aria-multiselectable]': 'multiple',
     '[attr.aria-activedescendant]': '_getAriaActiveDescendant()',
     '[attr.aria-orientation]': 'orientation',
     '(focus)': '_handleFocus()',

src/components-examples/cdk-experimental/listbox/cdk-listbox-activedescendant/cdk-listbox-activedescendant-example.css

@@ -20,7 +20,7 @@
   padding: 5px 5px 5px 25px;
 }
 
-.example-option[aria-selected]::before {
+.example-option[aria-selected='true']::before {
   content: '';
   display: block;
   width: 20px;

src/components-examples/cdk-experimental/listbox/cdk-listbox-compare-with/cdk-listbox-compare-with-example.css

@@ -20,7 +20,7 @@
   padding: 5px 5px 5px 25px;
 }
 
-.example-option[aria-selected]::before {
+.example-option[aria-selected='true']::before {
   content: '';
   display: block;
   width: 20px;

src/components-examples/cdk-experimental/listbox/cdk-listbox-custom-navigation/cdk-listbox-custom-navigation-example.css

@@ -20,7 +20,7 @@
   padding: 5px 5px 5px 25px;
 }
 
-.example-option[aria-selected]::before {
+.example-option[aria-selected='true']::before {
   content: '';
   display: block;
   width: 20px;
@@ -31,10 +31,10 @@
   left: 2px;
 }
 
-.example-option[aria-disabled] {
+.example-option[aria-disabled='true'] {
   opacity: 0.5;
 }
 
-.example-option:not([aria-disabled]):focus {
+.example-option[aria-disabled='false']:focus {
   background: rgba(0, 0, 0, 0.2);
 }

src/components-examples/cdk-experimental/listbox/cdk-listbox-custom-typeahead/cdk-listbox-custom-typeahead-example.css

@@ -20,7 +20,7 @@
   padding: 5px 5px 5px 25px;
 }
 
-.example-option[aria-selected]::before {
+.example-option[aria-selected='true']::before {
   content: '';
   display: block;
   width: 20px;

src/components-examples/cdk-experimental/listbox/cdk-listbox-disabled/cdk-listbox-disabled-example.css

@@ -28,7 +28,7 @@
   padding: 5px 5px 5px 25px;
 }
 
-.example-option[aria-selected]::before {
+.example-option[aria-selected='true']::before {
   content: '';
   display: block;
   width: 20px;
@@ -39,11 +39,11 @@
   left: 2px;
 }
 
-.example-option[aria-disabled] {
+.example-option[aria-disabled='true'] {
   opacity: 0.5;
 }
 
-.example-option:not([aria-disabled]):focus {
+.example-option[aria-disabled='false']:focus {
   background: rgba(0, 0, 0, 0.2);
 }
 

src/components-examples/cdk-experimental/listbox/cdk-listbox-forms-validation/cdk-listbox-forms-validation-example.css

@@ -30,7 +30,7 @@
   padding: 5px 5px 5px 25px;
 }
 
-.example-option[aria-selected]::before {
+.example-option[aria-selected='true']::before {
   content: '';
   display: block;
   width: 20px;

src/components-examples/cdk-experimental/listbox/cdk-listbox-horizontal/cdk-listbox-horizontal-example.css

@@ -20,7 +20,7 @@
   border-left-width: 1px;
 }
 
-.example-option[aria-selected]::before {
+.example-option[aria-selected='true']::before {
   content: '';
   position: absolute;
   border: 2px solid black;

src/components-examples/cdk-experimental/listbox/cdk-listbox-multiple/cdk-listbox-multiple-example.css

@@ -20,7 +20,7 @@
   padding: 5px 5px 5px 25px;
 }
 
-.example-option[aria-selected]::before {
+.example-option[aria-selected='true']::before {
   content: '';
   display: block;
   width: 20px;

src/components-examples/cdk-experimental/listbox/cdk-listbox-overview/cdk-listbox-overview-example.css

@@ -20,7 +20,7 @@
   padding: 5px 5px 5px 25px;
 }
 
-.example-option[aria-selected]::before {
+.example-option[aria-selected='true']::before {
   content: '';
   display: block;
   width: 20px;

src/components-examples/cdk-experimental/listbox/cdk-listbox-reactive-forms/cdk-listbox-reactive-forms-example.css

@@ -20,7 +20,7 @@
   padding: 5px 5px 5px 25px;
 }
 
-.example-option[aria-selected]::before {
+.example-option[aria-selected='true']::before {
   content: '';
   display: block;
   width: 20px;

src/components-examples/cdk-experimental/listbox/cdk-listbox-template-forms/cdk-listbox-template-forms-example.css

@@ -20,7 +20,7 @@
   padding: 5px 5px 5px 25px;
 }
 
-.example-option[aria-selected]::before {
+.example-option[aria-selected='true']::before {
   content: '';
   display: block;
   width: 20px;

src/components-examples/cdk-experimental/listbox/cdk-listbox-value-binding/cdk-listbox-value-binding-example.css

@@ -20,7 +20,7 @@
   padding: 5px 5px 5px 25px;
 }
 
-.example-option[aria-selected]::before {
+.example-option[aria-selected='true']::before {
   content: '';
   display: block;
   width: 20px;