File tree Expand file tree Collapse file tree
Expand file tree Collapse file tree Original file line number Diff line number Diff line change 1+ ---
2+ " @patternfly/elements " : patch
3+ ---
4+ ` <pf-jump-links> ` : improve screen reader accessibility by labeling the navigation landmark element
Original file line number Diff line number Diff line change @@ -35,8 +35,8 @@ export class PfJumpLinks extends LitElement {
3535 /** Offset to add to the scroll position, potentially for a masthead which content scrolls under. */
3636 @property ( { type : Number } ) offset = 0 ;
3737
38- /** Label to add to nav element. */
39- @property ( ) label ?: string ;
38+ /** Label to add to nav element. Required for accessibility. */
39+ @property ( { reflect : true } ) label = 'Jump to section' ;
4040
4141 #kids = this . querySelectorAll ?.< LitElement > ( ':is(pf-jump-links-item, pf-jump-links-list)' ) ;
4242
@@ -84,11 +84,11 @@ export class PfJumpLinks extends LitElement {
8484
8585 render ( ) : TemplateResult < 1 > {
8686 return html `
87- < nav id ="container "> ${ this . expandable ? html `
87+ < nav id ="container " aria-labelledby =" label " > ${ this . expandable ? html `
8888 < details ?open ="${ this . expanded } " @toggle ="${ this . #onToggle} ">
8989 < summary >
9090 < pf-icon icon ="chevron-right "> </ pf-icon >
91- < span id ="label "> ${ this . label } </ span >
91+ < span part =" label " id ="label "> ${ this . label } </ span >
9292 </ summary >
9393 < div role ="listbox " aria-labelledby ="label ">
9494 <!-- Place pf-jump-links-items here -->
You can’t perform that action at this time.
0 commit comments