Text editor

[ecureuill]

:warning: Wire-frames and live-demos are just for example purpose. They don't meet entirely this requirement.

:pencil2: Pencil icon marks specs that are waiting for definition

---

As the text editor is used by students and teachers, it's important to create an accessible widget.

Also, as the content created in this widget is going to be accessed by students, it's important to deliver an accessible content

Suggested framework: http://draftjs.org

---

Table Of Content

1. General
2. Widget
   1. Toolbar component
   2. Toggle buttons
   3. Text area
   4. Dialogs
      1. Form
3. Text Editor features
   1. Block Types
      1. Paragraph
      2. Headers
      3. Preformatted
      4. Ordered List
      5. Unordered List
      6. Description List
         1. Description List Dialog
   2. Nest-Block Types
      1. Blockquote
         1. Blockquote Dialog
      2. Captions
         1. Captions Dialog
   3. Inline-Semantic Types
      1. Strong
      2. Emphasis
      3. Mark
      4. Abbreviation
         1. Abbreviation Dialog
      5. Definition
         1. Definition Dialog
      6. Quote
         1. Quote Dialog
      7. Cite
      8. Code
      9. Var
      10. Output
      11. Subscript and Superscript
      12. Lang
          1. Lang Dialog
      13. Link
          1. Lang Dialog
   4. Visual styles
   5. Paste
   6. Glossary
   7. Accessibility Validations
   8. General Validations
   9. Instructional Validation
   10. Feedback
       1. Instruction
       2. Error Identification
       3. Error suggestion
4. Usage
5. Wireframes
   1. Toolbar
   2. Text area
