Bug 493751 - HTML syntax highlighting for aria attributes
Summary: HTML syntax highlighting for aria attributes
Status: RESOLVED FIXED
Alias: None
Product: Orion (Archived)
Classification: ECD
Component: Editor (show other bugs)
Version: unspecified   Edit
Hardware: PC Windows 7
: P3 normal (vote)
Target Milestone: 12.0   Edit
Assignee: Grant Gayed CLA
QA Contact:
URL:
Whiteboard:
Keywords: accessibility
Depends on:
Blocks:
 
Reported: 2016-05-16 15:40 EDT by Carolyn MacLeod CLA
Modified: 2016-05-16 17:35 EDT (History)
0 users

See Also:

Attachments
aria-syntax-highlighting.PNG (12.53 KB, image/png)
2016-05-16 16:27 EDT, Carolyn MacLeod CLA 		no flags Details
View All Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Carolyn MacLeod CLA 2016-05-16 15:40:36 EDT 
ARIA attributes in html files should be highlighted the same way as html attributes.

Not sure if it's relevant, but the following aria-* attributes end up half-highlighted (the aria- part is not highlighted but the characters after that are highlighted), which looks strange: aria-label, aria-hidden, aria-readonly, aria-checked, aria-controls, aria-disabled, aria-required, aria-selected.
This is because these attributes coincide with the following html attribute names: label, hidden, readonly, checked, controls, disabled, required, selected.
Comment 1 Grant Gayed CLA 2016-05-16 16:14:05 EDT 
Can you paste an example that includes the different highlightings?
Comment 2 Carolyn MacLeod CLA 2016-05-16 16:27:15 EDT 
Created attachment 261772 [details]
aria-syntax-highlighting.PNG

Here's a screen snap of:
- div 1 -> normal html syntax highlighting (the word 'class' is lighter)
- div 2 -> completely non-highlighted aria-labelledby
- div 3 -> odd half-highlighted aria-hidden
- div 4 -> odd half-highlighted aria-label

In case it's useful, here's the markup:
<!DOCTYPE html>
<html>
	<body>
		<h1>Hello world</h1>
		<div class="testClass"></div>
		<div aria-labelledby="id"></div>
		<div aria-hidden="true"></div>
		<div aria-label="test"></div>
	</body>
</html>