Uploaded image for project: 'PUBLIC - Liferay Portal Community Edition'
  1. PUBLIC - Liferay Portal Community Edition
  2. LPS-73387

AUI Carousel cannot be controlled via keyboard

    XMLWordPrintable

Details

    Description

      Description
      AUI Carousel cannot be controlled via keyboard

      Steps to reproduce/Testing done

      1. Start Liferay and login as admin
      2. Go to Control Panel > Content > Web Content
      3. Add a new structure with the following contents: 
        <root available-locales="en_US" default-locale="en_US">
	<dynamic-element dataType="string" indexType="" localizable="true" multiple="false" name="duration" readOnly="false" repeatable="false" required="false" showLabel="true" type="select" width="">
		<dynamic-element name="optionnmyt" type="option" value="1">
			<meta-data locale="en_US">
				<entry name="label">
					<![CDATA[1]]>
				</entry>
			</meta-data>
		</dynamic-element>
		<dynamic-element name="optionoqfc" type="option" value="2">
			<meta-data locale="en_US">
				<entry name="label">
					<![CDATA[2]]>
				</entry>
			</meta-data>
		</dynamic-element>
		<dynamic-element name="optionpcvk" type="option" value="3">
			<meta-data locale="en_US">
				<entry name="label">
					<![CDATA[3]]>
				</entry>
			</meta-data>
		</dynamic-element>
		<dynamic-element name="optioncvsp" type="option" value="4">
			<meta-data locale="en_US">
				<entry name="label">
					<![CDATA[4]]>
				</entry>
			</meta-data>
		</dynamic-element>
		<dynamic-element name="optionswnz" type="option" value="5">
			<meta-data locale="en_US">
				<entry name="label">
					<![CDATA[5]]>
				</entry>
			</meta-data>
		</dynamic-element>
		<dynamic-element name="optionbanm" type="option" value="6">
			<meta-data locale="en_US">
				<entry name="label">
					<![CDATA[6]]>
				</entry>
			</meta-data>
		</dynamic-element>
		<dynamic-element name="optionhqvo" type="option" value="7">
			<meta-data locale="en_US">
				<entry name="label">
					<![CDATA[7]]>
				</entry>
			</meta-data>
		</dynamic-element>
		<dynamic-element name="optionwoec" type="option" value="8">
			<meta-data locale="en_US">
				<entry name="label">
					<![CDATA[8]]>
				</entry>
			</meta-data>
		</dynamic-element>
		<dynamic-element name="optionysii" type="option" value="9">
			<meta-data locale="en_US">
				<entry name="label">
					<![CDATA[9]]>
				</entry>
			</meta-data>
		</dynamic-element>
		<dynamic-element name="optionwhkq" type="option" value="10">
			<meta-data locale="en_US">
				<entry name="label">
					<![CDATA[10]]>
				</entry>
			</meta-data>
		</dynamic-element>
		<meta-data locale="en_US">
			<entry name="label">
				<![CDATA[Item Duration]]>
			</entry>
			<entry name="predefinedValue">
				<![CDATA[[]]]>
			</entry>
			<entry name="tip">
				<![CDATA[Select how long, in seconds, you would prefer to display an item before switching to the next slide]]>
			</entry>
		</meta-data>
	</dynamic-element>
	<dynamic-element dataType="string" indexType="keyword" localizable="true" name="width" readOnly="false" repeatable="false" required="false" showLabel="true" type="text" width="small">
		<meta-data locale="en_US">
			<entry name="label">
				<![CDATA[width]]>
			</entry>
			<entry name="predefinedValue">
				<![CDATA[]]>
			</entry>
			<entry name="tip">
				<![CDATA[]]>
			</entry>
		</meta-data>
	</dynamic-element>
	<dynamic-element dataType="string" indexType="keyword" localizable="true" name="height" readOnly="false" repeatable="false" required="false" showLabel="true" type="text" width="small">
		<meta-data locale="en_US">
			<entry name="label">
				<![CDATA[height]]>
			</entry>
			<entry name="predefinedValue">
				<![CDATA[]]>
			</entry>
			<entry name="tip">
				<![CDATA[]]>
			</entry>
		</meta-data>
	</dynamic-element>
	<dynamic-element dataType="boolean" indexType="keyword" localizable="true" name="carousel_block" readOnly="false" repeatable="true" required="false" showLabel="true" type="checkbox" width="">
		<dynamic-element dataType="image" fieldNamespace="wcm" indexType="keyword" localizable="true" name="carousel_desktop_image" readOnly="false" repeatable="false" required="false" showLabel="true" type="wcm-image" width="">
			<meta-data locale="en_US">
				<entry name="label">
					<![CDATA[carousel desktop image]]>
				</entry>
				<entry name="predefinedValue">
					<![CDATA[]]>
				</entry>
				<entry name="tip">
					<![CDATA[]]>
				</entry>
			</meta-data>
		</dynamic-element>
		<dynamic-element dataType="image" fieldNamespace="wcm" indexType="keyword" localizable="true" name="carousel_mobile_image" readOnly="false" repeatable="false" required="false" showLabel="true" type="wcm-image" width="">
			<meta-data locale="en_US">
				<entry name="label">
					<![CDATA[carousel mobile image]]>
				</entry>
				<entry name="predefinedValue">
					<![CDATA[]]>
				</entry>
				<entry name="tip">
					<![CDATA[]]>
				</entry>
			</meta-data>
		</dynamic-element>
		<dynamic-element dataType="string" indexType="keyword" localizable="true" name="carousel_title" readOnly="false" repeatable="false" required="false" showLabel="true" type="text" width="small">
			<meta-data locale="en_US">
				<entry name="label">
					<![CDATA[carousel title]]>
				</entry>
				<entry name="predefinedValue">
					<![CDATA[]]>
				</entry>
				<entry name="tip">
					<![CDATA[]]>
				</entry>
			</meta-data>
		</dynamic-element>
		<dynamic-element dataType="string" indexType="keyword" localizable="true" name="carousel_desc" readOnly="false" repeatable="false" required="false" showLabel="true" type="textarea" width="small">
			<meta-data locale="en_US">
				<entry name="label">
					<![CDATA[carousel desc]]>
				</entry>
				<entry name="predefinedValue">
					<![CDATA[]]>
				</entry>
				<entry name="tip">
					<![CDATA[]]>
				</entry>
			</meta-data>
		</dynamic-element>
		<dynamic-element dataType="string" indexType="keyword" localizable="true" name="carousel_link_text" readOnly="false" repeatable="false" required="false" showLabel="true" type="text" width="small">
			<meta-data locale="en_US">
				<entry name="label">
					<![CDATA[carousel link text]]>
				</entry>
				<entry name="predefinedValue">
					<![CDATA[]]>
				</entry>
				<entry name="tip">
					<![CDATA[]]>
				</entry>
			</meta-data>
		</dynamic-element>
		<dynamic-element dataType="link-to-page" fieldNamespace="ddm" indexType="keyword" localizable="true" name="carousel_link" readOnly="false" repeatable="false" required="false" showLabel="true" type="ddm-link-to-page" width="small">
			<meta-data locale="en_US">
				<entry name="label">
					<![CDATA[carousel link]]>
				</entry>
				<entry name="predefinedValue">
					<![CDATA[]]>
				</entry>
				<entry name="tip">
					<![CDATA[]]>
				</entry>
			</meta-data>
		</dynamic-element>
		<dynamic-element dataType="string" indexType="keyword" localizable="true" name="Third_Party_Link" readOnly="false" repeatable="false" required="false" showLabel="true" type="textarea" width="small">
			<meta-data locale="en_US">
				<entry name="label">
					<![CDATA[Third Party Link]]>
				</entry>
				<entry name="predefinedValue">
					<![CDATA[]]>
				</entry>
				<entry name="tip">
					<![CDATA[]]>
				</entry>
			</meta-data>
		</dynamic-element>
		<meta-data locale="en_US">
			<entry name="label">
				<![CDATA[carousel block]]>
			</entry>
			<entry name="predefinedValue">
				<![CDATA[false]]>
			</entry>
			<entry name="tip">
				<![CDATA[]]>
			</entry>
		</meta-data>
	</dynamic-element>
