fix(ui-breadcrumb): add and update aria tags in Breadcrumb and documentation #1788
Conversation
|
| return ( | ||
| <li css={styles?.crumb} style={inlineStyle}> | ||
| {child} | ||
| {isLastElement && hasHref ? this.addAriaCurrent(child) : child} |
There was a problem hiding this comment.
As I understand we can always put this ARIA tag here.
From https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current "If the element representing the current page in the breadcrumb was not a link, the aria-current is optional.", lets put it always there. same in mdn's example: https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook/Breadcrumb_Navigation
ToMESSKa
force-pushed
the
INSTUI-4268_bread_crumb_needs_special_aria_tags_and_wrapped_in_nav
branch
from
41581c3 to
d440ccd
Compare
as now users can set the aria-current themselves, I don't think it's relevant anymore |
ToMESSKa
changed the title
| * Whether the page this breadcrumb points to is the current one. If true, it sets aria-current="page". | ||
| * If this prop is not set to true on any breadcrumb, the element recieving the aria-current="page" will always be the last element on the right by default, unless the last last element's isCurrentPage prop is explicity set to false too. | ||
| */ | ||
| isCurrentPage?: boolean |
There was a problem hiding this comment.
Can you please make an a11y page to the docs, like in https://instructure.design/#Alert where you write how and when this prop should be used
There was a problem hiding this comment.
"on the right by default" this is not needed, for RTL languages its different
There was a problem hiding this comment.
Added the a11y box and removed the "on the right by default" part
…umentation Closes: INSTUI-4268
ToMESSKa
force-pushed
the
INSTUI-4268_bread_crumb_needs_special_aria_tags_and_wrapped_in_nav
branch
from
d440ccd to
99fae9c
Compare
Closes: INSTUI-4268
ISSUES:
TEST PLAN:
- test the new isCurrentPage prop on the examples in the documentation
- the last element of the right should now have an aria-current="page" attribute in HTML, if isCurrentPage prop isn't set to true on any other crumb
- if isCurrentPage is set to an element, which not is the last one, that element should have aria-current="page" attribute now
- screenreaders should annouce the element with the aria-current="page" attirubute as the current
- the examples in the breadcrumb should have descriptive aria-labels ("breadcrumb" instead of "you are here")
- review the modified documentation and the new tests