From 3074ade91049b493a1d8e3f3f74e8a1e22cb7404 Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Sun, 12 Feb 2017 20:34:02 +0200 Subject: [PATCH] Updated breadcrumbs and alerts for accesibility, documented tooltips --- docs/contextual.html | 42 ++++++++++++++++++++++++++++++++++++------ docs/utility.html | 1 + docs/v2/DEVLOG.md | 6 ++++++ 3 files changed, 43 insertions(+), 6 deletions(-) diff --git a/docs/contextual.html b/docs/contextual.html index af97678..a208784 100644 --- a/docs/contextual.html +++ b/docs/contextual.html @@ -43,7 +43,7 @@
-
+

Contextual

The contextual module provides you with simple tags, marks and highlights for your pages, allowing you to easily emphasize parts of your text. The contextual alerts aim to replace the commonly used modal dialog design paradigm with a more modern one. HTML5 elements and simple rules are used in order to make important messages and pieces of content stand out easily.

All examples showcased refer to the mini-default flavor, some class names and styles might differ based on the flavor you're using.

@@ -51,7 +51,7 @@
-
+

Quick overview

@@ -66,7 +66,7 @@
-
+

Text highlighting

@@ -125,7 +125,7 @@
-
+

Alerts

@@ -157,6 +157,7 @@

Notes

  • Alert elements do not have any pre-defined behavior. You should use your own Javascript code and interactive HTML elements to deal with showing and hiding them as necessary.
    • +
  • If you want to make your alerts more accessible, we suggest you add either the role="alert" attribute or the role="alertdialog" attribute, depending on the behavior you are planning to implement for your alerts.
@@ -175,7 +176,7 @@
-
+

Animated alerts

@@ -210,8 +211,37 @@
+
+
+
+

Tooltips

+
+
+
+

Hover over this text to see a tooltip!


+

Hover over this text to see a reverse tooltip!


+
+
+
+

Tooltips can be used to convey context-sensitive information when the user hovers over some text. To create a tooltip, simply wrap the text you want users to hover over in an element with the .tooltip class (our choice is usually a <span> element, but your needs may differ) and add an aria-label in that element, setting its value to the content of your tooltip. Tooltips display at the top of the hovered text by default, so if you want to show them below the text, add the .bottom class to them.

+

Sample code

+ 
<span class="tooltip" aria-label="This is a tooltip">Hover over this text to see a tooltip!</span>
+<span class="tooltip bottom" aria-label="This is a tooltip">Hover over this text to see a reverse tooltip!</span>
+
+
+
+

Notes

+
    +
  • Tooltips are built to be accessible and should display properly on screenreaders.
    • +
  • If you are not satisfied with the default tooltip colors, please check out the customization page for instuctions on how to create your own tooltip variants.
    • +
  • Rembmer to always add the aria-label attribute, otherwise your tooltip will not have any text to show.
    • +
+
+
+
+
-
+

If you want to learn more about mini.css's modules, go back to the modules page and choose another module to see its documentation.

diff --git a/docs/utility.html b/docs/utility.html index 3cdefdd..d8e8578 100644 --- a/docs/utility.html +++ b/docs/utility.html @@ -194,6 +194,7 @@
  • The separators between breadcrumbs are added using some tricky CSS rules. Due to that, there might be a few browser versions or devices where you can see part of the seams between the element separators.
  • Breadcrumbs show a hierarchy, an ordered list. However, we do not use the <ol> element, as it might conflict with some custom styles we've seen people use.
    • +
  • If you want to add some accesibility to your breadcrumbs, you can add the role="navigation" attribute, although it is not required.
diff --git a/docs/v2/DEVLOG.md b/docs/v2/DEVLOG.md index 4398ec2..e15baad 100644 --- a/docs/v2/DEVLOG.md +++ b/docs/v2/DEVLOG.md @@ -852,3 +852,9 @@ - Updated `progress.html` with an accessibility guideline and new layout. - Updated `card.html` with new layout. - Updated `table.html` with new layout. + +## 20170212 + +- Added accessibility guidelines for `breadcrumbs`. +- Added accessibility guidelines for `alert`s. +- Documented `tooltip`. No *dos* and *don'ts* seem to be required, as the use cases are really really simple.