</root>
      1. Add a new velocity template with the following contents: 
        <style type="text/css" media="screen">
  #common-carousel {
    height: $height.getData()px;
    position: relative;
    //width: $width.getData()px;
  }
  #common-carousel .carousel-item.carousel-item-active {
    display: block;
  }
  #common-carousel .carousel-item {
    display: none;
    height: $height.getData()px;
    overflow: hidden;
    width: 100%;
    position: absolute;
    top: 0;
  }
</style>

<div id="common-carousel">
  #if (!$carousel_block.getSiblings().isEmpty())
  #foreach ($cur_carousel_block in $carousel_block.getSiblings())
  <div class="carousel-item">
    
    <style>
      .aui .common-carousel-inner {
        background-image: url($cur_carousel_block.carousel_desktop_image.getData());
      }
      @media (max-width: 767px) {
        .aui .common-carousel-inner {
          background-image: url($cur_carousel_block.carousel_mobile_image.getData())
        }
      }
      
      .aui.ie8 .common-carousel-inner {
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='$cur_carousel_block.carousel_mobile_image.getData()', sizingMethod='scale');
        -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='$cur_carousel_block.carousel_mobile_image.getData()', sizingMethod='scale')";
        background-image: none;
      }    
      
    </style>
		
    <div class="common-carousel-inner">
      <div class="common-carousel-portlet">
        <div class="common-carousel-portlet-content">
          <div class="common-carousel-portlet-mobile">
            <h4 class="inversed">
              $cur_carousel_block.carousel_title.getData()
            </h4>
            <div class="copy">
              <p>
                $cur_carousel_block.carousel_desc.getData()
              </p>
              #if($cur_carousel_block.carousel_link_text.getData() != "")
                  <p class="btn-block">
                    <a href="$cur_carousel_block.Third_Party_Link.getData()" class="btn btn-blue" target="_blank">
                      $cur_carousel_block.carousel_link_text.getData() 
                    </a>
                  </p>
              #end
            </div>            
          </div>          
        </div>
      </div>
    </div>
  </div>
  #end
  #end
