Skip to content

Commit ed0924c

Browse files
shakeebrshakeebr
committed
Docs page updated
Updating docs page (accessibility and other improvements)
1 parent 272759d commit ed0924c

File tree

5 files changed

+215
-107
lines changed

5 files changed

+215
-107
lines changed

‎docs/about.html‎

Lines changed: 43 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -7,32 +7,32 @@
77

88
<title>About | Oracle Font APEX</title>
99

10-
<meta name="title" itemprop="name" content="" />
11-
<meta name="description" itemprop="description" content="" />
10+
<meta name="title" itemprop="name" content="Oracle Font APEX" />
11+
<meta name="description" itemprop="description" content="Font APEX is an open source icon library from the Oracle APEX team." />
1212
<meta name="keywords" content="Oracle, Font, Font Apex, Apex" />
1313
<meta name="version" content="21" />
1414

1515
<meta name="twitter:card" content="summary" />
1616
<meta name="twitter:site" content="oracleapex" />
17-
<meta name="twitter:title" content="" />
18-
<meta name="twitter:description" content="" />
17+
<meta name="twitter:title" content="Oracle Font APEX" />
18+
<meta name="twitter:description" content="Font APEX is an open source icon library from the Oracle APEX team." />
1919

2020
<meta property="og:type" content="article" />
21-
<meta property="og:title" content="" />
22-
<meta property="og:description" content="" />
21+
<meta property="og:title" content="Oracle Font APEX" />
22+
<meta property="og:description" content="Font APEX is an open source icon library from the Oracle APEX team." />
2323
<meta property="og:site_name" content="Oracle Font APEX" />
2424

25-
<link rel="mask-icon" sizes="all" href="../assets/media/icons/pinned-icon.svg" color="#0572CE" />
26-
<link rel="shortcut icon" type="image/ico" href="../assets/media/icons/favicon.ico" />
27-
<link rel="apple-touch-icon" sizes="192x192" href="../assets/media/icons/icon.png" />
25+
<link rel="mask-icon" sizes="all" href="pinned-icon.svg" color="#0572CE" />
26+
<link rel="shortcut icon" type="image/ico" href="favicon.ico" />
27+
<link rel="apple-touch-icon" sizes="192x192" href="icon.png" />
2828
<meta name="theme-color" content="#0572CE" />
2929

3030
<link rel="stylesheet" href="ui.css?v=2.1" type="text/css" />
31-
<link rel="stylesheet" href="../css/font-apex.min.css?v=1.0" type="text/css" />
31+
<link rel="stylesheet" href="../css/font-apex.min.css?v=2.1" type="text/css" />
3232
</head>
33-
<body class="_has-modalOpen" id="top">
33+
<body id="top">
3434

35-
<div class="dm-Header">
35+
<header role="banner" class="dm-Header">
3636
<div class="dm-Container">
3737
<a class="dm-Header-logoLink" href="../index.html">
3838
<svg class="dm-Header-logoIcon" viewBox="0 0 256 32">
@@ -59,32 +59,52 @@
5959
</li>
6060
</ul>
6161
</div>
62-
</div>
62+
</header>
6363

64-
<div class="dm-Body">
64+
<main role="main" class="dm-Body">
6565
<div class="dm-Container">
6666

6767
<h1>Font APEX</h1>
6868

6969
<div class="dm-About">
7070

