Open mbgower opened 1 year ago
Another thing to call out in a discussion of the UI Shell is: why is there no UI Shell footer? I've never seen a Carbon implementation without a footer. The topic should at least be mentioned in the Global header pattern topic -- but it is obviously not a header! :) I think it makes more sense to define a Carbon UI Shell Footer as part of a UI Shell topic, even if it is just a container.
Package
@carbon/react
Browser
Chrome
Operating System
No response
Package version
n/a
React version
on storybook
Automated testing tool and ruleset
n/a
Assistive technology
Screen readers and keyboard, depending on which issue in this omnibus I'm talking about
Description
A review of the the UI Shell Header was carried out as part of an accessibility review. There are copies of the documentation's Usage and Style pages with comments from both Jess Lin and myself. As well, we reviewed the Global header pattern, the Figma guidance and the React storybook implementation.
This is an omnibus issue. The intention is Carbon will peel off individual considerations as new issues.
Key items to consider:
Usage document
inconsistent use of terminology for buttons in the header. Called "header utilities", "platform utility icons" and "header icons" all just in the Usage document.
Here's a screen detail of the live demo, expanded. I'm concerned with naming of "link 4" and "Sub-link 1". Link 4 is likely not a link at all. It would be a Button menu or some kind of disclosure pattern. Clicking on it does not launch a new page (which is what links are supposed to do) but reveals a dropdown menu. Calling this a "link" is the kind of 'message' that can cause a lot of confusion amongst Carbon teams. There may not be a perfect vocabulary solution, but this needs to be addressed.
Style document
Globalal header pattern
Figma
React storybook
I don't understand the Header Base w/ Action and Right Panel version pictured above. It creates a grey 10 section that is tied with the Notifications button, but it does not integrate with interaction. For example, in the preceding image, the focus is on the search component, but the notification is still visually tied in with the panel. Maybe it's just intended to demonstrate what it would look like?
The Header Base w/ Navigation, shown above, is the first to show the Skip to Main function and operability of the 'sub menu'
Note that they have not implemented the menu properly. Focus should go to the first item on open, but the focus here is remaining on the button menu. Realize there is debate about whether this should be a menu, but want attention on it.
The Header Base w/ Navigation, Acitons and SideNave shown above, provides a navigable and operable (but not launchable) top and side nav.
I'm interested that they say "Category title" for what in other places was called "Sub-menu". This is a bit better description, since the title is not itself a node. However, I still think a better term can be created and used globally.
Note that there is interesting description on this page that might make for good text in any of the above documentation.
WCAG 2.1 Violation
No response
Reproduction/example
visit carbondesignsystem.com and review docs
Steps to reproduce
See documents
Code of Conduct