Update Breadcrumbs markup to match w3 aria example (#1590)

.changeset/ninety-bags-cover.md

@@ -0,0 +1,5 @@
+---
+"@primer/css": patch
+---
+
+Update Breadcrumbs markup to match w3 aria example.

.github/pull_request_template.md

@@ -6,4 +6,4 @@ If your proposal fixes any issues, please list them below, then delete this line
 
 Finally, tell us more about the change here, in the description.
 
-/cc @primer/ds-core
+/cc @primer/css-reviewers

CONTRIBUTING.md

@@ -58,7 +58,7 @@ Anyone can open a pull request on Primer CSS. You do not need to work at GitHub
 2. Configure and install the dependencies: `npm install`
 3. Create a new branch from main `git checkout -b my-branch-name`
 4. Make your changes and commit them.
-5. Push your branch and open a pull request. Add a comment describing your proposed changes and request a review from `@primer/ds-core`.
+5. Push your branch and open a pull request. Add a comment describing your proposed changes and request a review from `@primer/css-reviewers`.
 6. Wait for CI tests to finish.
    - If the tests pass, you should see a status check telling you which alpha version of `@primer/css` you can install with npm to test your work in other projects.
    - If the tests fail, review the logs and address any issues.

docs/content/components/breadcrumb.md

@@ -12,14 +12,22 @@ Breadcrumbs are used to show taxonomical context on pages that are many levels d
 - Do not have a section-level navigation
 - May need the ability to quickly go back to the previous (parent) page
 
+All items must contain links, and the last item must be selected.
+
 #### Usage
 
 ```html live
 <nav aria-label="Breadcrumb">
   <ol>
-    <li class="breadcrumb-item"><a href="https://github.com/business">Business</a></li>
-    <li class="breadcrumb-item"><a href="https://github.com/business/customers">Customers</a></li>
-    <li class="breadcrumb-item" aria-current="page">MailChimp</li>
+    <li class="breadcrumb-item">
+      <a href="https://github.com/business">Business</a>
+    </li>
+    <li class="breadcrumb-item">
+      <a href="https://github.com/business/customers">Customers</a>
+    </li>
+    <li class="breadcrumb-item breadcrumb-item-selected">
+      <a href="https://github.com/business/customers/mailchimp" aria-current="page">MailChimp</a>
+    </li>
   </ol>
 </nav>
 ```

src/breadcrumb/breadcrumb.scss

@@ -22,9 +22,12 @@
 
 .breadcrumb-item-selected,
 .breadcrumb-item[aria-current]:not([aria-current=false]) {
-  color: var(--color-fg-default);
-
   &::after {
     content: none;
   }
 }
+
+// stylelint-disable selector-max-type
+.breadcrumb-item-selected a {
+  color: var(--color-fg-default);
+}