@@ -29,7 +29,6 @@ const SELECT_OPTION_ENTRY_TEMPLATE_ID = 'selectOption.entry.template';
2929interface ISelectListTemplateData {
3030 root : HTMLElement ;
3131 text : HTMLElement ;
32- itemDescription : HTMLElement ;
3332 decoratorRight : HTMLElement ;
3433 disposables : IDisposable [ ] ;
3534}
@@ -44,8 +43,6 @@ class SelectListRenderer implements IListRenderer<ISelectOptionItem, ISelectList
4443 data . root = container ;
4544 data . text = dom . append ( container , $ ( '.option-text' ) ) ;
4645 data . decoratorRight = dom . append ( container , $ ( '.option-decorator-right' ) ) ;
47- data . itemDescription = dom . append ( container , $ ( '.option-text-description' ) ) ;
48- data . itemDescription . classList . add ( 'visually-hidden' ) ;
4946
5047 return data ;
5148 }
@@ -59,13 +56,6 @@ class SelectListRenderer implements IListRenderer<ISelectOptionItem, ISelectList
5956 data . text . textContent = text ;
6057 data . decoratorRight . innerText = ( ! ! decoratorRight ? decoratorRight : '' ) ;
6158
62- if ( typeof element . description === 'string' ) {
63- const itemDescriptionId = ( text . replace ( / / g, '_' ) . toLowerCase ( ) + '_description_' + data . root . id ) ;
64- data . text . setAttribute ( 'aria-describedby' , itemDescriptionId ) ;
65- data . itemDescription . id = itemDescriptionId ;
66- data . itemDescription . innerText = element . description ;
67- }
68-
6959 // pseudo-select disabled option
7060 if ( isDisabled ) {
7161 data . root . classList . add ( 'option-disabled' ) ;
@@ -107,7 +97,7 @@ export class SelectBoxList extends Disposable implements ISelectBoxDelegate, ILi
10797 private selectionDetailsPane ! : HTMLElement ;
10898 private _skipLayout : boolean = false ;
10999
110- private _sticky : boolean = false ; // for dev purposes only
100+ private _sticky : boolean = true ; // for dev purposes only
111101
112102 constructor ( options : ISelectOptionItem [ ] , selected : number , contextViewProvider : IContextViewProvider , styles : ISelectBoxStyles , selectBoxOptions ?: ISelectBoxOptions ) {
113103
@@ -705,7 +695,18 @@ export class SelectBoxList extends Disposable implements ISelectBoxDelegate, ILi
705695 keyboardSupport : false ,
706696 mouseSupport : false ,
707697 accessibilityProvider : {
708- getAriaLabel : ( element ) => element . text ,
698+ getAriaLabel : element => {
699+ let label = element . text ;
700+ if ( element . decoratorRight ) {
701+ label += `. ${ element . decoratorRight } ` ;
702+ }
703+
704+ if ( element . description ) {
705+ label += `. ${ element . description } ` ;
706+ }
707+
708+ return label ;
709+ } ,
709710 getWidgetAriaLabel : ( ) => localize ( { key : 'selectBox' , comment : [ 'Behave like native select dropdown element.' ] } , "Select Box" ) ,
710711 getRole : ( ) => 'option' ,
711712 getWidgetRole : ( ) => 'listbox'
0 commit comments