Skip to content

Feature/dropdown ax #1625

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
cschleiden merged 7 commits into from
Apr 27, 2017
Merged

Feature/dropdown ax #1625

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
94788f9
Fix some accessibility issues with Dropdown.
scriby Apr 26, 2017
8f9d00b
Add change file
scriby Apr 26, 2017
a4dfcf0
Merge branch 'master' into feature/dropdown-ax
scriby Apr 26, 2017
583efc1
Fix lint error
scriby Apr 26, 2017
f6d22d1
Merge branch 'feature/dropdown-ax' of github.com:scriby/office-ui-fab…
scriby Apr 26, 2017
c1cff14
Merge branch 'master' into feature/dropdown-ax
cschleiden Apr 27, 2017
92cbdac
Merge branch 'master' into feature/dropdown-ax
cschleiden Apr 27, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions common/changes/scriby-dropdown-ax-fixes_2017-04-26-10-27.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
{
"changes": [
{
"packageName": "office-ui-fabric-react",
"comment": "Dropdown: Fix an issue with screenreaders not reading menu items.",
"type": "patch"
}
],
"email": "chscribn@microsoft.com"
}
6 changes: 4 additions & 2 deletions packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,6 +135,7 @@ export class Dropdown extends BaseComponent<IDropdownInternalProps, IDropdownSta
aria-describedby={ id + '-option' }
aria-activedescendant={ isOpen && selectedIndex >= 0 ? (this._id + '-list' + selectedIndex) : null }
aria-disabled={ disabled }
aria-owns={ id + '-list' }
>
<span
id={ id + '-option' }
Expand Down Expand Up @@ -253,6 +254,7 @@ export class Dropdown extends BaseComponent<IDropdownInternalProps, IDropdownSta
className={ css('ms-Dropdown-items', styles.items) }
aria-labelledby={ id + '-label' }
onKeyDown={ this._onZoneKeyDown }
role='listbox'
Copy link
Copy Markdown
Contributor

@cschleiden cschleiden Apr 27, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

not sure about this, is a combobox a listbox?

Copy link
Copy Markdown
Contributor Author

@scriby scriby Apr 27, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No.

The combobox is the main control that indicates what is selected, and can pop open a list of choices. Typically a combobox has editable text, but it's not required. Note that the dropdown still uses role="combobox" (I didn't change that).

The list of choices that the combobox shows is a listbox (with options).

This is the same structure used in the example I linked.

Copy link
Copy Markdown
Contributor

@cschleiden cschleiden Apr 27, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh there was a link.. :) Makes sense then, thanks for the change!

>
{ this.props.options.map((item, index) => onRenderItem({ ...item, index }, this._onRenderItem)) }
</FocusZone>
Expand Down Expand Up @@ -311,9 +313,9 @@ export class Dropdown extends BaseComponent<IDropdownInternalProps, IDropdownSta
}
) }
onClick={ () => this._onItemClick(item.index) }
role='menu'
role='option'
aria-selected={ this.state.selectedIndex === item.index ? 'true' : 'false' }
aria-label={ item.text }
ariaLabel={ item.text }
Copy link
Copy Markdown
Contributor Author

@scriby scriby Apr 26, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I created #1621 for this "issue"

> { onRenderOption(item, this._onRenderOption) }</CommandButton>
);
}
Expand Down