Add docs for new banner

[lukasoppermann]

Only merge when the react component is implemented

[mperrotti]

Can you confirm that none of the proposed Banner updates affect our existing a11y guidance?

[lukasoppermann]

No, I'd love to get this info form @ichelsea

[ichelsea]

Adding this to my list of things to look at this week!

[ichelsea]

Okay, this entire a11y section was written up form the work that @lindseywild and @khiga8 did, so it's valid! There are a couple of things that we want to adjust based on feedback from engineering office hours earlier this week that has also been on my to-do list to get to.

We can create a separate PR for that if you want to get this one merged, or I can add to it before this one is merged.

[lukasoppermann]

Please add it to this PR. We will keep it open until the react components are implemented and shipped, so it will be open for a bit.

[langermank]

Good start!

[langermank]

Can you add something about title being required but may be visually hidden?

[lukasoppermann]

@joshblack is this how we implement it, or is there a separate a11y title which will just use the title the user defines if they do?

[joshblack]

@lukasoppermann I think this is how it's implemented now where the title is required but may be visually hidden 👍 At the moment, this would mean they wrap the title in VisuallyHidden but we could also simplify this with a dedicated prop if that would be helpful.

[lukasoppermann]

I am not sure if this is the right place for a discussion, but I am a bit afraid that if the title is not hidden by default, we will get a lot of duplicates with title and body being the same text.

My only thought to improve this would be to have two props like aria-title and title where aria-title is set to title if present. So, using typescript we could require on of the two to be set.

But I am no react dev and this may be an uncommon or anti-pattern.

[joshblack]

Looks great! Just left a comment/question.

[mperrotti]

Looks good to me. I'd "approve" but waiting until this is out of "draft".

Just ping me when you're officially ready for a review 🙂

[ichelsea]

Thanks for getting this documentation going, @lukasoppermann!

I have a couple fundamental thoughts around our suggestions vs our inline messaging that's coming. Should we write like we don't yet have that component or write like we will have that component soon?

[ichelsea]

Not sure I'm following the repo deletion confirmation example. Right now if you delete a repository, you get a blue banner at the top confirming deletion. I wouldn't use the critical banner because even though it was destructive, it was a successful action. We should only be using them to bring attention to failed actions.

[lukasoppermann]

This is not talking about the once it is deleted, but rather before you delete.

However, I think this was somewhat recently removed. Is there another good example?

[ichelsea]

Okay, this entire a11y section was written up form the work that @lindseywild and @khiga8 did, so it's valid! There are a couple of things that we want to adjust based on feedback from engineering office hours earlier this week that has also been on my to-do list to get to.

We can create a separate PR for that if you want to get this one merged, or I can add to it before this one is merged.

[lukasoppermann]

@ichelsea I merged now as the banner already shipped, please add your improvements via a separate PR. 🙏