#MODULE #CODEPEN Rating module. A Pen by orioltf.

index.html

<section class="mod_rating" tabindex="0" aria-labelledby="rating_title">

	<h1 id="rating_title" class="visuallyhidden" aria-hidden="true">
		Article rating
	</h1>

	<form action="#">

		<fieldset
			tabindex="0"
			aria-label="Rating component. To use this radiogroup: step into this group and press arrows up and down to rate. Then step out of the group again.">

			<legend class="visuallyhidden">Choose a Rating</legend>

			<input type="radio" id="star5" name="rating" value="5" />
			<label aria-label="Give it 5 stars: it rocks!" for="star5" title="Rocks!">
				<span class="visuallyhidden">5 stars</span>
			</label>

			<input type="radio" id="star4" name="rating" value="4" />
			<label aria-label="Give it 4 stars: it is pretty good!" for="star4" title="Pretty good">
				<span class="visuallyhidden">4 stars</span>
			</label>

			<input type="radio" id="star3" name="rating" value="3" />
			<label aria-label="Give it 3 stars: it could be better, it could be worst…" for="star3" title="Meh">
				<span class="visuallyhidden">3 stars</span>
			</label>

			<input type="radio" id="star2" name="rating" value="2" />
			<label aria-label="Give it 2 stars: it's kinda bad" for="star2" title="Kinda bad">
				<span class="visuallyhidden">2 stars</span>
			</label>

			<input type="radio" id="star1" name="rating" value="1" />
			<label aria-label="Give it 1 star: it sucks big time" for="star1" title="Sucks big time">
				<span class="visuallyhidden">1 star</span>
			</label>
		</fieldset>

		<aside class="total_ratings" aria-label="Total ratings: 14">
			<span aria-hidden="true" class="visuallyhidden">Total ratings: </span>
			<span aria-hidden="true" class="number_total_ratings">14</span>
			<span aria-hidden="true">Ratings</span>
		</aside>

	</form>

</section>

Rating-module.markdown

Rating module

Rating module, javascript-free for layout.

https://gist.github.com/orioltf/66e76aa9b332572c432d

http://cdpn.io/wrCiG

A Pen by orioltf on CodePen.

License.

style.scss

@mixin clearfix {
	zoom:1;
	&:before, &:after {
		content: "\0020";
		display: block;
		height: 0;
		overflow: hidden;
	}
	&:after {
		clear: both;
	}
}

@mixin visuallyhidden {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}
.visuallyhidden {
  @include visuallyhidden;
}

@mixin visuallyhidden_reset {
	clip: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	position: static;
	width: auto;
}


$colorUnrated: #B9B9B9;
$colorUnratedHover: #666666;
$colorRated: #101010;
$colorRatedHover: $colorUnratedHover;

.mod_rating {
	&:focus {
		outline: 0;
	}

	& form {
		@include clearfix;
	}

	& fieldset {
		&:focus {
			outline: 0;
		}

		border: none;
		padding: 0;
		float: left;

		&:not(:checked) {
			& > input {
				@include visuallyhidden;
			}

			& > label {
				float: right; // We need to float rtl (tho oposite of reading) due to how the ~ selector works
				padding: 0 pxToEm(1px); // OrT: don't use margins, to avoid flickering when hovering from star to star
				overflow: hidden;
				white-space: nowrap;
				cursor: pointer;
				color: $colorUnrated;

				&:before {
					content: '★ ';
				}
			}

			& > label:hover,
			& > label:hover ~ label,
			& > input:focus + label,
			& > input:focus + label ~ label {
				color: $colorUnratedHover;
			}
		}


		& > input:checked ~ label {
			color: $colorRated;
		}
		& > input:checked + label:hover,
		& > input:checked + label:hover ~ label,
		& > input:checked ~ label:hover,
		& > input:checked ~ label:hover ~ label,
		& > label:hover ~ input:checked ~ label {
			color: $colorRatedHover;
		}

	}

	.total_ratings {
		// block formatting context to avoid having a to float this element
		overflow: hidden;
		width: auto;
		float: none;

		padding-left: 1em;

		.number_total_ratings {
			font-weight: bold;
		}
	}
}