</div>
<script type="text/javascript">
  
  AUI().ready(
    'aui-carousel',
    function(A) {
      
      new A.Carousel(
        {
          contentBox: '#common-carousel',
          intervalTime: $duration.getData(),
          activeIndex: 0,
          height: $height.getData(),
          width: '100%',
          pauseOnHover: true,
          imageAnim: false
        }
      ).render();
    }
  );
  
  
</script>
      1. Create a new web content article with the above structure/template
      2. Add it to a page
      3. Notice that the Carousel controls can't be used with the keyboard

      Results of Testing
      Expected behavior: Carousel can be controlled with the keyboard
      Actual behavior: Carousel cannot be controlled with the keyboard

      Errors/Logs
      n/a

      Reproduced...
      Reproduced in trunk? Unable to test; different structure format used
      Reproduced in branch? Yes (2240b96f42b3a773d913dda960fe363929d30ac0)

      Attachments

        Issue Links

          is duplicated by

          Bug - A problem which impairs or prevents the functions of the product. LPS-73386 AUI Carousel cannot be controlled via keyboard

          • Closed
          is related to

          Sub-Task - The sub-task of the issue AUI-1349 Make aui-carousel accessible

          • Minor - Minor loss of function, or other problem where easy workaround is present.
          • Closed
          relates

          Bug - A problem which impairs or prevents the functions of the product. LPE-15983 AUI Carousel cannot be controlled via keyboard

          • Minor - Minor loss of function, or other problem where easy workaround is present.
          • Closed

          Bug - A problem which impairs or prevents the functions of the product. LPS-73585 Pressing spacebar on carousel controls will scroll the page down

          • Closed

          Activity

            People

              hong.zhao Hong Zhao (Inactive)
              jonathan.mak Jonathan Mak (Inactive)
              Kiyoshi Lee Kiyoshi Lee
              Votes:
              0 Vote for this issue
              Watchers:
              1 Start watching this issue

              Dates

                Created:
                Updated:
                Resolved:
                5 years, 46 weeks, 1 day ago

                Packages

                  Version Package
                  6.2.X EE
                  7.0.0 DXP FP23
                  7.0.X EE
                  7.0.4 CE GA5
                  7.1.X
                  Master