From 72f0ae57edbdb50a711583253be27ac4275d5269 Mon Sep 17 00:00:00 2001 From: Miles Malerba Date: Mon, 1 Aug 2022 23:58:04 +0000 Subject: [PATCH] fix(cdk-experimental/listbox): fix issue with aria-selected --- src/cdk-experimental/listbox/listbox.md | 20 +++++++++++-------- src/cdk-experimental/listbox/listbox.spec.ts | 2 +- src/cdk-experimental/listbox/listbox.ts | 8 ++++---- .../cdk-listbox-activedescendant-example.css | 2 +- .../cdk-listbox-compare-with-example.css | 2 +- .../cdk-listbox-custom-navigation-example.css | 6 +++--- .../cdk-listbox-custom-typeahead-example.css | 2 +- .../cdk-listbox-disabled-example.css | 6 +++--- .../cdk-listbox-forms-validation-example.css | 2 +- .../cdk-listbox-horizontal-example.css | 2 +- .../cdk-listbox-multiple-example.css | 2 +- .../cdk-listbox-overview-example.css | 2 +- .../cdk-listbox-reactive-forms-example.css | 2 +- .../cdk-listbox-template-forms-example.css | 2 +- .../cdk-listbox-value-binding-example.css | 2 +- 15 files changed, 33 insertions(+), 29 deletions(-) diff --git a/src/cdk-experimental/listbox/listbox.md b/src/cdk-experimental/listbox/listbox.md index 3602ebff3565..542428177713 100644 --- a/src/cdk-experimental/listbox/listbox.md +++ b/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 diff --git a/src/cdk-experimental/listbox/listbox.spec.ts b/src/cdk-experimental/listbox/listbox.spec.ts index 2c214532da3e..84b35b8fb90e 100644 --- a/src/cdk-experimental/listbox/listbox.spec.ts +++ b/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(); }); diff --git a/src/cdk-experimental/listbox/listbox.ts b/src/cdk-experimental/listbox/listbox.ts index 785a7f672b7d..a03b97d284a4 100644 --- a/src/cdk-experimental/listbox/listbox.ts +++ b/src/cdk-experimental/listbox/listbox.ts @@ -93,9 +93,9 @@ class ListboxSelectionModel extends SelectionModel { '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 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()', diff --git a/src/components-examples/cdk-experimental/listbox/cdk-listbox-activedescendant/cdk-listbox-activedescendant-example.css b/src/components-examples/cdk-experimental/listbox/cdk-listbox-activedescendant/cdk-listbox-activedescendant-example.css index 9c007a0e0222..86f2d3f23823 100644 --- a/src/components-examples/cdk-experimental/listbox/cdk-listbox-activedescendant/cdk-listbox-activedescendant-example.css +++ b/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; diff --git a/src/components-examples/cdk-experimental/listbox/cdk-listbox-compare-with/cdk-listbox-compare-with-example.css b/src/components-examples/cdk-experimental/listbox/cdk-listbox-compare-with/cdk-listbox-compare-with-example.css index 513e2346cd56..d1653154ccc7 100644 --- a/src/components-examples/cdk-experimental/listbox/cdk-listbox-compare-with/cdk-listbox-compare-with-example.css +++ b/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; diff --git a/src/components-examples/cdk-experimental/listbox/cdk-listbox-custom-navigation/cdk-listbox-custom-navigation-example.css b/src/components-examples/cdk-experimental/listbox/cdk-listbox-custom-navigation/cdk-listbox-custom-navigation-example.css index 5a53b366dd92..22bd6f2a3971 100644 --- a/src/components-examples/cdk-experimental/listbox/cdk-listbox-custom-navigation/cdk-listbox-custom-navigation-example.css +++ b/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); } diff --git a/src/components-examples/cdk-experimental/listbox/cdk-listbox-custom-typeahead/cdk-listbox-custom-typeahead-example.css b/src/components-examples/cdk-experimental/listbox/cdk-listbox-custom-typeahead/cdk-listbox-custom-typeahead-example.css index 513e2346cd56..d1653154ccc7 100644 --- a/src/components-examples/cdk-experimental/listbox/cdk-listbox-custom-typeahead/cdk-listbox-custom-typeahead-example.css +++ b/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; diff --git a/src/components-examples/cdk-experimental/listbox/cdk-listbox-disabled/cdk-listbox-disabled-example.css b/src/components-examples/cdk-experimental/listbox/cdk-listbox-disabled/cdk-listbox-disabled-example.css index 38f03471cfa3..bc0353dea81f 100644 --- a/src/components-examples/cdk-experimental/listbox/cdk-listbox-disabled/cdk-listbox-disabled-example.css +++ b/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); } diff --git a/src/components-examples/cdk-experimental/listbox/cdk-listbox-forms-validation/cdk-listbox-forms-validation-example.css b/src/components-examples/cdk-experimental/listbox/cdk-listbox-forms-validation/cdk-listbox-forms-validation-example.css index cc80518a6578..777a20e6d0ff 100644 --- a/src/components-examples/cdk-experimental/listbox/cdk-listbox-forms-validation/cdk-listbox-forms-validation-example.css +++ b/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; diff --git a/src/components-examples/cdk-experimental/listbox/cdk-listbox-horizontal/cdk-listbox-horizontal-example.css b/src/components-examples/cdk-experimental/listbox/cdk-listbox-horizontal/cdk-listbox-horizontal-example.css index 6097fd914d30..d202cce3d9fd 100644 --- a/src/components-examples/cdk-experimental/listbox/cdk-listbox-horizontal/cdk-listbox-horizontal-example.css +++ b/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; diff --git a/src/components-examples/cdk-experimental/listbox/cdk-listbox-multiple/cdk-listbox-multiple-example.css b/src/components-examples/cdk-experimental/listbox/cdk-listbox-multiple/cdk-listbox-multiple-example.css index 513e2346cd56..d1653154ccc7 100644 --- a/src/components-examples/cdk-experimental/listbox/cdk-listbox-multiple/cdk-listbox-multiple-example.css +++ b/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; diff --git a/src/components-examples/cdk-experimental/listbox/cdk-listbox-overview/cdk-listbox-overview-example.css b/src/components-examples/cdk-experimental/listbox/cdk-listbox-overview/cdk-listbox-overview-example.css index 513e2346cd56..d1653154ccc7 100644 --- a/src/components-examples/cdk-experimental/listbox/cdk-listbox-overview/cdk-listbox-overview-example.css +++ b/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; diff --git a/src/components-examples/cdk-experimental/listbox/cdk-listbox-reactive-forms/cdk-listbox-reactive-forms-example.css b/src/components-examples/cdk-experimental/listbox/cdk-listbox-reactive-forms/cdk-listbox-reactive-forms-example.css index 513e2346cd56..d1653154ccc7 100644 --- a/src/components-examples/cdk-experimental/listbox/cdk-listbox-reactive-forms/cdk-listbox-reactive-forms-example.css +++ b/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; diff --git a/src/components-examples/cdk-experimental/listbox/cdk-listbox-template-forms/cdk-listbox-template-forms-example.css b/src/components-examples/cdk-experimental/listbox/cdk-listbox-template-forms/cdk-listbox-template-forms-example.css index 513e2346cd56..d1653154ccc7 100644 --- a/src/components-examples/cdk-experimental/listbox/cdk-listbox-template-forms/cdk-listbox-template-forms-example.css +++ b/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; diff --git a/src/components-examples/cdk-experimental/listbox/cdk-listbox-value-binding/cdk-listbox-value-binding-example.css b/src/components-examples/cdk-experimental/listbox/cdk-listbox-value-binding/cdk-listbox-value-binding-example.css index 513e2346cd56..d1653154ccc7 100644 --- a/src/components-examples/cdk-experimental/listbox/cdk-listbox-value-binding/cdk-listbox-value-binding-example.css +++ b/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;