71-
<h2>What is Font APEX?</h2>
72-
<p>Font APEX is an icon library designed for <a href="https://apex.oracle.com" target="_blank">Oracle APEX</a> and <a href="https://apex.oracle.com/ut" target="_blank">Universal Theme</a>. It was originally created as a replacement for <a href="https://fontawesome.com/" target="_blank">Font Awesome</a> 4.*, the web's leading icon library, and therefore contains almost all of the Font Awesome icons, re-drawn originally on a 16x16 grid as line-icons. We wanted to make it a seamless switch to go from Font Awesome to Font APEX for Oracle APEX applications, and therefore use the same "fa" prefix for the icons, making it easier than ever to move to entirely new icon library.</p>
71+
<h2>Introduction</h2>
72+
<p>Font APEX is an icon library initially designed <a href="https://apex.oracle.com" target="_blank">Oracle APEX</a> and <a href="https://apex.oracle.com/ut" target="_blank">Universal Theme</a>. It was originally intended as a replacement for Font Awesome 4, the web's leading icon library, and therefore contains almost all of the Font Awesome icons, re-drawn originally on a 16x16 grid as line-icons. We wanted to make it a seamless switch to go from Font Awesome to Font APEX, and therefore use the same "fa" prefix for the icons, making it easier than ever to move to entirely new icon library.</p>
73+
<h2>Getting Started</h2>
74+
<p>Download and extract Font APEX, and then simply include a link to the Font APEX css file in your HTML header.</p>
75+
<pre>&lt;link rel="stylesheet" href="css/font-apex.min.css?v=2.1" type="text/css" /&gt;</pre>
76+
<p>To display the icon in your UI, use the following markup and just replace the <code class="icon-class">fa-apex</code> with class for the icon you want to use.</p>
77+
<pre>&lt;span class="fa <span class="icon-class">fa-apex</span>" aria-hidden="true"&gt;&lt;/span&gt;</pre>
78+
<p>To display the larger size icons, add the <code class="modifier-class">fa-lg</code> modifier class. This will display the icon with the more detailed 32px version.</p>
79+
<pre>&lt;span class="fa <span class="icon-class">fa-apex</span> <span class="modifier-class">fa-lg</span>" aria-hidden="true"&gt;&lt;/span&gt;</pre>
80+
<p>You can also apply the <code class="modifier-class">force-fa-lg</code> modifier class to any container to force all icons within it to use the larger icons.</p>
81+
82+
<h2>Icon Library</h2>
83+
<p>There are two families of icons within Font APEX &mdash; Small and Large.</p>
84+
<ul>
85+
<li><b>Small icons</b> are based on a 16x16 grid and ideally suited for buttons and menus.</li>
86+
<li><b>Large icons</b> are based on a 32x32 grid and well suited for places where you need to provide a larger graphic, such as cards, media lists, and hero regions.</li>
87+
</ul>
88+
<p>Many <a href="https://apex.oracle.com" target="_blank">Oracle APEX</a> components will automatically use the small or large icons based on the context (such as Template Options), so all you need to do is focus on the icon you want. For example, when using Cards, the Block and Featured template option will automatically show the larger versions of icons where the Basic and Compact template options will use icons from the smaller set.</p>
89+
<p>There are over 1000 icons in Font APEX, and there are 25 modifiers you can place on top of any existing icons so you can customize any icon to fit your needs.</p>
90+
<p>Font APEX is also well suited for bi-directional languages. Icons with arrows, such as <code class="icon-class">fa-arrow-right</code> will automatically flip horizontally when viewed in a Right-to-Left language such as Arabic or Farsi. You can prevent this default behavior by adding the <code class="modifier-class">fa-dir-strict</code> modifier class.</p>
91+
<h2>License</h2>
92+
<p>
93+
Fonts: <a href="https://scripts.sil.org/OFL" target="_blank">SIL OFL 1.1 License</a><br />
94+
Icons + Code: <a href="https://opensource.org/licenses/MIT" target="_blank">MIT License</a>
95+
</p>
96+
<p>Please read the <a href="https://github.com/oracle/font-apex/blob/master/LICENSE.txt" target="_blank">LICENSE.txt</a> file on for additional details.</p>
7397

74-
<h2>What's new in Font APEX 2?</h2>
75-
<p>Font APEX 2 expands upon the original Font APEX by providing the complete set of Font APEX icons at a larger size. There are now two families of icons in Font APEX: small and large. Small icons are based on a 16x16 grid and ideally suited for buttons and menus. Large icons are based on a 32x32 grid and well suited for places where you need to provide a larger graphic, such as cards, media lists, and hero regions.</p>
76-
<p>Many APEX components will automatically use the large or small icons based on the context (such as Template Options), so all you need to do is focus on the icon you want. For example, when using Cards, the Block and Featured template option will automatically show the larger versions of icons where the Basic and Compact template options will use icons from the smaller set.</p>
77-
<p>There are over a thousand icons and 25 modifiers that can be on top of any existing icons so you can customize any icon to fit your needs.</p>
7898
</div>
7999

