chore(a11y): ensure SkipToContent sends focus to page content - #2058
Conversation
Sorry, something went wrong.
add doc for new attribute requirements in Page, SkipToContent update corresponding demos/exmaples skip to content sends focus to content container
|
Deploy preview for pf-next ready! Built with commit fc6b63b |
Sorry, something went wrong.
|
thanks for doing this @seanforyou23 |
Sorry, something went wrong.
|
There are some other places we'll need to update the anchor link: src//patternfly/demos/DataList/examples/data-list-simple-without-pagination-demo.hbs: <a id="main-content-{{page--id}}"></a>
src//patternfly/demos/DataList/examples/data-list-simple-demo.hbs: <a id="main-content-{{page--id}}"></a>
src//patternfly/demos/DataList/examples/data-list-expandable-demo.hbs: <a id="main-content-{{page--id}}"></a>
src//patternfly/demos/DataList/examples/data-list-actionable-demo.hbs: <a id="main-content-{{page--id}}"></a>
src//patternfly/demos/Table/examples/table-sortable-demo.hbs: <a id="main-content-{{page--id}}"></a>
src//patternfly/demos/Table/examples/table-compact-demo.hbs: <a id="main-content-{{page--id}}"></a>
src//patternfly/demos/Table/examples/table-simple-demo.hbs: <a id="main-content-{{page--id}}"></a>
src//patternfly/demos/Table/examples/table-expandable-demo.hbs: <a id="main-content-{{page--id}}"></a>
src//patternfly/demos/Table/examples/table-compound-expansion-demo.hbs: <a id="main-content-{{page--id}}"></a>
src//patternfly/demos/CardView/examples/card-view-demo-example.hbs: <a id="main-content-{{page--id}}"></a>
|
Sorry, something went wrong.
+1. You can just add &:target { outline: 0; } in this block. |
Sorry, something went wrong.
address pr feedback
jgiardino
left a comment
There was a problem hiding this comment.
These updates look great to me, especially the documentation! Thanks for making these updates.
Sorry, something went wrong.
mcoker
left a comment
There was a problem hiding this comment.
nice!
Sorry, something went wrong.
|
🎉 This PR is included in version 2.23.1 🎉 The release is available on: Your semantic-release bot 📦🚀 |
Sorry, something went wrong.
This PR swaps the target element for SkipToContent from being an anchor to being the primary page container. It requires that we supply the <main> element with `tabindex="-1" so this region can receive focus programmatically. It's related to patternfly/patternfly-react#2519
I did notice that unless a heading is an immediate child of the main container, we still don't get the headings read aloud for free when using a screen reader, however, I believe this is still a step in the right direction. The technique is described in one of the training courses over at dequeuniversity.com.
Should we do something about the new focus ring that appears as a result of focusing on the main content region?
add doc for new attribute requirements in Page, SkipToContent
update corresponding demos/exmaples
skip to content sends focus to content container