I am trying to do a thing that I don't know how to do yet.

landmark-component.js

import Ember from 'ember';

const LANDMARK_NAVIGATION_ROLE = {
	_default: 'region',
	header: 'banner',
	nav: 'navigation',
	aside: 'complementary',
	main: 'main',
	footer: 'contentinfo',
	form: 'form',
	div: 'div'
};

export default Ember.Component.extend({
	/* this should be one of 7 values:
	* aside (complementary)
	* footer (contentinfo)
	* form (form, search)
	* header (banner)
	* main (main)
	* nav (navigation)
	* div (application, document, region or any of the previous)
	*/
	tagName: 'div',

	/*should only be set if ('div' or 'form') is being used as a tagName, otherwise we don't need it.
	* valid values: 
	* banner
	* navigation
	* aside
	* main
	* form
	* search
	* application
	* document
	* region (default)
	*/
	landmarkRole: 'region',
	
	//we should set an aria-role when either a native element is not used, or the native element does not have the body element as its parent. 
	ariaRole: Ember.computed('tagName', 'landmarkRole', function(){
		//const? let? var? what's the best choice for this scenario?
		const landmark = this.get('tagName');
		let landmarkRole = this.get('landmarkRole');
		if (landmark === 'form' && landmarkRole === 'search') {
			return 'search';
		} else if (landmark === 'div') {
			return (landmarkRole);
			//how do I prevent someone from using role=form on a div? or other constraints that should throw errors?
		} else {
			return LANDMARK_NAVIGATION_ROLE[landmark] || LANDMARK_NAVIGATION_ROLE._default;
		}
	}),	

});