fix: select a11y issues #4668
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| { | ||
| "type": "patch", | ||
| "comment": "fix: select a11y issues", | ||
| "packageName": "@microsoft/fast-foundation", | ||
| "email": "[email protected]", | ||
| "dependentChangeType": "patch" | ||
| } |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -23,16 +23,16 @@ export const SelectTemplate: ViewTemplate<Select> = html` | |
| <div | ||
| aria-activedescendant="${x => (x.open ? x.ariaActiveDescendant : null)}" | ||
| aria-controls="listbox" | ||
| aria-haspopup="listbox" | ||
| aria-labelledby="selected-value" | ||
| class="control" | ||
| part="control" | ||
| role="textbox" | ||
|
There was a problem hiding this comment. Axe was looking for a child with the There was a problem hiding this comment. Ah - @m4thieulavoie I think Axe is outdated. The combobox from ARIA 1.1 and 1.2 are significantly different. Should this be There was a problem hiding this comment. Oh, let me check the axe version. However, the host already has the There was a problem hiding this comment. @chrisdholt you were absolutely right. Axe has this opened issue to add support for the 1.2 combobox. There was a problem hiding this comment. All good! Once that AXE update is out, we'd love you to take another pass :) |
||
| ?disabled="${x => x.disabled}" | ||
| > | ||
| ${startTemplate} | ||
| <slot name="button-container"> | ||
| <div class="selected-value" part="selected-value" id="selected-value"> | ||
| <slot name="selected-value">${x => x.displayValue}</slot> | ||
| </div> | ||
| <div class="indicator" part="indicator" aria-hidden="true"> | ||
|
|
||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This DOM element was requiring a label (or
aria-labelledby) in order to be a11y compliantThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think this is fine, but we should run this via ARIA 1.2 rather than 1.1 as the implications are significant. Is there a way for you to validate against ARIA 1.2 in AXE instead of 1.1?