80100
</div>
81-
</div>
101+
</main>
82102

83-
<div class="dm-Footer">
103+
<footer role="contentinfo" class="dm-Footer">
84104
<div class="dm-Container">
85105
<p>&copy; Oracle</p>
86106
</div>
87-
</div>
107+
</footer>
88108

89109
</body>
90110
</html>

‎docs/doc.js‎

Lines changed: 16 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@
22

33
var fontapex = fontapex || {};
44

5+
//foreach for nodeList in IE
6+
NodeList.prototype.forEach = Array.prototype.forEach;
7+
58
fontapex.$ = function( selector ){
69
var Sel = function ( selector ) {
710
var selected = [];
@@ -14,6 +17,7 @@ fontapex.$ = function( selector ){
1417

1518
this.elements = selected;
1619
this.length = this.elements.length;
20+
1721
return this;
1822
};
1923

@@ -173,10 +177,10 @@ fontapex.$ = function( selector ){
173177
}else{
174178
isLarge = "false";
175179
return isLarge;
176-
}
180+
}
177181
}
178182
}
179-
}
183+
}
180184

181185
var isPreviewPage = function () {
182186
return $( '#icon_preview' ).length > 0 ;
@@ -199,12 +203,16 @@ fontapex.$ = function( selector ){
199203
var assembleHTML = function (resultSet, iconCategory) {
200204
var size = _isLarge() === 'true' ? L : S,
201205
getEntry = function ( cl ) {
202-
return '<li><div class="dm-Search-result">' +
203-
'<a href="docs/icon.html'/* + '?' + size */ + '#' + cl + '" class="dm-Search-icon">' +
204-
'<span class="t-Icon fa '+ cl +'" aria-hidden="true"></span></a>' +
206+
return '<li>' +
207+
'<a class="dm-Search-result" href="docs/icon.html'/* + '?' + size */ + '#' + cl + '">' +
208+
'<div class="dm-Search-icon">' +
209+
'<span class="t-Icon fa '+ cl +'" aria-hidden="true"></span>' +
210+
'</div>' +
205211
'<div class="dm-Search-info">' +
206212
'<span class="dm-Search-class">'+ cl +'</span>' +
207-
'</div></div></li>';
213+
'</div>' +
214+
'</a>' +
215+
'</li>';
208216
};
209217

210218
if (iconCategory) { // keywords is not provided, show everything
@@ -402,7 +410,7 @@ fontapex.$ = function( selector ){
402410
} else {
403411
$( '#icon_size_small' ).checked = true;
404412
}*/
405-
413+
406414

407415
$( 'a.dm-Header-logoLink' ).on( 'click', function ( e ) {
408416
var url = this.href,
@@ -418,7 +426,7 @@ fontapex.$ = function( selector ){
418426
document.getElementById( 'icon_size_small' ).checked = true;
419427
icons$.removeClass( CL_LARGE );
420428
}
421-
429+
422430
if ( currentIcon ) {
423431
$( '.dm-Icon-name' )
424432
.text( currentIcon );
@@ -476,16 +484,6 @@ fontapex.$ = function( selector ){
476484
toggleSize( this, affectedElem );
477485
} );
478486
}
479-
480-
// preserve size selection in URL
481-
// todo: doesn't work, need improvement
482-
icons$.on( 'click', function ( e ) {
483-
var url = e.target.href,
484-
insertPos = url.indexOf( '#' ),
485-
size = _isLarge() === 'true' ? L : S;
486-
487-
e.target.href = [ url.slice(0, insertPos)/*, '?' + size*/, url.slice(insertPos) ].join( '' );
488-
});
489487
}
490488

491489
})( fontapex );

‎docs/icon.html‎

Lines changed: 31 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -7,19 +7,19 @@
77

88
<title>Icon | Oracle Font APEX</title>
99

10-
<meta name="title" itemprop="name" content="" />
11-
<meta name="description" itemprop="description" content="" />
10+
<meta name="title" itemprop="name" content="Oracle Font APEX" />
11+
<meta name="description" itemprop="description" content="Font APEX is an open source icon library from the Oracle APEX team." />
1212
<meta name="keywords" content="Oracle, Font, Font Apex, Apex" />
1313
<meta name="version" content="21" />
1414

1515
<meta name="twitter:card" content="summary" />
1616
<meta name="twitter:site" content="oracleapex" />
17-
<meta name="twitter:title" content="" />
18-
<meta name="twitter:description" content="" />
17+
<meta name="twitter:title" content="Oracle Font APEX" />
18+
<meta name="twitter:description" content="Font APEX is an open source icon library from the Oracle APEX team." />
1919

2020
<meta property="og:type" content="article" />
21-
<meta property="og:title" content="" />
22-
<meta property="og:description" content="" />
21+
<meta property="og:title" content="Oracle Font APEX" />
22+
<meta property="og:description" content="Font APEX is an open source icon library from the Oracle APEX team." />
2323
<meta property="og:site_name" content="Oracle Font APEX" />
2424

2525
<link rel="mask-icon" sizes="all" href="pinned-icon.svg" color="#0572CE" />
@@ -28,11 +28,11 @@
2828
<meta name="theme-color" content="#0572CE" />
2929

3030
<link rel="stylesheet" href="ui.css?v=2.1" type="text/css" />
31-
<link rel="stylesheet" href="../css/font-apex.min.css?v=1.0" type="text/css" />
31+
<link rel="stylesheet" href="../css/font-apex.min.css?v=2.1" type="text/css" />
3232
</head>
33-
<body class="_has-modalOpen" id="top">
33+
<body id="top">
3434

35-
<div class="dm-Header">
35+
<header role="banner" class="dm-Header">
3636
<div class="dm-Container">
3737
<a class="dm-Header-logoLink" href="../index.html">
3838
<svg class="dm-Header-logoIcon" viewBox="0 0 256 32">
@@ -59,9 +59,9 @@
5959
</li>
6060
</ul>
6161
</div>
62-
</div>
62+
</header>
6363

64-
<div class="dm-Body">
64+
<main role="main" class="dm-Body">
6565
<div class="dm-Container">
6666

6767
<h1 class="dm-Icon-name"></h1>
@@ -72,18 +72,18 @@ <h1 class="dm-Icon-name"></h1>
7272
<span class="fa" aria-hidden="true" data-icon></span>
7373
</div>
7474

75-
<div class="dm-IconBuilder">
75+
<div class="dm-IconBuilder" aria-controls="icon-output">
7676

77-
<div class="dm-Field">
78-
<div class="dm-FieldLabel">Size:</div>
77+
<div class="dm-Field" role="group" aria-labelledby="icon_size_lbl">
78+
<div class="dm-FieldLabel" id="icon_size_lbl">Size:</div>
7979
<div class="dm-RadioPillSet">
8080
<div class="dm-RadioPillSet-option"><input type="radio" id="icon_size_small" name="icon_size" value=""><label for="icon_size_small">Small</label></div>
8181
<div class="dm-RadioPillSet-option"><input type="radio" id="icon_size_large" name="icon_size" value="fa-lg"><label for="icon_size_large">Large</label></div>
8282
</div>
8383
</div>
8484

85-
<div class="dm-Field">
86-
<div class="dm-FieldLabel">Scale:</div>
85+
<div class="dm-Field" role="group" aria-labelledby="icon_scale_lbl">
86+
<div class="dm-FieldLabel" id="icon_scale_lbl">Scale:</div>
8787
<div class="dm-RadioPillSet">
8888
<div class="dm-RadioPillSet-option"><input type="radio" id="icon_scale_1x" name="icon_scale" value="" checked="checked"><label for="icon_scale_1x">1x</label></div>
8989
<div class="dm-RadioPillSet-option"><input type="radio" id="icon_scale_2x" name="icon_scale" value="fa-2x"><label for="icon_scale_2x">2x</label></div>
@@ -93,8 +93,8 @@ <h1 class="dm-Icon-name"></h1>
9393
</div>
9494
</div>
9595

96-
<div class="dm-Field">
97-
<label class="dm-FieldLabel" for="icon_animation">Animation:</label>
96+
<div class="dm-Field" role="group" aria-labelledby="icon_animation_lbl">
97+
<label class="dm-FieldLabel" for="icon_animation" id="icon_animation_lbl">Animation:</label>
9898
<select id="icon_animation" name="icon_animation" class="">
9999
<option value="" selected="selected">Static</option>
100100
<option value="fa-anim-spin">Spin</option>
@@ -105,8 +105,8 @@ <h1 class="dm-Icon-name"></h1>
105105
</select>
106106
</div>
107107

108-
<div class="dm-Field" class="dm-Field">
109-
<label class="dm-FieldLabel" for="icon_rotate">Rotate:</label>
108+
<div class="dm-Field" role="group" aria-labelledby="icon_rotate_lbl">
109+
<label class="dm-FieldLabel" for="icon_rotate" id="icon_rotate_lbl">Rotate:</label>
110110
<select id="icon_rotate" name="icon_rotate" class="">
111111
<option value="" selected="selected">Normal</option>
112112
<option value="fa-flip-horizontal">Flip Horizontal</option>
@@ -117,8 +117,8 @@ <h1 class="dm-Icon-name"></h1>
117117
</select>
118118
</div>
119119

120-
<div class="dm-Field">
121-
<label class="dm-FieldLabel" for="icon_modifier">Modifier:</label>
120+
<div class="dm-Field" role="group" aria-labelledby="icon_modifier_lbl">
121+
<label class="dm-FieldLabel" for="icon_modifier" id="icon_modifier_lbl">Modifier:</label>
122122
<select id="icon_modifier" name="icon_modifier" class="">
123123
<option value="" selected="selected">None</option>
124124
<option value="fam-25-percent">25 Percent</option>
@@ -149,8 +149,8 @@ <h1 class="dm-Icon-name"></h1>
149149
</select>
150150
</div>
151151

152-
<div class="dm-Field">
153-
<label class="dm-FieldLabel" for="icon_modifier_status">Status</label>
152+
<div class="dm-Field" role="group" aria-labelledby="icon_modifier_status_lbl">
153+
<label class="dm-FieldLabel" for="icon_modifier_status" id="icon_modifier_status_lbl">Status</label>
154154
<select id="icon_modifier_status" name="icon_modifier_status" class="">
155155
<option value="fam-is-success" selected="selected">Success</option>
156156
<option value="fam-is-warning">Warning</option>
@@ -164,15 +164,15 @@ <h1 class="dm-Icon-name"></h1>
164164

165165
</div>
166166

167-
<div class="dm-IconOutput">
167+
<div id="icon-output" class="dm-IconOutput" role="region" aria-live="polite">
168168

169169
<div class="dm-IconOutput-col dm-IconOutput-col--html">
170-
HTML<br />
170+
<h2>HTML</h2>
171171
<code class="dm-Code" id="icon_code" tabindex="0"></code>
172172
</div>
173173

174174
<div class="dm-IconOutput-col dm-IconOutput-col--class">
175-
Class<br />
175+
<h2>Class</h2>
176176
<code class="dm-Code" id="icon_classes" tabindex="0"></code>
177177
<!-- <p class="dm-Desc">Enter in the Icon property for Buttons, Regions, and other components.</p> -->
178178
</div>
@@ -230,7 +230,7 @@ <h2>Examples</h2>
230230
<div class="pv-Alert-title">
231231
Access Denied
232232
</div>
233-
<div class="pv-Alert-body">You have insufficient privilege. Please contact your Administrator for more information. Contact Administrator</div>
233+
<div class="pv-Alert-body">You have insufficient privilege. Please contact your Administrator for more information.</div>
234234
</div>
235235

236236
</div>
@@ -317,13 +317,13 @@ <h2>Examples</h2>
317317
</div>
318318

319319
</div>
320-
</div>
320+
</main>
321321

322-
<div class="dm-Footer">
322+
<footer role="contentinfo" class="dm-Footer">
323323
<div class="dm-Container">
324324
<p>&copy; Oracle</p>
325325
</div>
326-
</div>
326+
</footer>
327327

328328
<script src="doc.js"></script>
329329

0 commit comments

Comments
 (0)