Skip to content

Commit

Permalink
docs(notice): use section for elements w/ role="status"
Browse files Browse the repository at this point in the history
  • Loading branch information
@dancormier
dancormier committed Aug 4, 2022
1 parent 815bc5d commit ef938a5
Showing 1 changed file with 19 additions and 19 deletions.
38 changes: 19 additions & 19 deletions docs/product/components/notices.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,25 +97,25 @@
<p class="stacks-copy">Default style used to separate notices from the main content</p>
<div class="stacks-preview">
{% highlight html %}
<aside class="s-notice s-notice__info" role="status">…</aside>
<aside class="s-notice s-notice__success" role="status">…</aside>
<aside class="s-notice s-notice__warning" role="status">…</aside>
<aside class="s-notice s-notice__danger" role="status">…</aside>
<section class="s-notice s-notice__info" role="status">…</section>
<section class="s-notice s-notice__success" role="status">…</section>
<section class="s-notice s-notice__warning" role="status">…</section>
<section class="s-notice s-notice__danger" role="status">…</section>
{% endhighlight %}
<div class="stacks-preview--example">
<div class="d-flex gs8 gsy fd-column">
<aside class="flex--item s-notice s-notice__info" role="status">
<section class="flex--item s-notice s-notice__info" role="status">
<p class="m0">Info filled message style</p>
</aside>
<aside class="flex--item s-notice s-notice__success" role="status">
</section>
<section class="flex--item s-notice s-notice__success" role="status">
<p class="m0">Success filled message style <a class="s-link s-link__inherit s-link__underlined" href="#">Link</a></p>
</aside>
<aside class="flex--item s-notice s-notice__warning" role="status">
</section>
<section class="flex--item s-notice s-notice__warning" role="status">
<p class="m0">Warning filled message style</p>
</aside>
<aside class="flex--item s-notice s-notice__danger" role="status">
</section>
<section class="flex--item s-notice s-notice__danger" role="status">
<p class="m0">Danger filled message style</p>
</aside>
</section>
</div>
</div>
</div>
Expand Down Expand Up @@ -191,13 +191,13 @@
<p class="stacks-copy">Default behavior for notices that are inserted within the content area</p>
<div class="stacks-preview">
{% highlight html %}
<aside class="s-notice s-notice__info" role="status">…</aside>
<section class="s-notice s-notice__info" role="status">…</section>
{% endhighlight %}
<div class="stacks-preview--example">
<div class="ps-relative d-flex gs8 gsy fd-column jc-center">
<aside class="flex--item s-notice s-notice__info" role="status">
<section class="flex--item s-notice s-notice__info" role="status">
<p class="m0">Inline notice message style</p>
</aside>
</section>
</div>
</div>
</div>
Expand All @@ -206,24 +206,24 @@
<p class="stacks-copy">Notices are often accompanied by an icon.</p>
<div class="stacks-preview">
{% highlight html %}
<aside class="d-flex s-notice s-notice__info" role="status">
<section class="d-flex s-notice s-notice__info" role="status">
<div class="flex--item mr8">
@Svg.Alert
</div>
<div class="flex--item lh-lg">
…
</div>
</aside>
</section>
{% endhighlight %}
<div class="stacks-preview--example">
<aside class="d-flex s-notice s-notice__info" role="status">
<section class="d-flex s-notice s-notice__info" role="status">
<div class="flex--item mr8">
{% icon "Alert" %}
</div>
<div class="flex--item lh-lg">
This question and its answers are locked because the question is off-topic but has historical significance. It is not currently accepting new answers or interactions.
</div>
</aside>
</section>
</div>
</div>

Expand Down

0 comments on commit ef938a5

Please sign in to comment.