6. References

   ---

   General

   • [x] Separating information and structure from presentation to enable different presentations (meet #76)
   • [ ] meet #135
   • [ ] meet #97

     Widget

     Text editor widget is composed by

   • one or more toolbars
   • one or more buttons
   • text area

Toolbar component

1. • [x] Design Pattern: each toolbar must follows WAI-ARIA Practices for toolbar (meet #136)
     1. • [x] role=toolbar
     2. keyboard navigation (meet #101 )
     3. • [ ] tab and Shift + tab
     4. • [ ] left and right arrow (navigate through buttons)
     5. • [ ] down arrow and up arrow, in multiple rows toolbar (navigate through toolbar rows)
2. • [x] aria-label provide a label that identifies the purpose ( meet #136 #16 )

Toggle buttons

1. • [ ] Design Pattern: must follow WAI-ARIA Practices for toggle-button (meet #136)
     1. • [ ] role=button
     2. • [ ] state - aria-pressed=true|false: when the the text editor cursor is positioned in a word, the aria-pressed state should be determined for each button, For instance, in a paragraph with the text "Hello, world!" if cursor is positioned between w and o the buttons [Paragraph] and [B] should be set to aria-pressed=true and remaining buttons as aria-pressed=false 1.Label and Accessible Name
     3. • [x] provide a label that identifies the purpose of the buttons (meet #16 #76 #136)
     4. • [x] #119 Accessible name should be the function the button serves
2. on focus or hoover
   1. • [ ] provide a visible indicator (meet #116 minimum)
        1. • [x] meet #90 (multiple visual cues) Suggestion: change back-ground-color and border-line
        2. • [ ] meet enhanced scenario of #116 by setting focus indicator minimum area, contrast and thickness
   2. • [ ] [recommended] provide a popup content (tooltip) and applies #100
3. • [x] visible indicator of aria-pressed state: when the the text editor cursor is positioned in a word, buttons should present with a visual indication of its state related to the word.
     1. • [x] meet #90 (multiple visual cues) Suggestion: change font-color, font-weight and border-line
     2. • [x] contrast ratio ≥ 3:1 (meets #98)
4. • [x] [suggested] Group buttons by related functions
5. role="image" in font icon (meet #76 ) <span class="icon icon-star-bg" role="img" aria-label="Favorite"></span>

Text area

1.Label and Accessible Name

1. • [ ] provide a descriptive label with inline Label (meet #16 #76 #115 #132 #136 )
     1. Visible If text editor is used for a text area input field (e.g., in Activity component), then provide a visible label. <label for= or aria-labelledby
     2. Visible or hidden in other context e.g., forum) aria-label or aria-labelledby
2. • [ ] #119 accessible name starts with the text of the label (for HTML components, accessible name is automatic computed, for custom components need to check case by case. Read #119)
     1. Keyboard
     2. • [x] tab and Shift + tab to navigate in and out of text area
     3. • [x] left, right, down arrow and up arrows (moves cursor)
     4. [recommended] shortcut to navigate to toolbar from text area (move focus to toolbar)
        1. • [ ] [BEST] Shortcut with letter and printable keyboard keys (e.g., Ctrl+H)
        2. • [ ] Shortcut only with letters, must applies #102
     5. [recommended] shortcut to activate buttons functions, for instance Ctrl+B, Ctrl+I,Ctrl+t+1 (title), Ctrl+t+2 (subtitle)
     6. • [x] [BEST] Shortcut with letter and printable keyboard keys (e.g., Ctrl+H)
     7. • [ ] Shortcut only with letters, must applies #102
     8. • [x] default font color with at least minimum contrast (#92)
     9. • [ ] Text can be resized to 200% ( meets #93)
     10. • [x] [Better] Responsive Design ( meets #97)
     11. Text Spacing (meet #99)
     12. • [x] Line height (line spacing) to at least 1.5 times the font size;
     13. • [x] Spacing following paragraphs to at least 2 times the font size;
     14. • [x] Letter spacing (tracking) to at least 0.12 times the font size;
     15. • [x] Word spacing to at least 0.16 times the font size.

Dialogs

1. • [ ] Layout design consistency #51
2. • [x] Full-widget, on small screen
3. • [ ] Design Pattern: each toolbar must follows WAI-ARIA Practices for modal (meet #136)
     1. • [x] role="dialog"
     2. • [ ] keyboard navigation (meet #101 )
     3. • [ ] aria-modal=true
     4. • [ ] aria-describedby=
     5. • [x] First focus
     6. • [x] Focus after dialog is closed

Form

1. role="image" in font icon (meet #76 ) <span class="icon icon-star-bg" role="img" aria-label="Favorite"></span> 1.Label and Accessible Name
   1. • [ ] provide a descriptive label (meet #16 #76 #115 #132 #136)
        • visible <label for= or aria-labelledby; AND/OR
        • invisible aria-label
   2. • [ ] #119 accessible name starts with the text of the label (for HTML components, accessible name is automatic computed, for custom components need to check case by case. Read #119)
2. on focus or hoover
   1. • [ ] provide a visible indicator (meet #116 minimum)
        1. • [ ] meet #90 (multiple visual cues) Suggestion: change back-ground-color and border-line
        2. • [ ] meet enhanced scenario of #116 by setting focus indicator minimum area, contrast and thickness
   2. • [ ] [recommended] provide a popup content (tooltip) and applies #100

For customs components

1. • [ ] Design Pattern: follows WAI-ARIA Practices (meet #136)
     1. • [ ] role=
     2. • [ ] keyboard navigation (meet #101 )
     3. • [ ] aria-[state]

Text Editor features

For each block of text, user can apply one block type. Nesting block types can nest one or more block types. For each character, word or phrase, user can apply one or more text-level types.

The accessibility of the content depends on the correct use of this features. User has the responsibility to use the correct markup and system has the responsibility to instruction and help user.

Block types

Those types identifies the purpose or structure of the content.

General rules Block types. Some block type has specific rules, if none is cited in it respective section, just follow this general rule.

• [ ] When user press Enter, a new block of the current block type will be created.

• [ ] Given two lines of different block type, Line 1 and Line 2. When user press Return or Del causing that the content of Line 2, is moved to Line 1 and thus only Line 1 exist now and it keeps the same block type

  <-- AFTER -->
  <p> This is the content of a Paragraph block. </p>
  <h2> This is the content of a Paragraph block. </h2>
  < -- BEFORE -->
  <p> This is the content of a Paragraph block. This is the content of a Paragraph block </p>

• When user toggle a block type button

  • DEACTIVATE: If cursor is in a line of the same block type:
  • [ ] If no text is selected, the current block type is deactivated and a Paragraph block is activated
  • [ ] If a text is selected, a new toggled block type is created and the contents before and after text selections keep as it was before.
  • SWITCH: If cursor is in a line of different block type:
    • [ ] if there is no selection, the current block type is deactivated and the toggled block type is activated for the entire line.
    • [ ] if there is a selection, a new line is created with the toggled blockype activated. The content of this new line is the content of the selection. Every content before and after the selection keeps as it was before.

Example for DEACTIVATE and SWITCH scenarios

<h2>Use Case - components</h2>
<ul>
   <li>Notification device (...)</li>
   <li>Video/Audio device</li>
   <li>Confirmation device(...)</li>
</ul>

When user toggle a HEADER block type button

• If cursor is in Use Case - components and there is no text selected, the Header block is switched to Paragraph block

  <p>Use Case - components</p>
  <ul>
  <li>Notification device (...)</li>
  <li>Video/Audio device</li>
  <li>Confirmation device(...)</li>
  </ul>

• If cursor is in Use Case - components and "Case" is selected. the selection is switched to Paragraph block

  <h2>Use</h2>
  <p> Case</p>
  <h2>components</h2>
  <ul>
  <li>Notification device (...)</li>
  <li>Video/Audio device</li>
  <li>Confirmation device(...)</li>
  </ul>

• If cursor is in Video/Audio device line and no text is selected, entire line is switched to Header block

  <h2>Use Case - components</h2>
  <ul>
  <li>Notification (...)</li>
  </ul>
  <h2>Video/Audio device (...)</h2>
  <ul>
  <li>Confirmation(...)</li>
  </ul>

• If cursor is in Video/Audio device line Device is selected, only the selected text is switched for Header block

  <ul>
  <li>Notification (...)</li>
  <li>Video/Audio</li>
  </ul>
  <h2>device</h2>
  <ul>
  <li> (...)</li>
  <li>Confirmation(...)</li>
  </ul>

• If the selection is of multiple block type contents. For instance "Components" till "Notification"

  <h2>Use Case - </h2>
  <h2>components</h2>
  <h2>Notification</h2>
  <ul>
  <li> device (...)</li>
  <li>Video/Audio device</li>
  <li>Confirmation device(...)</li>
  </ul>

Paragraph

Represents a paragraph.

<p>...</p>

• [ ] This is the default Block Type
• [ ] When any other block type is deactivated, the content should switch to a Paragraph block.
• [ ] It's not possible to deactivate a Paragraph block, only switched to another block type. :exclamation: :exclamation: :

Headers

Represents introductory content, a heading section.

<h2>...</h2>
<h3>...</h3>
<h4>...</h4>
<h5>...</h5>
<h6>...</h6>

Note: the top-level header must be defined taking in account the page where it's going to be rendered. For instance, in Authoring Tool, it's probably a h3 because h1 is reserved to be used with the "topic name" and h2 for the "table of content"

• [ ] The Text Editor component could have a default top-level
• [ ] The Text Editor component could have as an option a parameter to pass a different level to be the top-level.
• [ ] Only levels above the top-level can be available If top-level is <h4>, then the levels <h2> and <h3> should not be provided to user.
• [ ] A button should be available for each level provided

Preformatted (:question: better name?)

Represents a block of preformatted tex content, in which structure is represented by typographic conventions rather than by elements.

<pre>[CONTENT]</pre>

• [ ] If user deactivate Preformatted block, all the extra white spaces must be removed from the CONTENT

For instance, some contemporary poem with meaningful/unusual whitespace.

                maxling

it is with a          heart
               heavy

that i admit loss of a feline
        so           loved

a friend lost to the
        unknown
                                (night)
~cdr 11dec07

<p>maxling</p>
<p>it is with a heart</p>
<p>heavy</p>
<p>that i admit loss of a feline</p>
<p>so loved</p>
<p>a friend lost to the</p>
<p>unknown</p>
<p>(night)</p>
<p>~cdr 11dec07</p>

Ordered List

Represents an ordered list of items, rendered as a numbered list.

<ol>
  <li>...</li>
  <li>...</li>
</ol>

Unordered List

Represents an unordered list of items, rendered as a bulleted list. In ordered list, the order of elements is mealiness

<ul>
  <li>...</li>
  <li>...</li>
</ul>

Description List

Represents a description list. The element encloses a list of groups of terms (specified using the <dt>element) and descriptions (provided by <dd> elements). Meets #122

<dl>
    <-- First term -->
    <dt lang=[LANG]><dfn>[TERM A]</dfn></dt>
    <dd>[DEFINITION 1]</dd>
    <-- Second Term  --> 
    <dt><dfn>[TERM B]</dfn></dt>
    <dt><dfn>[TERM B1 (RELATED)]</dfn></dt>
    <dt><dfn>[TERM B2 (RELATED)</dfn></dt>
    <dd>[DEFINITION 1]</dd>
    <-- Third Term  -->
    <dt><dfn>[TERM C]</dfn></dt>
    <dd>[DEFINITION 1]</dd>
    <dd>[DEFINITION 2]</dd>
    <dd>[DEFINITION 3]</dd>
 </dl>

• [ ] When user toggle the Description List button AND cursor is in a Paragraph Block AND the content of the block is formatted as key-value (see example bellow), it will open the Description List dialog filled with the paragraph content. :exclamation:
  • [ ] If user cancel the operation, the Paragraph content must keep at it was before. (meets #127 #130)
• [ ] When user toggle the Description List button AND cursor is in a block without an active Description List AND no selection, it will open the Description List dialog with empty form.
• [ ] When user toggle the Description List button AND cursor is in a block without an active Description List AND with a selection, it will open the Description List dialog filled with the selection content.
  • [ ] If user cancel the operation, the selection content must keep at it was before. (meets #127 #130)
  • [ ] Each block of selection content will be set as TERM
• [ ] When user toggle the Description List button AND cursor is in a block with an active Description List, it will open Description List dialog where user can edit the terms and definitions of the selection or deactivate Description List
• [ ] If user select to deactivate Description List, the current content of the description list should be set as a Paragraph block type and formatted as follow :exclamation:

Example of key-value

<p>[TERM A]: [DEFINITION 1]</p>
<p>[TERM A], [TERM B RELATED], [TERM C RELATED]: [DEFINITION 1]</p>
<p>[TERM A]: [DEFINITION 1]; [DEFINITION 2]; [DEFINITION 3]</p>

Description List dialog

• [ ] TERM is the term to be defined. Component: <input type='text'>
• [ ] DEFINITION: is the description of the TERM. Component: <3input type='text'>
• [ ] TERM_LANG set the language of the term
  For each TERM field Component: <select> Its value must be a valid BCP 47 language tag
• [ ] DEFINITION_LANG set the language of the definition
  For each DEFINITION field Component: <select> Its value must be a valid BCP 47 language tag
• [ ] button Add Related Term
  For each TERM field Component: <button>
• [ ] button Delete Related Term For each related TERM field
  Component: <button>
• [ ] button Add Related Description For each TERM field
  Component: <button>
• [ ] button Delete Related Description For each related Description field
  Component: <button>
• [ ] button Add New Term
  Component: <button>
• [ ] button Set Description List (meets #130) Component: <input type='submit'>
• [ ] button Cancel Component: <button>

Nest-Block types

Nest-block types can nest one or more block types.

Blockquote

Indicates that the enclosed text is an extended quotation.

<blockquote cite=[URL]>
    <-- any block type goes here -->
    <footer>[AUTHOR], <cite>[TITLE OF DOCUMENT]</cite></footer>
</blockquote>

• [ ] If user toggle the Blockquote button AND cursor is in a block without an active Blockquote it will open the Blockquote dialog.
  • [ ] If user cancel the operation, the current block content must keep as it was before. (meets #127 #130)
  • [ ] if user confirm the operation, the current block content will be nested in a Blockquote block.

    <-- BEFORE -->
    <ul>
    <li>[CONTENT]</li>
    <li>[CONTENT]</li>
    </ul>
    <-- AFTER -->
    <blockquote cite=[URL]>
    <p>[CONTENT]</p>
    <p>[CONTENT]</p>
    <footer>[AUTHOR], <cite>[TITLE OF DOCUMENT]</cite></footer>
    </blockquote>

• [ ] If user toggle the Blockquote button AND cursor is in a block with an active Blockquote, it will open the Blockquote dialog where user can edit the quotation or deactivate Caption
• [ ] If user select to deactivate Blockquote, the nested block content should be kept

  
  <blockquote cite=[URL]>
  <ul>
       <li>[CONTENT]</li>
       <li>[CONTENT]</li>
  </ul>
  <footer>[AUTHOR], <cite>[TITLE OF DOCUMENT]</cite></footer>
  </blockquote>>
  

• [ ] When user toggle any block type and cursor is in Nested Block, should apply the rules of block type to the Nested Block, while kept the Blockquote activated.

  <-- BEFORE -->
  <blockquote cite=[URL]>
  <ul>
     <li>[CONTENT]</li>
     <li>[CONTENT]</li>
  </ul>
  <footer>[AUTHOR], <cite>[TITLE OF DOCUMENT]</cite></footer>
  </blockquote>
  <-- AFTER -->
  <blockquote cite=[URL]>
   <p>[CONTENT]</p>
   <p>[CONTENT]</p>
  <footer>[AUTHOR], <cite>[TITLE OF DOCUMENT]</cite></footer>
  </blockquote>

  When creating or editing a blockquote

• [ ] If URL is not filled, no cite= attribute should be inserted
• [ ] if AUTHOR and TITLE OF DOCUMENT is not filled, no <footer> tag should be inserted
  • [ ] if AUTHOR is filled and TITLE OF DOCUMENT is not filled, <footer>[AUTHOR]</footer>
  • [ ] if AUTHOR is not filled and TITLE OF DOCUMENT is filled, <footer><cite>[TITLE OF DOCUMENT]</cite></footer>

When editing in Text Area

• [ ] user can edit Nested Block AUTHOR and/or TITLE OF DOCUMENT directly in text area
  • [ ] If user delete AUTHOR and/or TITLE OF DOCUMENT, the <footer>...</footer> must be removed
    • [ ] If user delete AUTHOR and/or TITLE OF DOCUMENT, user can add it again by toggling the Blockquote button to edit the quotation.
    • [ ] If user move the AUTHOR and/or TITLE OF DOCUMENT to the same line of the Nested Block, thus AUTHOR and/or TITLE OF DOCUMENT should be incorporated to Nested Block content
    • by pressing RETURN or DEL button
    • by cut and paste

Example of move the AUTHOR and TITLE OF DOCUMENT

<blockquote cite=[URL]>
    <p>[CONTENT] [AUTHOR],[TITLE OF DOCUMENT]</p>
    <footer>[AUTHOR], <cite>[TITLE OF DOCUMENT]</cite></footer>
</blockquote>

• [ ] if user press ENTER in anywhere of the Nested Block, should create a new line of the Nested-block (follows block type rules), while kept Blockquote activated

Example of new lines

<blockquote cite=[URL]>
    <p>[CONTENT]</p>
    <p> <-- New line created on ENTER pressed --></p>
    <footer>[AUTHOR], <cite>[TITLE OF DOCUMENT]</cite></footer>
</blockquote>

• [ ] if user press ENTER at the end of the Nested-Block (anywhere after the last character of the Nested-Block's CONTENT), then a new Paragraph Block is added
  • [ ] if there is AUTHOR and/or TITLE OF DOCUMENT after the cursor, the content after the cursor will be the content of the new Paragraph block.

Example of new Paragraph block (cursor between AUTHOR and comma)

<blockquote cite=[URL]>
    <p>[CONTENT] [AUTHOR],[TITLE OF DOCUMENT]</p>
    <footer>[AUTHOR]</footer>, <cite>[TITLE OF DOCUMENT]</cite></footer>
</blockquote>
<p>
, [TITLE OF DOCUMENT]
</p>

Example of new Paragraph block (cursor at end of AUTHOR's line)

<blockquote cite=[URL]>
    <p>[CONTENT]</p>
    <p> <-- New line created on ENTER pressed --></p>
    <footer>[AUTHOR], <cite>[TITLE OF DOCUMENT]</cite></footer>
</blockquote>
<p><-- new empty PARAGRAPH Block --></p>

Blockquote dialog

• [ ] CONTENT is the quotation. Component: This Text Editor
• [ ] [OPTIONAL] URL: Link to the source of the quotation. Component: <input type='url'>
• [ ] [OPTIONAL]AUTHOR is the name of the author of the cited quotation. Component: <input type='text'>
• [ ] [OPTIONAL] TITLE OF DOCUMENT of the cited quotation. Component: <input type='text'>
• [ ] button Set Blockquote (meets #130) Component: <input type='submit'>
• [ ] button Cancel Component: <button>

Caption

Represents self-contained content with an caption. The self-contained could be diagram, code snippet, poems, etc. The caption could be inserted above or bellow the content.

<figure>
  <figcaption>[CAPTION]</figcaption>
  <-- any block type goes after or before caption -->
</figure>

• [ ] If user toggle the Caption button AND cursor is in a block without an active Caption it will open the Caption dialog.
  • [ ] If user cancel the operation, the current block content must keep as it was before. (meets #127 #130)
  • [ ] if user confirm the operation, the current block content will be nested in a Caption block.

Example of a Caption added to a Blokquote content

<-- BEFORE -->
  <blockquote>[BLOCKQUOTE_CONTENT]</blocquote> 
<-- AFTER -->
<figure>
  <blockquote>[BLOCKQUOTE_CONTENT]</blocquote> 
  <figcaption>[CAPTION]</figcaption>
</figure>

• [ ] If user toggle the Caption button AND cursor is in a block with an active Caption, it will open the Caption dialog where user can edit the CAPTION or deactivate Caption
• [ ] If user select to deactivate Caption, the nested block content should be kept

Example of a Caption deactivated

<figure>
   <blockquote>
       <p>[CONTENT]</p>
   </blockquote>
   <figcaption>[CAPTION]</figcaption>
</figure>

• [ ] user can edit CAPTION directly in text area
• [ ] If user delete all the CAPTION, the Caption is automatically deactivated.
• If user move the CAPTION to the same line of the Nested-Block
  • by pressing RETURN or DEL button
  • by cut and paste
  • [ ] CAPTION should be incorporate to the NESTED BLOCK
  • [ ] Caption block should be deactivated

Example of move the CAPTION

<figure>
   <ul>
       <li>[CONTENT]</li>
       <li>[CAPTION]</li>
   </ul>
   <figcaption>[CAPTION]</figcaption>
</figure>

• [ ] if user press ENTER in anywhere of the Nested-Block, should create a new line of the Nested-block (fowling the block type rules) , while kept Caption activated.
• [ ] if user press ENTER after the end of the Nested-Block (any after the last character of the Nested-Block's content), then a new Paragraph Block is added after the Caption Block.

  <-- BEFORE -->
  < -- cursor at the end of the caption line -->
  <figure>
  <blockquote>[BLOCKQUOTE_CONTENT]</blocquote> 
  <figcaption>[CAPTION]</figcaption>
  </figure>  
  <-- AFTER -->
  <figure>
  <blockquote>[BLOCKQUOTE_CONTENT]</blocquote> 
  <figcaption>[CAPTION]</figcaption>
  </figure>
  <p><-- new empty Paragraph block --></p>

  <-- BEFORE -->
  <-- cursor at the the middle of the caption line -->
  <figure>
  <blockquote>[BLOCKQUOTE_CONTENT]</blocquote> 
  <figcaption>This is a caption</figcaption>
  </figure>  
  <-- AFTER -->
  <figure>
  <blockquote>[BLOCKQUOTE_CONTENT]</blocquote> 
  <figcaption>This is</figcaption>
  </figure>
  <-- new Paragraph block -->
  <p>a caption</p>

Caption dialog

• [ ] CAPTION is the caption. Component: <input type='text'>
• [ ] POSITION of the caption Component: <input type='radio'>
• [ ] button Set Blockquote (meets #130) Component: <input type='submit'>
• [ ] button Cancel Component: <button>

Inline-Semantics types

Define the meaning, structure, or style of a word, line, or any arbitrary piece of text. This types can be applied to any Block type content. meets #76 #136

• [ ] When user toggle an Inline-Semantics button AND cursor is not in an active Inline-Semantics of the same type AND no text is selected, it will activate the Inline-Semantics of the toggled type for the current position of the cursor.
• [ ] When user toggle an Inline-Semantics button AND cursor is not in an active Inline-Semantics of the same type AND a text is selected, it will activate the Inline-Semantics of the toggled type to the selection.
• [ ] When user toggle an Inline-Semantics button AND cursor is in an active Inline-Semantics of the same type, it will deactivate the Inline-Semantics of the toggled type.

Strong

Indicates that its contents have strong importance, seriousness, or urgency. Browsers typically render the contents in bold type.

<strong>[CONTENT]</strong>

Emphasis

Set content that have a Stressed emphasis

<em>[CONTENT]</em>

Mark

Set content marked or highlighted for reference or notation purposes

<mark>[CONTENT]</mark>

Abbreviation

Set content as an abbreviation or acronym meets #123

<abbr title=[EXPANSION]>[CONTENT]</abbr>

• [ ] When user toggle the Abbreviation button AND cursor is not in an active Abbreviation AND no text is selected, it will open the Abbreviation dialog with empty form.
• [ ] When user toggle the Abbreviation button AND cursor is not in an active Abbreviation AND a text is selected, it will open the Abbreviation dialog with form filled with content of the selection.
• [ ] When user toggle the Abbreviation button AND cursor is in an active Abbreviation, it will open the Abbreviation dialog to edit or deactivate the Abbreviation.

Edition on Text Area

• [ ] If user erase CONTENT, then Abbreviation should be automatically deactivated.

Abbreviation dialog

• [ ] EXPANSION the expansion of the abbreviation Component: <input type='text'>
• [ ] CONTENT the abbreviation Component: <input type='text'>
• [ ] button Set Abbreviation (meets #130) Component: <input type='submit'>
• [ ] button Cancel Component: <button>
• [ ] Deactivate (on edit mode) Component: <button>

Definition

Used to indicate the term being defined within the context of a definition phrase or sentence. meets #122

<-- DEFAULT USAGE -->
<dfn id=[UNIQUE_ID] title=[CONTENT_DEFINITION]>[CONTENT]</dfn>
<-- COMBINED WITH ABBREVIATION -->
<dfn id=[UNIQUE_ID] ><abbr title=[EXPANSION]>[ABBREVIATED_CONTENT]</abbr></dfn>

When user toggle the Definition button and cursor is in an active Abbreviation

• [ ] If cursor is not in an active Definition, then the Abbreviation will be nested in a Definition.
• [ ] If cursor is in an active Definition, then the Definition will be deactivated, while kept Abbreviation.

When user toggle the Definition button and cursor is not in an active Abbreviation

• [ ] If cursor is not in an active Definition AND no text is selected, it will open the Definition dialog with empty form.
• [ ] If cursor is not in an active Definition AND a text is selected, it will open the Definition dialog with form filled with content of the selection.
• [ ] Id cursor is in an active Definition, it will open the Definition dialog to edit or deactivate the Definition.

Abbreviation deactivated

• [ ] If user deactivate an Abbreviation and the Abbreviation's content is erased, then Definition should be automatically deactivated.
• [ ] If user deactivate an Abbreviation and the Abbreviation's content is not erased, then Definition should be kept activated.

  <-- DO NOT DEACTIVATE ABBREVIATION -->
  <dfn id=[UNIQUE_ID]>
  <abbr title=[EXPANSION]>[ABBREVIATED_CONTENT]</abbr>
  </dfn>

  #### Definition dialog
• [ ] CONTENT_DEFINITION the definition of the content Component: <input type='text'>
• [ ] CONTENT the term to be defined Component: <input type='text'>
• [ ] button Set Definition (meets #130) Component: <input type='submit'>
• [ ] button Cancel Component: <button>
• [ ] Deactivate (on edit mode) Component: <button>

Quote

A short inline quotation. This element is intended for short quotations that don't require paragraph breaks; for long quotations should use the Blockquote.

Content inside a q element must be quoted from another source, whose address, if it has one, may be cited in the cite attribute. The source may be fictional, as when quoting characters in a novel or screenplay.

<q cite=[URI]>[CONTENT]</q>

• [ ] When user toggle the Quote button AND cursor is not in an active Quote AND no text is selected, it will open the Quote dialog with empty form.
• [ ] When user toggle the Quote button AND cursor is not in an active Quote AND a text is selected, it will open the Quote dialog with form filled with content of the selection.
• [ ] When user toggle the Quote button AND cursor is in an active Quote, it will open the Quote dialog to edit or deactivate the Abbreviation.

  Quote dialog

• [ ] CONTENT is the quotation. Component: <input type='text'>
• [ ] [OPTIONAL] URL: Link to the source of the quotation. Component: <input type='url'>
• [ ] button Set Quote (meets #130) Component: <input type='submit'>
• [ ] button Cancel Component: <button>
• [ ] Deactivate (on edit mode) Component: <button>

Cite

Describe a reference to a cited creative work, and must include the title of that work. This can be a work that is being quoted or referenced in detail (i.e. a citation), or it can just be a work that is mentioned in passing.

<cite>[CONTENT]</cite>

Note: Cite is note a quote; Cite is not for name of authors

Code

Indicate that the text is a short fragment of computer code.

<-- one line -->
<code>[CONTENT]</code>
<-- multiple lines -->
<code>
  <pre>[CONTENT]</pre>
</code>

Var

Represents the name of a variable in a mathematical expression or a programming context

<var>[CONTENT]</var>

Example <var>E</var> = <var>m</var> <var>c</var><sup>2</sup> E = m c²

Output

Represents sample or quoted output from another program or computing system.

<samp>[CONTENT]</samp>

Example

<pre>
<code class="language-javascript">console.log(2.3 + 2.4)</code>
<samp>4.699999999999999</samp>
</pre>

console.log(2.3 + 2.4)
4.699999999999999

Subscript and Superscript

These elements must be used only to mark up typographical conventions with specific meanings, not for typographical presentation for presentation's sake. In certain languages, superscripts are part of the typographical conventions for some abbreviations. The Superscript can be used inside a Var, for variables that have subscripts. Mathematical expressions often use subscripts and superscripts.

<sub>[CONTENT]</sub>
<sup>[CONTENT]</sup>

Lang

Indicating word or an idiomatic phrase from another language. meets #121

<i lang=[LANG]>[CONTENT]</i>

• [ ] When user toggle the Lang button AND cursor is not in an active Lang AND no text is selected, it will open the Lang dialog with empty form.
• [ ] When user toggle the Lang button AND cursor is not in an active Lang AND a text is selected, it will open the Lang dialog with form filled with content of the selection.
• [ ] When user toggle the Lang button AND cursor is in an active Lang, it will open the Lang dialog to edit or deactivate the Lang.

Lang dialog

• [ ] LANG the language of the content Component: <select> Its value must be a valid BCP 47 language tag
• [ ] CONTENT the word or phrase Component: <input type='text'>
• [ ] button Set Lang (meets #130) Component: <input type='submit'>
• [ ] button Cancel Component: <button>
• [ ] Deactivate (on edit mode) Component: <button>

  Link

  Set content or create content as a anchor

  <a href=[URI]>[CONTENT]</a>

• [ ] When user toggle the Link button AND cursor is not in an active Link AND no text is selected, it will open the Link dialog with empty form.
• [ ] When user toggle the Link button AND cursor is not in an active Link AND a text is selected, it will open the Link dialog with form filled with content of the selection.
• [ ] When user toggle the Link button AND cursor is in an active Link, it will open the Link dialog to edit or deactivate the link.

Link dialog

• [ ] ORIGIN_LINK=[URL | definition ] Component: <select>
• [ ] button Set Link (meets #130) Component: <input type='submit'>
• [ ] button Cancel Component: <button>
• [ ] Deactivate (on edit mode) Component: <button>

If ORIGIN_LINK==definition

• [ ] DEFINITION list of terms that have been defined Component: <select>
• [ ] (not visible) URI the id of the definition
• [ ] (not visible) CONTENT the term of the definition

If ORIGIN_LINK==URL

• [ ] URI Component: <input type='url'>
• [ ] CONTENT is the text description of the Link Component: <input type='text'>

Example of link to definition

<p>The <strong>HTML Definition element</strong>
(<strong><dfn id="definition-dfn">&lt;dfn&gt;</dfn></strong>) is
used to indicate the term being defined within the context of a
definition phrase or sentence.</p>
(...)
<p>Because of all of that, we decided to use the
<code><a href="#definition-dfn">&lt;dfn&gt;</a></code> element for
this project.</p>

Visual styles

Color, fonts, text-alignment and many others settings are decoration style, with no meaning. If user wants to give meaning for a text, he/she can achieve this by a combination of the above block and text-level types.

• [ ] The better approach is to not enable visual style configurations. ( meets #92 [No text color nor background scenario])

But, if is intend to provide such feature, it's important to assegure the accessibility

• [ ] [rendered content] do not style in html, use a CSS style-sheet, so users with special needs can override it if needed (meets partially #96)

• Text Color
  • [ ] The palette of color must provide only color options that keep at least minimum contrast to the background (meets #92)
    • [ ] Include "text color and highlight validation" listed bellow
• Text Highlight color
  • [ ] The palette of color must provide only color options that keep at least minimum contrast to the font color (meets #92)
    • [ ] Include "text color and highlight validation" listed bellow
• Text Alignment
  • [ ] [better] provide alignment only to one side (meets partially #96) User can only align to left or to right the entire text content. No block-level alignment.
    • [ ] Include "text alignment instruction" listed bellow
    • [ ] Include text alignment validation listed bellow
  • If provides block-level alignments, center or justify options
    • [ ] Include "text alignment instruction" listed bellow
    • [ ] Include text alignment validation listed bellow
• Font
  • [ ] provide only named-font sizes: xx-small, x-small, small, medium, large, x-large, xx-large, xsmaller, or larger
• Text Spacing (meet #99)
  • [ ] Line height (line spacing) to at least 1.5 times the font size;
  • [ ] Spacing following paragraphs to at least 2 times the font size;
  • [ ] Letter spacing (tracking) to at least 0.12 times the font size;
  • [ ] Word spacing to at least 0.16 times the font size.

Paste

On copy and paste rich-text contents from outside sources (e.g web pages and word processors), the original format is retained and inaccessible formats could be used. For instance, a link with no text description or a text with low contrast color.

• [ ] Do not allow paste Rich-Text content from outside sources; OR
• [ ] On paste, automatic fixed all inaccessible content

Glossary

Present a glossary with the terms that was defined with the Definition inline-semantic type. Use <dl title="Glossary">

Accessibility Validations

• [ ] Header Validation (#62) Check whether header hierarchy is respected. Invalid: if is not respected
• [ ] Text color and highlight Validation (#78 ) Check whether color and/or highlight style are combined with semantic options (text-level types). invalid if is alone.
• [ ] Text alignment Validation (#96)
  • Check whether justify or center alignment are used. Invalid if is used.
  • Check whether left and right alignment are used. Invalid if both are used in entire text.
• [ ] Broken Definition's link. If user deactivate a Definition that is linked anywhere else in the content, system should alert about a term without definition. (#122 ) System should assume that now that the term is without a (linked) definition it is difficult to understand

General Validations

• [ ] Empty block-types. User should not leaver empty block-types. User should not add blank lines in order to style presentation. System should not allow save the Text Editor's content while there is an empty block-type

  <p></p>

• [ ] Orphaned description validation. System should not allow save the Text Editor's content while there is an orphaned description on Description List (user can erase a TERM, leaving behind it description)

  <dl>
  <dt><dfn>[TERM A]</dfn></dt>
  <dd></dd>
  </dl>

• [ ] Orphaned term validation. System should not allow save the Text Editor's content while all TERM do not have t least one description on Descriptions List (user can erase all DESCRIPTIONS of a TERM).

  <dl>
  <dt><dfn></dfn></dt>
  <dd>[DEFINITION 1]</dd>
  </dl>

• [ ] pending validations for Description List dialog :pencil2:
• Required
• Optional
• [ ] pending validations for Blockquote dialog :pencil2:
  • [ ] Valid URL
• Required
• Optional
• [ ] pending validations for Caption dialog :pencil2:
• Required
• Optional
• [ ] Empty Inline-Semantics types. System should remove empty Inline-Semantics before persisting the content. Note: I'm assuming that user will never use (deliberate) an empty Inline-Semantics. However, If someone think in some scenario uses empty inline-semantic to achieve some gol, then we should change this validation to: System should not allow save the Text Editor's content while there is an empty inline-semantic type
• [ ] pending validations for Abbreviation dialog :pencil2:
• Required
• Optional
• [ ] pending validations for Definition dialog :pencil2:
• Required
• Optional
• [ ] pending validations for Quote dialog :pencil2:
  • [ ] Valid URL
• Required
• Optional
• [ ] pending validations for Lang dialog :pencil2:
• Required
• Optional
• [ ] pending validations for Link dialog :pencil2:
  • [ ] Valid URL
• Required
• Optional

Feedback

• [ ] Use the AcessiblityHelp See #46 (meets #134)

Labels

widget	component	visible label	aria-label
Text Editor	Text Area	*	*
Text Editor	Headers[1..6]	[icon]1..6	Title [One..Six]
Text Editor	Paragraph	[icon]	Paragraph
Text Editor	Preformatted	[icon]	Preformatted
Text Editor	Ordered List	[icon]	Ordered List
Text Editor	Unordered List	[icon]	Unordered List
Text Editor	Description List	[icon]	Description List
Text Editor	Blockquote	[icon]	Block quote
Text Editor	Captions	[icon]	Captions
Text Editor	Strong	Strong	Strong
Text Editor	Emphasis	Emphasis	Emphasis
Text Editor	Mark	Mark	Mark
Text Editor	Abbreviation	Abbr	Abbreviation
Text Editor	Definition	Dfn	Definition
Text Editor	Quote	[icon]	Quote
Text Editor	Cite	[icon]	Cite
Text Editor	Code	[icon]	Code
Text Editor	Var	[icon]	Variable
Text Editor	Output	[icon]	Output
Text Editor	Subscript	[icon]	Subscript
Text Editor	Superscript	[icon]	Superscript
Text Editor	Lang	[icon]	Language
Text Editor	Link	[icon]	Link
Desc List Dialog	TERM	Term	Term
Desc List Dialog	DESCRIPTION_LANG	Description	Description
Desc List Dialog	TERM_LANG	Language	Language of the Term
Desc List Dialog	DESCRIPTION_LANG	Language of the Description	Language of the Description
Desc List Dialog	Add Related Term	[icon]	Add an alternative term
Desc List Dialog	Delete Related Term	[icon]	Delete the alternative term
Desc List Dialog	Add Related Description	[icon]	Add an alternative description
Desc List Dialog	Delete Related Description	[icon]	Delete the alternative description
Desc List Dialog	Add New Term	[icon]	Add new term
Desc List Dialog	Set Description List	Confirm	Set the description list
Desc List Dialog	Deactivate Description List	Deactivate	Deactivate the description list
Desc List Dialog	Cancel Description List	Cancel	Cancel
BlockQ Dialog	CONTENT	Text [required]	n/a
BlockQ Dialog	URL	Document link [optional]	n/a
BlockQ Dialog	AUTHOR	Author name(s) [optional]	n/a
BlockQ Dialog	TITLE OF DOCUMENT	Document title [optional]	n/a
BlockQ Dialog	Set Blockquote	CONFIRM	n/a
BlockQ Dialog	Deactivate Blockquote	DEACTIVATE	n/a
BlockQ Dialog	Cancel Blockquote	CANCEL	n/a
Caption Dialog	CAPTION	Caption [required]	n/a
Caption Dialog	POSITION	Position	n/a
Caption Dialog	Set Caption	CONFIRM	n/a
Caption Dialog	Deactivate Caption	DEACTIVATE	n/a
Caption Dialog	Cancel Caption	CANCEL	n/a
Abbr Dialog	EXPANSION	Description [required]	n/a
Abbr Dialog	CONTENT	Abbreviation [required]	n/a
Abbr Dialog	Set Abbreviation	CONFIRM	n/a
Abbr Dialog	Deactivate Abbreviation	DEACTIVATE	n/a
Abbr Dialog	Cancel Abbreviation	CANCEL	n/a
Dfn Dialog	CONTENT_DEFINITION	Term definition	n/a
Dfn Dialog	CONTENT	Term	n/a
Dfn Dialog	Set Definition	CONFIRM	n/a
Dfn Dialog	Deactivate Definition	DEACTIVATE	n/a
Dfn Dialog	Cancel Definition	CANCEL	n/a
Quote Dialog	CONTENT	Text [required]	n/a
Quote Dialog	URL	Document link [optional]	n/a
Quote Dialog	Set Quote	CONFIRM	n/a
Quote Dialog	Deactivate Quote	DEACTIVATE	n/a
Quote Dialog	Cancel Quote	CANCEL	n/a
Lang Dialog	LANG	Text language	n/a
Lang Dialog	CONTENT	Text	n/a
Lang Dialog	Set Lang	CONFIRM	n/a
Lang Dialog	Deactivate Lang	DEACTIVATE	n/a
Lang Dialog	Cancel Lang	CANCEL	n/a
Link Dialog	ORIGIN_LINK	Link origin [required]	n/a
Link Dialog	DEFINITION	Definitions	n/a
Link Dialog	CONTENT	Link text [required]	n/a
Link Dialog	URI	URL	n/a
Link Dialog	Set Link	CONFIRM	n/a
Link Dialog	Deactivate Link	DEACTIVATE	n/a
Link Dialog	Cancel Link	CANCEL	n/a
Link Dialog	Set Link	CONFIRM	n/a
Link Dialog	Deactivate Link	DEACTIVATE	n/a
Link Dialog	Cancel Link	CANCEL	n/a

Instructions

• [ ] provide the expected data format and an example, if the field requires any format (meets #134)

widget	component	Inline Instruction	Placeholder	Tooltip
Text Editor	Text Area	*	*	n/a
Text Editor	Headers[1..6]	n/a	n/a	Set text as a title
Text Editor	Paragraph	n/a	n/a	Set text as a paragraph
Text Editor	Preformatted	n/a	n/a	Set text as preformatted
Text Editor	Ordered List	n/a	n/a	Set text as ordered list
Text Editor	Unordered List	n/a	n/a	Set text as a unordered list
Text Editor	Description List	n/a	n/a	Insert a list of terms and it's definition
Text Editor	Blockquote	n/a	n/a	Set a extended quotation
Text Editor	Captions	n/a	n/a	Set a caption to the selected item
Text Editor	Strong	n/a	n/a	Set text as of strong importance
Text Editor	Emphasis	n/a	n/a	Set text as of stressed emphasis
Text Editor	Mark	n/a	n/a	Set text as marked or highlighted for reference or notation
Text Editor	Abbreviation	n/a	n/a	Set text as an abbreviation or acronym
Text Editor	Definition	n/a	n/a	Set a definition to the text
Text Editor	Quote	n/a	n/a	Set a short line quotation
Text Editor	Cite	n/a	n/a	Set a reference
Text Editor	Code	n/a	n/a	Set a text as short fragment of code
Text Editor	Var	n/a	n/a	Set a text as variable
Text Editor	Output	n/a	n/a	Set text as a sample or program output
Text Editor	Subscript	n/a	n/a	Set a text in subscript notation
Text Editor	Superscript	n/a	n/a	Set a text in superscript notation
Text Editor	Lang		n/a	n/a	Set the language of the text
Text Editor	Link	n/a	n/a	Set text as a Link
Desc List Dialog	TERM	Provide the term to be defined	Blanco tequila
Desc List Dialog	DESCRIPTION	Provide a description for the term	The purest form of the blue agave spirit...
Desc List Dialog	TERM_LANG	n/a	n/a	Set text language of the Term
Desc List Dialog	DESCRIPTION_LANG	n/a	n/a	Set text language of the Description
Desc List Dialog	Add Related Term	n/a	n/a	Add an alternative Term
Desc List Dialog	Delete Related Term	n/a	n/a	Delete the alternative Term
Desc List Dialog	Add Related Description	n/a	n/a	Add an alternative Description
Desc List Dialog	Delete Related Description	n/a	n/a	Delete the alternative description
Desc List Dialog	Add New Term	n/a	n/a	Add new term
Desc List Dialog	Set Description List	n/a	n/a	Set the description list
Desc List Dialog	Deactivate Description List	n/a	n/a	Deactivate the description list
Desc List Dialog	Cancel Description List	n/a	n/a	Cancel
BlockQ Dialog	CONTENT	Insert the citation text here		The citation text
BlockQ Dialog	URL	Insert a valid link here		The link for the cited document
BlockQ Dialog	AUTHOR	Insert the author name(s) here		The name of the author(s) of the cited document
BlockQ Dialog	TITLE OF DOCUMENT	Insert the document title here		The title of the cited document
BlockQ Dialog	Set Blockquote	n/a	n/a	Confirms the citation configuration
BlockQ Dialog	Deactivate Blockquote	n/a	n/a	Deactivates the citation configuration
BlockQ Dialog	Cancel Blockquote	n/a	n/a	Discards the citation configuration alterations
Caption Dialog	CAPTION	Insert the caption text here		The text for the caption
Caption Dialog	POSITION	Select the position for the caption		The position for the caption
Caption Dialog	Set Caption	n/a	n/a	Confirms the caption configuration
Caption Dialog	Deactivate Caption	n/a	n/a	Deactivates the caption configuration
Caption Dialog	Cancel Caption	n/a	n/a	Discards the caption configuration alterations
Abbr Dialog	EXPANSION	Insert the expanded text for the abbreviation here		The expanded text for the abbreviation
Abbr Dialog	CONTENT	Insert the abbreviation here		The abbreviation
Abbr Dialog	Set Abbreviation	n/a	n/a	Confirms the abbreviation configuration
Abbr Dialog	Deactivate Abbreviation	n/a	n/a	Deactivates the abbreviation configuration
Abbr Dialog	Cancel Abbreviation	n/a	n/a	Discards the abbreviation configuration alterations
Dfn Dialog	CONTENT_DEFINITION	Insert the term definition here		The term definition
Dfn Dialog	CONTENT	Insert the term here		The term to be defined
Dfn Dialog	Set Definition	n/a	n/a	Confirms the definition configuration
Dfn Dialog	Deactivate Definition	n/a	n/a	Deactivates the definition configuration
Dfn Dialog	Cancel Definition	n/a	n/a	Discards the definition configuration alterations
Quote Dialog	CONTENT	Insert the citation text here		The citation text
Quote Dialog	URL	Insert a valid link here		The link for the cited document
Quote Dialog	Set Quote	n/a	n/a	Confirms the citation configuration
Quote Dialog	Deactivate Quote	n/a	n/a	Deactivates the citation configuration
Quote Dialog	Cancel Quote	n/a	n/a	Discards the citation configuration alterations
Lang Dialog	LANG	Select the text language here		The text language
Lang Dialog	CONTENT	Insert the text here		The text
Lang Dialog	Set Lang	n/a	n/a	Confirms the language configuration
Lang Dialog	Deactivate Lang	n/a	n/a	Deactivates the language configuration
Lang Dialog	Cancel Lang	n/a	n/a	Discard the language configuration alterations
Link Dialog	ORIGIN_LINK	Select a definition or insert a valid URL		The link origin
Link Dialog	DEFINITION	Select a definition		List of defined terms
Link Dialog	CONTENT	Insert the text for the link here		The link text
Link Dialog	URI	Insert a valid URL here		The URL for the link
Link Dialog	Set Link	n/a	n/a	Confirms the link configuration
Link Dialog	Deactivate Link	n/a	n/a	Deactivates the link configuration
Link Dialog	Cancel Link	n/a	n/a	Discards the link configuration alterations

Note: Placeholder text provides instructions or an example of the required data format inside form fields that have not yet been edited by the user. Placeholder text is usually displayed with lower color contrast than text provided by users, and it disappears from form fields when users start entering text. If the placeholder text contains instructional information or examples that disappear, it makes it more difficult for users to check their responses before submitting the form.

While placeholder text provides valuable guidance for many users, placeholder text is not a replacement for labels. Assistive technologies, such as screen readers, do not treat placeholder text as labels. Moreover, at the time of writing this tutorial, placeholder text is not broadly supported across assistive technologies and not displayed in older web browsers.

Help button ("More details")

A button on toolbar with an help icon

• 150 (meets #134)

Description Lists

Term-description groups may be names and definitions, questions and answers, categories and topics, or any other groups of term-description pairs. The order of term-description groups within a dl element, and the order of terms and descriptions within each group, may be significant.

Example 1 In this example a dl is used to represent a simple list of names and descriptions:

  
Blanco tequila
  
The purest form of the blue agave spirit...
  
Reposado tequila
  
Typically aged in wooden barrels for between two and eleven months...

Example 2 In this example a dl element represents a set of terms, each of which has multiple descriptions:

Information about the rock band Queen:

  
Members
  
Brian May
  
Freddie Mercury
  
John Deacon
  
Roger Taylor
  
Record labels
  
EMI
  
Parlophone
  
Capitol
  
Hollywood
  
Island

Example 3 In this example a dl is used to show a set of instructions, where the order of the instructions is important:

Determine the victory points as follows (use the first matching case):

  
 If you have exactly five gold coins 
  
 You get five victory points 
  
 If you have one or more gold coins, and you have one or more silver coins 
  
 You get two victory points 
  
 If you have one or more silver coins 
  
 You get one victory point 
  
 Otherwise 
  
 You get no victory points 

### Guided Help meets #134 any scenario :question: ### Error identification meets #131 - [ ] Provide an error message as specific as possible. (meet #131) - [ ] Indicate the error (meet #131) - [ ] use color, shape, text (meet #78 #900 ) - [ ] use semantic markup (meet #76 ) - [ ] use aria-[state] (meet #131) - See wire-frames for example of error indication on Text Area [SUGGESTION] - Errors on entire blocks could be indicated by inserting a border (shape) - Errors on Text could be marked with ` - Use css to set the presentation with **text-decoration-style**, **text-decoration-line** and **text-decoration-color**. For instance: `.typeOfError { text-decoration: wavy underline overline;}` - avoid `text-decoration: solid underline` because it could be confised with links). - For error indication for inputs, use the AccessibilityHelp - See #48 ### Error suggestions meets #133 - [ ] **Required Fields**. "[Field_Name] is required. Please complete it" - [ ] **Invalid content**. "[Field_Name] is invalid. Please inform a [content] that is [rule]" - [ ] **Empty block-types**. "Seems that you left some empty line. Empty lines are not allowed" - [ ] **Orphaned term validation**. "Seems that a description list is incomplete. Every term should have at least one description and every description should have at least one term." - [ ] **Orphaned description validation**. "Seems that a description list is incomplete. Every description should have at least one term." - [ ] **Header Validation**: "Headers must be structured hierarchically. For example, try to follow nested content under an h2 heading with h3 before you use h4." - [ ] set accessibility to false - [ ] **Broken Definition's link**. "A term definition that you had linked in other part of the content have been deactivated. Check the terms without a definition and if necessary add a definition. Unusual terms could be difficult to understand and thus not accessible." - [ ] set accessibility to false Only if decorative styles are allowed - [ ] **Text color and highlight Validation**: "Seems that you styled a text but add no semantic meaning to it. Pure decorative styles is not encourage. If you wants to give meaning for a text, for instance an importante phrase, you should use some of the of the semantic options" - [ ] set accessibility to false - [ ] **Text alignment Validation**: - [ ] "Justified or Centered text are not accessible. Align text just for one side, either left or right". - [ ] "Mixing text alignments is not accessible. Align text just for one side, either left or right". - [ ] set accessibility to false # Usage - [ ] Text Editor component should be build to be a Dynamic component. Thus, it should be adaptable for different usage context ## Authoring Tool - [ ] **Text Component - Text Section**: - full version of Text Editor - Top-level header: `h3` - [ ] **Image Component - Long Description (image's caption)** - include all Block types, except for Headers - include all Inline-Semantic Types - [ ] **Video Component - Transcription** - include Paragraph - include Description List - include strong - include emphasis - include abbreviation - include definition - lang - [ ] **Audio Component - Transcription** - include Paragraph - include Description List - include strong - include emphasis - include abbreviation - include definition - lang - [ ] **Link - Text Description**: a `input type='text'` - [ ] **Activity Component - Instructions**: - full version of Text Editor, except for Headers ## Course - [ ] **Activity Component - Text**: - full version of Text Editor - header top-level `h2` ## StoryTelling - [ ] Description (Transcription) - include Paragraph - include Description List - include strong - include emphasis - include abbreviation - include definition - lang ## Forum - [ ] Full component # Wireframes ## Toolbar     ### Link dialog  ### Lang dialog  ### Abbr dialog  ### Definition dialog  ### Description List dialog  ## Text Area **Initial state / no focus**  **Focused**  **Focused**  **No focus**  ## Header Validation  # References [HTML5 specs](https://www.w3.org/TR/html50/Overview.html#contents) https://openinclusion.com/blog/presenting-abbreviations-acronyms-for-screen-reader-users/

[ecureuill]

@juantenesaca this in progress, but with you desire you can start on the first section

[juantenesaca]

Ok, firstly I am fixing the navigation buttons.

[github-actions[bot]]

This Feature is ready to be implemented.

[github-actions[bot]]

This feature have been implemented and is ready for Funcional Test. Please, test the feature.