By Nwose Lotanna

Translation: Crazy geek

Original text: blog.logrocket.com/fragments-i…

Reproduced without permission

In this article I’ll introduce you to an exciting concept that will help you master vue.js.

Implement accessibility in Vue

To achieve accessibility on the Web, you need to design pages, tools, and technologies that everyone can use.

“Everyone” includes people with hearing, cognitive, neurological, physical, language and visual impairments.

Accessibility support is necessary to enable assistive technologies such as screen readers to interpret web pages and applications. In order for these technologies to work, developers need to consider accessibility.

Prior to the start

This article is intended for front-end developers at all levels using vue.js, so you don’t need to understand beginner’s concepts and the installation process to understand them.

Here are some prerequisites you should have before you start.

You need to:

  • Node.js 10.x or later is installed. You can do this by running it on a terminal or at a command promptnode -vTo verify.
  • Node Package Manager version 6.7 or later (NPM) is installed.
  • Code editor: Visual Studio code is strongly recommended.
  • The latest version of Vue is installed globally on your computer.
  • Vue CLI 3.0 is installed on your computer. To do this, uninstall the old CLI version first:
npm uninstall -g vue-cli
Copy the code

Then install the new:

npm install -g @vue/cli
Copy the code

either

  • Download the Vue Starter project here (github.com/viclotana/v…
  • Unzip the downloaded project
  • Go to the decompressed directory and run the following command to keep all dependencies up to date:
npm install
Copy the code

Problem: Multiple root nodes

When building content within the template section of a Vue component, you may notice that there can only be one root HTML tag inside the template tag.

Within this root HTML tag, you can create as many child nodes as you need, so you can’t have multiple root nodes in a Vue component.

If you have the project open with VS Code, navigate to the SRC folder, then navigate to the Components folder, and open the app.js file. Your app.js file should look like this:

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <Test msg="Welcome to Your Vue.js App"/>
  </div>
</template>
<script>
import Test from './components/Test.vue'
export default {
  name: 'app'.components: {
    Test
  }
}
</script>
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
Copy the code

You can see that div is the only root node in the template. If you try adding additional root nodes like this:

<template>
<span>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <Test msg="Welcome to Your Vue.js App"/>
  </div>
  <div>
    <h1>Header inside root node 2</h1>
  </div>
</span>
</template>
<script>
import Test from './components/Test.vue'
export default {
  name: 'app'.components: {
    Test
  }
}
</script>
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
Copy the code

As you can see, the Vue compiler will prompt you with an error about having multiple root nodes when you save.

Additional node wrapper technology

To find a way around this, Vue developers often create an extra (and almost unnecessary) root node wrapper in which appropriate child nodes can be created.

The label here can be a SPAN or div tag. Most Vue developers often use div tags to ensure that their blocks of code don’t make errors that break the program.

These extra tags do nothing but prevent errors.

<template>
<span>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <Test msg="Welcome to Your Vue.js App"/>
  </div>
  <div>
    <h1>Header inside root node 2</h1>
  </div>
</span>
</template>
<script>
import Test from './components/Test.vue'
export default {
  name: 'app'.components: {
    Test
  }
}
</script>
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
Copy the code

The problem with this method is that it is inaccessible.

Now according to the HTML guide, semantic tags such as list items should be wrapped with ordered or unordered list tags. Similarly, table entries should be wrapped with table labels as parent labels.

Demo

Let’s use the app.vue component to render the list that will be created in the test.vue component.

Open your app. vue file and copy the following code in the template section:

<template>
<span>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <ol>
      <Test />
    </ol>
    
  </div>
</span>
</template>
Copy the code

Then, in the test.vue component, place the list items in the template section as follows:

<template>
<div>
   <li>1. Array method</li>
   <li>2. Extra tag method</li>
   <li>3. fragments</li>
  </div>
</template>
Copy the code

The above code block does not return errors by the compiler. In fact, it will be passed to the app.vue component to render the list correctly.

However, if you examine the element in DevTools, you will see that it does not return semantic HTML.

If you don’t follow this semantics, your HTML code will probably work fine, but it won’t be picked up by screen readers or assistive devices like speech translators.

This is why this method (widely used) is not accepted now. In general, people prefer to write code that is accessible.

Solution: Fragments

This concept was introduced when the React team released version 16. This is a solution to the accessibility gap caused by developer behavior.

The team found a way to create HTML tags that are not read by the DOM as nodes and call them fragments.

It works exactly like the DIV or SPAN tag, but does not change the overall structure of the code, thus preserving the semantics of the DOM tree.

React syntax

render() {
    return ( 
       <React.fragment >
         <ChildA / >
         <ChildB / >
         <ChildC / >
       </React.fragment>
    );
}
Copy the code

In the DOM, it looks like this:

<ChildA / >
<ChildB / >
<ChildC / >
Copy the code

Fragments are invisible wrapper tags that do not affect the node structure of the DOM, thus achieving accessibility.

Fragments in Vue

The Vue team has yet to complete a formal fragment feature, but Julien Barbay, a member of the Vue community, has built a great plug-in.

The plug-in acts as a wrapper. It is then commented out in the DOM when Vue compiles.

This is a very effective way to use fragments in Vue 2.x

The syntax is as follows:

<Fragment >
  <ChildA / >
  <ChildB / >
  <ChildC / >
 </Fragment>
Copy the code

In the DOM, it renders as follows:

<! --Fragment-->
  <ChildA / >
  <ChildB / >
  <ChildC / >
 <! --Fragment-->
Copy the code

You can see that two lines are commented out, so the DOM has semantics and access to the code. To use it, install the plugin in your Vue project:

npm install -s vue-fragment
Copy the code

Then import it and you can use it in your test. vue file as follows:

<template>
<fragment>
   <li>1. Array method</li>
   <li>2. Extra tag method</li>
   <li>3. fragments</li>
</fragment>
</template>
<script>
import { Fragment } from 'vue-fragment'
export default {
  name: 'Test'.components: { Fragment },
  props: {
    msg: String}}</script>
Copy the code

You can see that the div tag has been replaced by the fragment. The entire presentation is now accessible.

conclusion

In this article, you learned how to use fragments in Vue and why it’s important to think about accessibility when writing code.

The Vue team has committed to introducing snippets in the upcoming Vue V3.

Julien’s plugin is a very useful plugin that you can use right now.

Welcome to scan code to pay attention to the front end of the public number: front end pioneer, free receive Vue, React tutorial.