aria-selected should not be used for pagination

[jgage176]

Actual behavior:

aria-selected is set on pagination "page" controls (these are in the "experimental" folder/package). I believe https://github.com/OfficeDev/office-ui-fabric-react/blob/5bc73a304b843bf183bf77659e0165d395f4af91/packages/experiments/src/components/Pagination/PageNumber.tsx line 14 is the main place, but there seem to be a lot of styles and snapshots that will need to be updated along with it.

Expected behavior:

It should not be set on pagination controls, as it is not a check box, radio button or tab - it is actually a link. This fails basic accessibility testing.

Documentation describing expected behavior

It is described in the official doc: https://www.w3.org/TR/wai-aria-1.1/#aria-selected
This is a good article on when not to use aria-selected: https://www.stefanjudis.com/blog/aria-selected-and-when-to-use-it/

[kenotron]

Since this is an experimental component, it wouldn't normally add too much to it until we're ready to promote to the main line.

Request @caradong to chime in to see if she's able to address this issue.

[kenotron]

Since I don't think an explicit accessibility review has been done here, I'd like to lump this as a work item / feature.

[jgage176]

What's the process of it becoming a "main line" component? It has been in experimental for a while. Is there a backlog or voting? I don't see any other way in Office Fabric to do pagination, and it seems like a pretty common need, but maybe it is just for certain types of products.

[caradong]

@jgage176 I have create a issue to make this component in the 'main' package. Feel free to vote and add your comments there. #7254

[jgage176]

I gave it a thumbs up, is that how you vote?

[dzearing]

@caradong did this issue get resolved?

[micahgodbolt]

looking into the issue, one instance where aria-selected is used is with tablist and tabs

http://accessibility.athena-ict.com/aria/examples/tabpanel2.shtml

This might fall under that pattern, though it'd require a bit of re-work separating the tablist from the controls.

As this is still an experimental/WIP control I'll leave this issue open though we'll leave it up to the component author to resolve.

[micahgodbolt]

a quick fix would be to swap out aria-selected with data-selected if you want to avoid that accessibility error.

[msft-fluent-ui-bot]

Because this issue has not had activity for over 150 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.